JQGrid: Sort subgrid values based on some key

I have a jqGrid with a subgrid. I want to sort the subgrid so that important details are shown in sorted order inside the subgrid.

Sorted Order: EBFNUM, VERSION & APPLIEDDATETIME

Below is a screen shot enter image description here

Optional: The filter works for elementName, isPresentinXml1 & isPresentinXml2. Is there anyway the same filter can work for name, firstValue & secondValue (Subgrid columns)?

Code for grid

_starHeader="infa9 windowsss";
_header1="infa9_windowss";
 grid = jQuery("#ebfList");
             grid.jqGrid({
                 datastr : compareEBFData,
                 datatype: 'jsonstring',
                 colNames:['EBF','',_starHeader, _header1],
                 colModel:[
                     {name:'elementName',index:'elementName', width:188},
                     {name:'subCategory',index:'subCategory',hidden:true, width:1},
                     {name:isPresentinXml1,index:isPresentinXml1, width:270, align:'center', formatter: patchPresent},
                     {name:isPresentinXml2,index:isPresentinXml2, width:270, align:'center', formatter: patchPresent}
                 ],
                 pager : '#ebfGridpager',
                 rowNum:60,
                 rowList:[60,120,240],
                 scrollOffset:0,
                 height: 'auto',
                 autowidth:true,
                 viewrecords: false,
                 gridview: true,
                 loadonce:true,

                 jsonReader: {
                    repeatitems: false,
                    page: function() { return 1; },
                     root: "response"
                 },
                 subGrid: true,
                 // define the icons in subgrid
                 subGridOptions: {
                     "plusicon"  : "ui-icon-triangle-1-e",
                     "minusicon" : "ui-icon-triangle-1-s",
                     "openicon"  : "ui-icon-arrowreturn-1-e",
                     //expand all rows on load
                     "expandOnLoad" : false
                 },

                 loadComplete: function() {
                     if (this.p.datatype !== 'local') {
                         setTimeout(function () {
                            grid.trigger('reloadGrid');
                        }, 0);
                     } else {
                        $("#compareEBFDiv").show();                         
                     }
                 },

                 subGridRowExpanded: function(subgrid_id, row_id) {
                    var subgrid_table_id, pager_id, iData = -1;
                     subgrid_table_id = subgrid_id+"_t";
                     $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' style='overflow-y:auto' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");

                     $.each(compareEBFData.response,function(i,item){
                         if(item.id === row_id) {
                             iData = i;
                             return false;
                         }

                     });
                     if (iData == -1) {
                         return; // no data for the subgrid
                     }

                     jQuery("#"+subgrid_table_id).jqGrid({
                         datastr : compareEBFData.response[iData],
                         datatype: 'jsonstring',
                         colNames: ['Name','Value1','Value2'],
                         colModel: [
                             {name:"name",index:"name",width:70},
                             {name:firstValue,index:firstValue,width:100},
                             {name:secondValue,index:secondValue,width:100}
                         ],
                         rowNum:10,
                         //pager: pager_id,
                         sortname: 'name',
                         sortorder: "asc",
                         height: 'auto',
                         autowidth:true,
                         jsonReader: {
                             repeatitems: false,
                             //page: function() { return 1; },
                             root: "attribute"
                         }
                     });

                     jQuery("#"+subgrid_table_id).jqGrid('navGrid',{edit:false,add:false,del:false});
                 }
             });

             grid.jqGrid('navGrid', '#ebfGridpager', { search: false, refresh: false });
             grid.jqGrid('navButtonAdd',"#ebfGridpager",{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s',
                onClickButton:function(){
                    grid[0].toggleToolbar();
                } 
             });
             grid.jqGrid('navButtonAdd',"#ebfGridpager",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh',
                onClickButton:function(){
                    grid[0].clearToolbar();
                } 
             });
             grid.jqGrid('filterToolbar',
                    {stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});

Json response

    {
  "response": [
    {
      "id": "1",
      "elementName": "EBF262323",
      "category": "Product",
      "subCategory": "EBFINFO",
      "isEqual": false,
      "isPrasentinXml1": true,
      "isPrasentinXml2": true,
      "isPrasentinXml3": false,
      "attribute": [
        {
          "name": "APPLIEDDATETIME",
          "firstValue": "Mon Sep 05 11:12:32 IST 2011",
          "secondValue": "Mon Sep 05 11:12:32 IST 2011"
        },
        {
          "name": "VERSION",
          "firstValue": "9.1.0",
          "secondValue": "9.1.0"
        },
        {
          "name": "EBFNUM",
          "firstValue": "EBF262323",
          "secondValue": "EBF262323"
        }

      ]
    },
    {
      "id": "2",
      "elementName": "EBF99993",
      "category": "Product",
      "subCategory": "EBFINFO",
      "isEqual": false,
      "isPrasentinXml1": true,
      "isPrasentinXml2": true,
      "isPrasentinXml3": false,
      "attribute": [
        {
          "name": "APPLIEDDATETIME",
          "firstValue": "Mon Sep 09 11:12:32 IST 2012",
          "secondValue": "Mon Sep 09 11:12:32 IST 2012"
        },
        {
          "name": "VERSION",
          "firstValue": "9.1 HF2",
          "secondValue": "9.1 HF2"
        },
        {
          "name": "EBFNUM",
          "firstValue": "EBF99993",
          "secondValue": "EBF99993"
        }
      ]
    }
  ],
  "xls_path": "/files/modifiedServices.xls"
}

UPDATE

I tried something like below code, inside my inner grid, but has no effect

var orderOfEBFSubCategory = [
    "EBFNUM",
    "PRODUCT",
    "VERSION"
];

{name:"name",index:"name",width:70,
                                sorttype: function (value) {
                                    var order = $.inArray(value, orderOfEBFSubCategory);
                                    return order;
                                }},

In general the approach with the usage of sorttype as function is the correct way if you need to implement custom sorting order. The problem is only that you used datatype: 'jsonstring' and datastr in the subgrid. It's important to understand, that the data from datastr will be interpret as already sorted. If you have non-sorted data you should use datatype: 'local' instead. The jsonReader parameter should be removed in the case. So the code of subgrid should be like

jQuery("#" + subgrid_table_id).jqGrid({
    data: compareEBFData.response[iData].attribute,
    datatype: 'local',
    gridview: true,
    idPrefix: 's' + row_id + '_',
    colNames: ['Name', 'Value1', 'Value2'],
    colModel: [
        {name: "name", index: "name", width: 70,
            sorttype: function (value) {
                var order = $.inArray(value, orderOfEBFSubCategory);
                return order;
            }},
        {name: firstValue, index: firstValue, width: 100},
        {name: secondValue, index: secondValue, width: 100}
    ],
    rowNum: 10,
    sortname: 'name',
    sortorder: "asc",
    height: 'auto',
    autowidth: true
});

where

var orderOfEBFSubCategory = [
        "EBFNUM",
        "VERSION",
        "APPLIEDDATETIME"
    ];

See the demo. It can be that your main problem was just to have just sorted items and not custom sorted items. In the case you can remove sorttype function and you will have alphabetic sorted names in case of usage datatype: 'local'.

It's important to mention, that I fixed in your original code one more important problem by adding additional options. First I added gridview: true to improve the performance and the second I added idPrefix: 's' + row_id + '_' option. You code from the demo don't defined any id for the grid rows. So the rows of the main grid has ids: 1, 2, ... The subgrids has also no id defined. So If you would be opened the first and the second subgrids in your original grid you had at least three id duplicates: in main grid and in all subgrids was the rows with the same ids 1, 2, ... The idPrefix can be used to solve the problem. In the fixed grid you can now for example select row in every subgrid and one in the main grid without any conflicts.

Recommended topics

Hot tags