CODEWITHSUNDEEP
javascriptphpjqgrid
tzanuttini
tzanuttini

Reputation: 25

I don't know why my jqGrid subgrid doesn't show me the data

I have problem with my subgrid data when I use PuTTY to program with my father. We do a grid with a subgrid; this receives JSON and PHP responses. We see it in the depuring of Mozilla and the syntax of the JavaScript code. Is it OK, not a problem of syntax or semantics?

Well, this is my page and my code:

$(document).ready(function() {
    $("#divFacturas").html("<table><tr><td><table id='grillaFac' name='grillaFac' style=' height=2500px width=100%'></table> <DIV id='pggrillaFac' name='pggrillaFac'></DIV></td></tr></table>");
    var usuario = $("#usuario").val();
    var clave   = $("#clave").val();
    creaGrillaFacturas(usuario, clave);

    function creaGrillaFacturas(usuario, clave) {
        jQuery("#grillaFac").jqGrid(
        {
            url:'ajaxFacturas.php?usuario=' + usuario + '&clave=' + clave,
            datatype: "json",
            colNames:['Codigo', 'Tipo', 'Fecha/hora Comprobante', 'Comprobante', 'Debito', 'Credito', 'Resumen'],
            colModel:[ { name:'codigo', index:'codigo', width: 80, sorttype:'int'},
                       { name:'tipo', index:'tipo'},
                       { name:'fecha', index:'fecha'},
                       { name:'numero', index:'numero'},
                       { name:'debito', index:'debito', align: 'right', formatter:"number", summaryType:'sum' },
                       { name:'credito', index:'credito', align: 'right', formatter:"number", summaryType:'sum' },
                       { name:'resumen', index:'resumen', align: 'right'}
                     ],
            rowNum: 1000,
            shrinkToFit: true,
            forceFit:true,
            loadtext: 'Cargando',
            //loadonce: true,
            viewrecords: true,
            pager: '#pggrilla',
            altRows: true,
            sortname: 'codigo',
            sortorder: "desc",
            forceFit : true,
            ignoreCase: true,
            caption:"Comprobantes encontrados",
            //jsonReader: { repeatitems : false, id: 'codigo',
            //subgrid: {root: "rows", repeatitems: false}},
            jsonReader: { repeatitems: false, id: 'codigo'},
            grouping : true,
            groupingView : { groupField: ['resumen'],
                             groupSummary: [true],
                             groupColumnShow: [true],
                             groupText: ['<b>Resumen Nro.: {0}</b>'],
                             groupCollapse: false,
                             groupOrder: ['desc']},
            subGrid: true,
            subGridRowExpanded: function (subgrid_id, row_id) {
                var subgrid_table_id, pager_id;
                subgrid_table_id = subgrid_id+"_t";
                pager_id = "p_"+subgrid_table_id;
                $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
                jQuery("#"+subgrid_table_id).jqGrid({
                    url:"subgrid.php?q=1162&id="+row_id,
                    dataype:"json",
                    colNames: ['Articulos', 'Descripcion', 'Cantidad', 'Precio unitario'],
                    colModel:[
                        {name:"articulo", index:"articulo", width:100},
                        {name:"detalle", index:"detalle", width:100},
                        {name:"cantidad", index:"cantidad", width:100},
                        {name:"precio", index:"precio", width:100}
                    ],
                    rowNum:20,
                    viewrecords: true,
                    //pager: pager_id,
                    sortname:'articulo',
                    sortorder:"asc",
                    height: '100%'
                });
                //jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false})
            }
        });

        jQuery("#grillaFac").jqGrid('hideCol', ['codigo']);
        jQuery("#grillaFac").jqGrid('navGrid', 'pggrillaFac',
               {search:true, edit:false, add:false, del:false});

        $("#grillaFac").setGridWidth($(window).width()-50);
        $("#grillaFac").setGridHeight($(window).height()-50);
    }
});

I hope you can help me :D.

Upvotes: 0

Views: 196

Answers (1)

Oleg
Oleg

Reputation: 221997

The most important bug in your code is the typing error: you use dataype:"json" instead of datatype:"json" as the option of subgrid. The unknown option dataype will be ignored and the default value "xml" of the option datatype will be used. The server returns JSON data and jqGrid will try to parse the data as XML data.

I recommend you don't use retro versions of jqGrid. You use currently jqGrid 4.4.1, which is 4 years old. It corresponds driving the auto which is 40 years old. I recommend you to use free jqGrid 4.13.2 and load it directly from the CDN. You need just modify the URLs to jqGrid files to URLs described in the wiki article.

Additionally it would be important to add idPrefix option to subgrid and use some unique value as the prefix. For example you can use idPrefix: "s_" + row_id + "_" or idPrefix: subgrid_id or just idPrefix: $.jgrid.randId(). Adding of key: true in the articulo column seems be good too.

Upvotes: 1

Related Questions