Question

I want to use a grid as subgrid in jqGrid because I read that “simple subgrid” doesn’t allow cell edit.

I’m filling main Grid with dataType function successfully and I’m trying to do the same for subgrid, but subgrid shows without data, and I don’t know why because I debugged and I catch data correctly from web service, but when I go through the data doing a addRowData to the subgrid seems to have no effect.

I’m using a a ASP.Net 2.0 web service and JSON,Here is the client code, any idea :-S? Thanks 🙂

EDIT:

I added a:

function ReceivedClientData(data) {
    var thegrid = $("#" + gridId);
    if ($(thegrid).length == 0) alert('NOT EXISTS');

    thegrid.clearGridData();
    for (var i = 0; i < data.length; i++)
        thegrid.addRowData(i + 1, data[i]);   
}

And I receive a NOT EXISTS for subgrid, I don’t know if is the best way to check if a selector exists but this would mean that I can’t find “the dynamic ” created by jqgrid when I capture the ajax postback? How can I fill the subgrid?

EDIT 2:

I think that I was wrong with subgrid ID, now I’m saving in a variable the grid_id

subGridRowExpanded: function(subgrid_id, row_id) {
            subGridID = subgrid_id;

and using it when callback, but I’m receiving a p.rownumbers is null from jqgrid.js when I try to addRowData. :-S any suggestions?

function ReceivedClientDataForSubGrid(data) {
    var thegrid = $("#" + subGridID);

    if ($(thegrid).length == 0) alert('NOT EXISTS');

    thegrid.clearGridData();
    for (var i = 0; i < data.length; i++)
        thegrid.addRowData(i + 1, data[i]);
}

Answer 1

Moving the “Edit 3” to an answer to mark the question as answered

---

I solved it, I was accesing to an incorrect ID, the correct ID is var thegrid = $(“#” + subGridID + “_t”);

complete client code

var gridId = "table";
$(function() {
    $("#"+gridId).jqGrid({
        datatype: function(pdata) { getData(pdata); },
        height: 250,
        colNames: ['Nombre Objetivo', 'Tipo Objetivo', 'Objetivo Tipo 1', 'Objetivo Tipo 2', 'Objetivo Tipo 3', 'Autoevaluacion', 'Resultado Final', 'Actions'],
        colModel: [
                        { name: 'ObjetivoNombre', width: 200, sortable: false },
                        { name: 'TipoObjetivo', width: 200, sortable: false, editable: true, edittype: 'select', editoptions: { value: { 1: '1', 2: '2', 3: '3'}} },
                        { name: 'ObjetivoTipo1', width: 200, sortable: false, hidden: true },
                        { name: 'ObjetivoTipo2', width: 200, sortable: false, hidden: true },
                        { name: 'ObjetivoTipo3', width: 200, sortable: false, hidden: true },
                        { name: 'Autoevaluacion', width: 200, sortable: false, hidden: false, editable: true },
                        { name: 'ResultadoFinal', width: 200, sortable: false, hidden: false, editable: true },
                        { name: 'act', index: 'act', width: 75, sortable: false }
                    ],
        cellEdit: true,
        cellsubmit: 'clientArray',           
        pager: '#pager',
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: 'Nombre Objetivo',
        sortorder: 'desc',
        viewrecords: true,
        gridComplete: function() {
            var ids = jQuery("#table").jqGrid('getDataIDs');
            var idsLength = ids.length;
            for (var i = 0; i < idsLength; i++) {
                var cl = ids[i];
                de = "<input style='height:22px;width:20px;' type='button' value='D' onclick=\"deleteRow('" + cl + "');\" />";
                jQuery("#table").jqGrid('setRowData', ids[i], { act: de });
            }
        },
        subGrid: true,          
        subGridRowExpanded: function(subgrid_id, row_id) {
            var subgrid_table_id;
            subgrid_table_id = subgrid_id + "_t";
            jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
            jQuery("#" + subgrid_table_id).jqGrid(
           {
               datatype: function(pdata) { getDataSubGrid(pdata); },
               colNames: ['Nombre Objetivo', 'Tipo Objetivo', 'Objetivo Tipo 1', 'Objetivo Tipo 2', 'Objetivo Tipo 3', 'Autoevaluacion', 'Resultado Final'],//, 'Actions'],
               colModel: [
                        { name: 'ObjetivoNombre', width: 200, sortable: false },
                        { name: 'TipoObjetivo', width: 200, sortable: false, editable: true, edittype: 'select', editoptions: { value: { 1: '1', 2: '2', 3: '3'}} },
                        { name: 'ObjetivoTipo1', width: 200, sortable: false, hidden: true },
                        { name: 'ObjetivoTipo2', width: 200, sortable: false, hidden: true },
                        { name: 'ObjetivoTipo3', width: 200, sortable: false, hidden: true },
                        { name: 'Autoevaluacion', width: 200, sortable: false, hidden: false, editable: true },
                        { name: 'ResultadoFinal', width: 200, sortable: false, hidden: false, editable: true }
                    ],
               height: 100,
               rowNum: 20,
               sortname: 'num',
               sortorder: "asc"                  
           });
        },
        caption: "jQGrid Ejemplo"
    })       
});
        //AJAX GET DATA FROM WS
    function getData(pData) {
        gridId = "table";
        $.ajax({
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            url: '<%= ResolveClientUrl("~/WebService.asmx/ObtenerDatosDPO") %>',
            data: '{}',
            dataType: "json",
            success: function(data, textStatus) {
                    ReceivedClientData(JSON.parse(getMain(data)).rows);
            },
            error: function(data, textStatus) {
                alert('An error has occured retrieving data!');
            }
        });
    }
    function getDataSubGrid(pData) {
        gridId = "table_t";
        $.ajax({
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            url: '<%= ResolveClientUrl("~/WebService.asmx/ObtenerDatosDPOSubGrid") %>',
            data: '{}',
            dataType: "json",
            success: function(data, textStatus) {
                ReceivedClientData(JSON.parse(getMain(data)).rows);
            },
            error: function(data, textStatus) {
                alert('An error has occured retrieving data subgrid!');
            }
        });
    }

    //COMMON FUNCTIONS
    function ReceivedClientData(data) {
        var thegrid = $("#"+gridId);

        thegrid.clearGridData();
        for (var i = 0; i < data.length; i++)
            thegrid.addRowData(i + 1, data[i]);
    }       
    function getMain(dObj) {
        if (dObj.hasOwnProperty('d'))
            return dObj.d;
        else
            return dObj;
    }