jqGrid shows + sign even after subgrid has no data using xml

Question

I am using jqGrid to show data with subgrid. Data is in xml format.

$("#UDFs").jqGrid({
    ajaxGridOptions: { contentType: 'application/xml; charset=utf-8' },
    datatype: 'xmlstring',
    datastr: data,
    xmlReader: { root: "Response", row: "Data>UDFS>row", repeatitems: false, id: "FieldID" },
    subGrid: true,
    subgridtype: 'xml',

    subGridOptions: { "plusicon": "ui-icon-triangle-1-e", "minusicon": "ui-icon-triangle-1-s", "openicon": "ui-icon-arrowreturn-1-e" },
    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(
        {
            datastr: $($.parseXML(data)).find('Response>Data>UDFS>row:has(FieldID:contains('+ row_id+'))').XmlToString(),
            datatype: "xmlstring",
            colNames: [  'Code', 'Name'],
            colModel: [
                            { name: "Code", index: "Code", width: 130 },
                            { name: "Name", index: "Name", width: 70 }
                      ],
            xmlReader: { root: "row", row: "ValidValues>row", repeatitems: false, id: "FieldID" },
            rowNum: 20,
            pager: pager_id,
            height: '100%'
        });
        jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: false, add: false, del: false })
    },
    colNames: ['#', 'TableID', 'SAPType', 'SAPSubType', 'SAPValidation', 'FieldID', 'AliasID', 'Descr', 'TypeID', 'SizeID', 'EditSize', 'Dflt', 'NotNull', 'RTable', 'RelUDO', 'ValidValues'],
    colModel: [

                   {
                       index: 'Tick',
                       name: 'Tick',
                       width: 50,
                       resizable: false,
                       editable: true,
                       align: 'center',
                       edittype: 'checkbox',
                       formatter: "checkbox",
                       formatoptions: { disabled: false },
                       classes: 'check',
                       editrules: { required: false }, editoptions: { size: 39, value: "True:False" }
                   },
                            { name: 'TableID', index: 'TableID', align: "left", width: 40, hidden: true },
                             { name: 'SAPType', index: 'SAPType', align: "left", width: 80 },
                            { name: 'SAPSubType', index: 'SAPSubType', align: "left", width: 80 },
                            { name: 'SAPValidation', index: 'SAPValidation', align: "left", width: 80 },
                          { name: 'FieldID', index: 'FieldID', align: "left", width: 40, hidden: false },
                            { name: 'AliasID', index: 'AliasID', align: "left", width: 180 },
                            { name: 'Descr', index: 'Descr', align: "left", width: 180 },
                             { name: 'TypeID', index: 'TypeID', align: "left", width: 80 },
                             { name: 'SizeID', index: 'SizeID', align: "left", width: 80 },
                             { name: 'EditSize', index: 'EditSize', align: "left", width: 80 },

                            { name: 'Dflt', index: 'Dflt', align: "left", width: 80 },
                            { name: 'NotNull', index: 'NotNull', align: "left", width: 80 },
                            { name: 'RTable', index: 'RTable', align: "left", width: 80 },
                            { name: 'RelUDO', index: 'RelUDO', align: "left", width: 80, hidden: false },
                            { name: 'ValidValues', index: 'ValidValues', align: "left", width: 80, formatter: formatToLink, unformat: UnformatFromLink }
                        ],



    rowNum: 15,
    mtype: 'POST',
    pager: "#UDFsMap",
    gridview: true,
    rownumbers: true,
    loadonce: true,
    forceFit: true,
    width: 1100,
    height: 250,
    caption: 'Select UDF from the below list.',
    multiselect: false,
    loadComplete: function () {
        $(this).HideBusy();
    },
    ondblClickRow: function (rowid, iRow, iCol, e) {
        selectedRowId = $("#ObjType").jqGrid('getGridParam', 'selrow');
        ObjectTypeID = $("#ObjType").jqGrid('getCell', selectedRowId, 'ObjectTypeID');
        //            $("#SelectCustomer").dialog('close');
        //            xmlDoc1 = $.parseXML(xmlString);
        //            $xml1 = $(xmlDoc1);
        //            $(this).SetValuesToControl("Landscape", $xml1);
        //            $("#uxTask").attr("binding", "true");
    }
}).jqGrid('navGrid', '#UDFsMap', { edit: false, add: false, del: false, search: true });

When grid displays on page, it shows Plus (+) sign / arrow even if the subgrid does not have data.

Is it possible to hide / remove this Plus (+) sign / arrow when there is no data in subgrid?

UPDATED:

I tried your proposed solution and saw samples also, it works for me from 2nd page onwards. its not working for 1st page.

loadComplete: function (data) {
    var grid = $("#UDFs");
    var $self = $(this), rowIds = $self.jqGrid("getDataIDs"), item, i, l = rowIds.length;
    for (i = 0; i < l; i++) {
        item = $self.jqGrid("getLocalRow", rowIds[i]);
        debugger;
        if (item.ValidValues == null || item.ValidValues.length === 0) {
            // subggrid is empty
            $("#" + rowIds[i]).find(">.ui-sgcollapsed").unbind("click").html("");
        }
    }
    $(this).HideBusy();
},

When the grid load, it works from 2nd page onward. Please see the screen shot. In the last column (ValidValues), if exist then show subgrid / plus sign otherwise hide.

In below screen shot it is working.

Answer 1

I recommend you to hide the "+" icon of rows which have no subgrids inside of loadComplete callback. The first parameter of callback loadComplete contains all parsed XML data (datastr: data) which you use to fill the grid. See the old answer which describes the main idea of the hiding of the rows. You can get the ids of the rows of the current page by usage of getDataIDs and to find the corresponding item in XML data by the id. Then you can examine the information about subgrids and to hide the icon.

The demo demonstrates the approach in case of usage JSON data. You can do the same with XML data too. You need just change the criteria for testing the input data for the existence of subgrid.

UPDATED: The code which you posed in UDPATED works only with the second part because you use datatype: 'xmlstring'. At the first loading the data in loadComplete are XML data and you should be more careful how to parse it. My demo used JSON instead of XML data. So you should use the demo which I posted as the template, but you have to modify it based on the format of the data which you use.