Unformatted Row Data in jqGrid

Question

In this question Oleg describes how to retrieve row data from the row id of a jqGrid.

In my code I want to show more data about a row in a subGridRowExpanded:

standardGrid.subGridRowExpanded = function (subgridId, rowId) {
    var dataFromTheRow = jQuery('#CompanyGrid').jqGrid('getRowData', rowId);
    var html = '<span style="padding-left:80px">' + dataFromTheRow.CompanyName + ' ' + 
        dataFromTheRow.StatusDesc + '</span>';
    $("#" + subgridId).html(html);
}

One of my main grid's columns has a custom formatter which returns the data formatted as a link:

var colModel = [
    { name: 'CompanyID', label: 'Id', width: 30, align: "right" },
    { name: 'CompanyName', label: 'Company Name', search: true, formatter: CompanyLink },
    ...

and

function CompanyLink(cellValue, options, rowdata, action) {
    return '<a href="CompanyProfile.aspx?CompanyId=' + rowdata.CompanyID + '">' + 
            rowdata.CompanyName + '</a>';
}

When I retrieve the data using the aforementioned answer, it shows up in my subgrid formatted, anchor and all. I was hoping that it would return just the raw data.

So, I tried adding an unformat to the col model. Based on the custom formatter code, I added

function CompanyUnLink(cellValue, options) {
    return $(cellValue).text();
}

and changed the colModel of the CompanyName row to

{ name: 'CompanyName', label: 'Company Name', search: true, formatter: CompanyLink, unformat: CompanyUnLink },

But the unformat routine passes a cellValue that is not formatted with the anchor.

I changed the unformat to

function CompanyUnLink(cellValue, options) {
    // weird, the unformat actually passes in the raw data, and not the decorated one
    return cellValue;
}

and it works. But it seems wrong to me. Is there a better or correct way to do this?

Here is a small example of complete code:

<table id="datalist"></table> 
<script type="text/javascript">
function CompanyLink(cellValue, options, rowdata, action) {
    return '<a href="CompanyProfile.aspx?CompanyId=' + rowdata.CompanyID + '">' + rowdata.CompanyName + '</a>';
}

function CompanyUnLink(cellValue, options, rowdata, action) {
    // weird, the unformat actually passes in the raw data, and not the decorated one
    return cellValue;
}


$("#datalist").jqGrid({
    datatype: 'local',
    colModel: [
                { name: 'CompanyID', label: 'Id', width: 30, align: "right" },
                { name: 'CompanyName', label: 'Company Name', search: true, formatter: CompanyLink },
            ],
    caption: "SubGrid Format Test",
    subGrid: true,
    subGridRowExpanded: function (subgridId, rowId) {
        var dataFromTheRow = $('#datalist').jqGrid('getRowData', rowId);
        var html = '<span style="padding-left:10px">' + dataFromTheRow.CompanyName + ' ' + dataFromTheRow.Info + '</span>';
        $("#" + subgridId).html(html);
    }
});

var mydata = [
        { CompanyID: 1, CompanyName: "Company1", Info: "Info on Company 1" },
        { CompanyID: 2, CompanyName: "Company2", Info: "Info on Company 2" },
        { CompanyID: 3, CompanyName: "Company3", Info: "Info on Company 3" },
        { CompanyID: 4, CompanyName: "Company4", Info: "Info on Company 4" },
    ];

for (var i = 0; i <= mydata.length; i++)
    $("#datalist").jqGrid('addRowData', i + 1, mydata[i]);

</script>

The subGrid row shows the CompanyName decorated with an anchor, i.e. it is not the raw row data.

if you change the colModel to call the unformat routine

    colModel: [
                { name: 'CompanyID', label: 'Id', width: 30, align: "right" },
                { name: 'CompanyName', label: 'Company Name', search: true, formatter: CompanyLink, unformat: CompanyUnLink },
            ],

the text is no longer decorated. But the unformat routine's cellValue is passed in undecorated, which strikes me as wrong.

It's important to know some details about *how* you use jqGrid. Do you fill main grid per Ajax (so you use `datatype: "json"` or `datatype: "xml"`)? If "yes", then do you use `loadonce: true` option? Do you use `autoencode: true` option? Do you want to fill the data of subgrid *together* with the data of main grid and just display the details later when the user click on "+" icon of subgrid? — Oleg, Apr 17 '13 at 14:41
Man, you're fast! I fill the main grid with Ajax, datatype: "json", and loadonce and autoencode are not set (so false?). The subGridRowExpanded routine is simply pulling data from its associated row, so it is not a "subGrid" in the standard sense of the word. (so it is pulled "together", I suppose). — user1689571, Apr 17 '13 at 14:49
Look at [the answer](http://stackoverflow.com/a/14205263/315935). Probably it do what you need? One don't need to save data in hidden columns. Instead of that one can save all data for all subgrids as objects. One can post the subgrid information inside of `userdata` part of the server response, but one can move some part of the server response in `userdata` dynamically inside of `beforeProcessing` like I shows in my answer. — Oleg, Apr 17 '13 at 14:56
I updated my question with a working example. I think my original post was over complicating the question, as it has nothing to do with ajax, etc. — user1689571, Apr 17 '13 at 15:50

Unformatted Row Data in jqGrid

0 Answers0