How to add a formatter (date) to a jqgrid subgrid

Question

i run in to a problem, I have the next jqgrid:

grid.jqGrid({
    datatype: "xml",
    url:'../Controladores/cPedidos.php?action=lpp',
    mtype: 'POST',
    colNames:['FECHA','PROVEEDOR','USUARIO'],
    colModel:[
        {name:'fecha_compra',index:'fecha_compra',width:120, sorttype: 'date',
            formatter: 'date', formatoptions: { srcformat: 'm/d/Y H:i', newformat: 'd/m/Y H.i'} },
        {name:'nombre',index:'nombre',editable: false, width:560},
        {name:'usuario_id',index:'usuario_id',width:100, editable: false}

    ],
    rowNum:100,
    rowList:[50,100,200],
    pager: '#paginacion',
    gridview:true,
    rownumbers:true,
    ignoreCase:true,
    sortname: 'fecha_compra',
    viewrecords: true,
    sortorder: "desc",
    caption:"Pedidos",
    height: "100%",
    subGrid : true,
    subGridUrl: '../Controladores/cPedidos.php?action=lac',
    subGridModel: [{ name  : ['Codigo','Cantidad','Articulo','Estado','Rubro','Observaciones','Fecha Recibido','Usuario'], 
        width : [50,50,450,60,60,150,0,0] }],
    ondblClickRow: function(id, ri, ci) {
        // edit the row and save it on press "enter" key
        grid.jqGrid('editRow',id,true,null,null, 'clientArray');
    },
    onSelectRow: function(id) {
        if (id && id !== lastSel) {
            // cancel editing of the previous selected row if it was in editing state.
            // jqGrid hold intern savedRow array inside of jqGrid object,
            // so it is safe to call restoreRow method with any id parameter
            // if jqGrid not in editing state
            if (typeof lastSel !== "undefined") {
                grid.jqGrid('restoreRow',lastSel);
            }
            lastSel = id;
        }
    }
}).jqGrid('navGrid','#pager',{add:false,edit:false},{},{},myDelOptions,{multipleSearch:true,overlay:false});

I am formating the dates on the main grid to dd/mm//yy (FECHA), now i need to do that to the sub grid for "fecha recibido", and i dont know were to place the forrmater code

how can u do that?

score 2 · Answer 1 · edited May 23 '17 at 11:49

You use subGridModel to create subgrid. It get use restricted possibilities to create simplest subgrids only (see the documentation). If you need have formatters in subgrids you need use more flexible way: Subgrid as Grid.

The implementation of such subgid is very simple and very flexible. You should just implement subGridRowExpanded callback in your main grid instead of usage subGridModel. If the user click on expend button ("+") to see the subgrid jqGrid create for you empty row under the expanding row. If create empty <div> element where you can place any information inclusive any other grid (subgrid). What you need to do is just to create new <table> element with some unique id attribute and to place the <table> element inside of empty <div> element which jqGrid created your you before. Typically one constructs id of the table based on id of the <div> which one get as the first parameter of the subGridRowExpanded callback.

The simplest implementation of the callback you can fins in my old answer. Another example you can find here. You can find more examples of such implementation in the documentation or just searching on web or on stackoverflow for "subGridRowExpanded" text.

How to add a formatter (date) to a jqgrid subgrid

1 Answers1