JqGrid - Retrieve raw rowData from parent grid

I have the following jqGrid and a child grid using subgrid

. In an event, subGridRowExpanded

I am trying to specify the column value of the parent rows as shown below, but it only displays the value formatted

.

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