jqGrid - Getting unformatted rowData from parent grid

Question

I have following jqGrid and child grid using subgrid. In the subGridRowExpanded event I am trying to alert parent row’s column value as shown below – but it is displaying formatted value only.

What is the best jqGrid approach to get the column value from the selected parent row inside the showChildGrids function?

    function showChildGrids(parentRowID, parentRowKey) 
    {
        alert(parentRowKey);
        var rowData = $(mainGrid).jqGrid('getRowData', parentRowKey)
        //var rowData = $(mainGrid).getRowData(parentRowID);

        alert(rowData.RoutingID);
    }

    function createRoutingGrid()
    {

            $(mainGrid).jqGrid({
                url: "invNewWORouting.aspx/GetRoutings",
                mtype: 'POST',
                datatype: "local", //json if want to load initially
                ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                postData:
                {
                    workOrder: function () 
                    {
                        //var selectedWorkOrder = $( "select[class='workOrderDropdown']" ).val();
                        //return selectedWorkOrder;
                        return "5454430506";
                    }
                },

                serializeGridData: jqGridCustomSerializer,
                jsonReader: {
                    repeatitems: false,
                    root: function (obj) { return obj.d; }
                },
                colNames: ['Routing ID', 'Destinations'],
                colModel: [
                    { name: 'RoutingID', index: 'RoutingID', formatter:mySpacePreserveFormatter, width:150 },
                    { name: 'Destinations', index: 'Destinations', width:400 }
                ],
                multiselect:true,
                multiboxonly:false,
                rowNum: 10,
                viewrecords: true,
                gridview: true,
                height: "auto",
                loadonce: true,
                subGrid: true, // set the subGrid property to true to show expand buttons for each row
                subGridRowExpanded: showChildGrids, // javascript function that will take care of showing the child grid
                subGridOptions: { "plusicon" : "ui-icon-plus",
                                  "minusicon" :"ui-icon-minus",
                                  "openicon" : "",
                                  "reloadOnExpand" : false,
                                  "selectOnExpand" : false },
                beforeSelectRow: function (rowid, e) 
                {
                    //Reset all checkboxes before selection
                    $(this).jqGrid('resetSelection');

                    var $self = $(this);
                    var $td = $(e.target).closest("tr.jqgrow>td");
                    var rowid = $td.parent().attr("id");
                    var rowData = $self.jqGrid("getLocalRow", rowid);

                    //Set variable for RoutingID
                    userSelectedRoutingID = rowData.RoutingID;

                    //Allow row selection
                    return true; 
                }
            });

            //Hide header checkbox
            $("#cb_"+mainGrid[0].id).hide();
        }

Formatter

        function mySpacePreserveFormatter (cellvalue, options, rowObject)
        {
         return '<pre>' + cellvalue + '</pre>';
        }

Output

getRowData works differently in different version of jqGrid and in different forks of jqGrid. So it's very important to know which one you use. The test input data are required too. Which rowid you specify in input data? Which meaning have the mySpacePreserveFormatter at all? Do yo use HTML fragments as input data for the main grid and subgrid or not (you don't use autoencode: true option). Could you provide the demo which reproduce the problem? You use datatype: "local" without data and with many other options which will be ignored with datatype: "local", so your code is unclear. — Oleg
By the way, it's bad to use formatter without specifying the corresponding unformatter (see unformat in the documentation) — Oleg
@Oleg I am using jqGrid 4.6.0. The mySpacePreserveFormatter code is present in the question. I use datatype local initially and when I need to bind the data I make it as json. I don't have a demo as of now since it is using data from server. — LCJ
Look at the demo jsfiddle.net/OlegKi/x0xm6zbs/2 as an example how you can create the demo which use datatype: "json". The callback showChildGrids don't shows where you get the data for the subgrid and how you try to create it. I wrote you before that I don't see any need to use mySpacePreserveFormatter in jqGrid 4.6 because the CSS rule .ui-jqgrid tr.jqgrow td { white-space: pre; } should be applied by default. In any way if you do need to use formatter you should always define unformatter too. The most unclear for me is the question: where you return the data for subgrid? — Oleg

KAD KAD · Accepted Answer · 2015-08-15T23:26:13

You can add a hidden column in colModel that contains the non formatted routing id :

  colNames: ['Routing ID', 'Destinations', 'nonFormattedRoutingID'],
                colModel: [
                    { name: 'RoutingID', index: 'RoutingID',       formatter:mySpacePreserveFormatter, width:150 },
                    { name: 'Destinations', index: 'Destinations', width:400 },
  {name: 'nonFormattedRoutingID', index: 'nonFormattedRoutingID', hidden:true}
                ],

Then get the value of the column in function showChildGrids

jqGrid - Getting unformatted rowData from parent grid

1 Answers