jqGrid Subgrid error with Date field as KEY Parameter + asp.net mvc3

Question

I am using jQGrid with Subgrid feature, My Key column has Date, when I click on "+" subGridRowExpanded is fired and it creates a SubGrid

Code works fine when used other column which has Number as Key Field but it's throwing error when using Date as key field ex it will have the value 03/18/2014

"Microsoft JScript runtime error: Syntax error, unrecognized expression: #grid_3/18/2014" My main grid id is grid

It works fine when I use GMMNumber as Key but fails when I use NCChitDate which is a Date Field with value in Date Format..

Here is my code below :

function LoadNCTRequestGrid() {
    var cols = "";
    var colmodels = "";
    if (!ReqType) {
        cols = ['Date', 'NC Chit Print', '2nd Scan Disposition', '%', "Items Merch'd in Place", 'Items On Request', 'Carton Completed', '%', 'Open Balance (Items On Request Carton Complete)'];
        colmodels = [{ name: 'NCChitDate', index: 'NCChitDate', width: 300, key: true },
                   { name: 'NCChitPrintQty', index: 'NCChitPrintQty', width: 300 },
                   { name: 'SecondScanDisp', index: 'SecondScanDisp', width: 300 },
                   { name: 'PercentageSecondScanDisp', index: 'PercentageSecondScanDisp', width: 180 },
                   { name: 'ItemsMerchandised', index: 'ItemsMerchandised', width: 280 },
                   { name: 'ItemsOnRequest', index: 'ItemsOnRequest', width: 280 },
                   { name: 'CartonCompleted', index: 'CartonCompleted', width: 280 },
                   { name: 'PercentageCartonCompleted', index: 'PercentageCartonCompleted', width: 280 },
                   { name: 'OpenBalance', index: 'OpenBalance', width: 280 }
    ];
    }
    else{
        cols = ['','GMM', 'NC Chit Print', '2nd Scan Disposition', '%', "Items Merch'd in Place", 'Items On Request', 'Carton Completed', '%', 'Open Balance (Items On Request Carton Complete)'];
        colmodels = [
                   { name: 'GMMNumber', index: 'GMMNumber', width: 300, key:true, hidden:true},
                   { name: 'GMMDesc', index: 'GMMDesc', width: 300 },
                   { name: 'NCChitPrintQty', index: 'NCChitPrintQty', width: 300 },
                   { name: 'SecondScanDisp', index: 'SecondScanDisp', width: 300 },
                   { name: 'PercentageSecondScanDisp', index: 'PercentageSecondScanDisp', width: 180 },
                   { name: 'ItemsMerchandised', index: 'ItemsMerchandised', width: 280 },
                   { name: 'ItemsOnRequest', index: 'ItemsOnRequest', width: 280 },
                   { name: 'CartonCompleted', index: 'CartonCompleted', width: 280 },
                   { name: 'PercentageCartonCompleted', index: 'PercentageCartonCompleted', width: 280 },
                   { name: 'OpenBalance', index: 'OpenBalance', width: 280 }
    ];
    }
    $("#grid").jqGrid({
        url: '@Url.Action("GetNCTRequest")',
        mtype: "POST",
        datatype: 'json',
        colNames: cols,
        colModel: colmodels,
        width: 1140,
        height: '100%',
        rowNum: 5000,
        subGrid: true,
        afterInsertRow: function (rowId, aData, rowelem) {
            var theGrid = $(this);
        },
        beforeSelectRow: function (rowid, e) {
            return false;
        },
        loadComplete: function () {
            $("tr.jqgrow:odd").css("background", "#DDDDDC");
            $(".jqgrow:odd").hover(
                    function () {
                        $(this).css("background-color", "#E11A2B");
                    },
                     function (event) { $(this).css("background-color", "#DDDDDC"); }
                );
        },
        subGridRowExpanded: function (subgridDivId, rowId) {
            var subgridTableId = subgridDivId + '_t';

            $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
              var cols = "";
              var colmodels = "";
              if(!ReqType){
              cols = ['GMM', 'DIV', 'Dept', 'Vend', 'UPC', 'NC Chit Print', '2nd Scan Disposition', "Items Merch'd in Place", 'Items On Request', 'Carton Completed', 'Open Balance (Items On Request Carton Complete)', 'Carton ID'];
              colmodels =   [
                   { name: 'GMMDesc', index: 'GMMDesc', width: 300 },
                   { name: 'DivisionDesc', index: 'DivisionDesc', width: 300 },
                   { name: 'DepartmentName', index: 'DepartmentNumber', width: 300 },
                   { name: 'VendorID', index: 'VendorID', width: 100 },
                   { name: 'UPCNumber', index: 'UPCNumber', width: 100 },
                   { name: 'NCChitPrintQty', index: 'NCChitPrintQty', width: 300 },
                   { name: 'SecondScanDisp', index: 'SecondScanDisp', width: 300 },
                   { name: 'ItemsMerchandised', index: 'ItemsMerchandised', width: 280 },
                   { name: 'ItemsOnRequest', index: 'ItemsOnRequest', width: 280 },
                   { name: 'CartonCompleted', index: 'CartonCompleted', width: 280 },
                   { name: 'OpenBalance', index: 'OpenBalance', width: 280 },
                   { name: 'CartonID', index: 'CartonID', width: 100 },
                   { name: 'NCChitDate', index: 'NCChitDate', width: 10, key: true, hidden : true }
                   ]
                }
                else{
                cols = ['Date', 'DIV', 'Dept', 'Vend', 'UPC', 'NC Chit Print', '2nd Scan Disposition', "Items Merch'd in Place", 'Items On Request', 'Carton Completed', 'Open Balance (Items On Request Carton Complete)', 'Carton ID'];
              colmodels =   [
                   { name: 'NCChitDate', index: 'NCChitDate', width: 100},
                   { name: 'DivisionDesc', index: 'DivisionDesc', width: 150 },
                   { name: 'DepartmentName', index: 'DepartmentNumber', width: 200 },
                   { name: 'VendorID', index: 'VendorID', width: 50 },
                   { name: 'UPCNumber', index: 'UPCNumber', width: 100 },
                   { name: 'NCChitPrintQty', index: 'NCChitPrintQty', width: 50 },
                   { name: 'SecondScanDisp', index: 'SecondScanDisp', width: 50 },
                   { name: 'ItemsMerchandised', index: 'ItemsMerchandised', width: 50 },
                   { name: 'ItemsOnRequest', index: 'ItemsOnRequest', width: 100 },
                   { name: 'CartonCompleted', index: 'CartonCompleted', width: 50 },
                   { name: 'OpenBalance', index: 'OpenBalance', width: 50 },
                   { name: 'CartonID', index: 'CartonID', width: 100 }
                   ]
                }
            $("#" + jQuery.jgrid.jqID(subgridTableId)).jqGrid({
                mtype: "POST",
                datatype: 'json',
                 url: encodeURI('@Url.Action("GetnctRequestIndividualDetails")' + '?reqValue=' + rowId),
                colNames: cols,
                colModel: colmodels,
                rowNum: 9999,
                height: '100%'
            });
             $(".ui-icon-carat-1-sw").css("background-image", "none");  
             }
    });
}

which version of jqGrid you use? In which line number of `jquery.jqGrid.src.js` you get the error "unrecognized expression: #grid_3/18/2014". Are you sure that date as the id don't have any duplicates? In any way one uses typically `idPrefix` in all subgrids scenarios. Which input data have the grid and the subgrid? 1-2 rows of input data could be helpful. — Oleg, Mar 19 '14 at 06:13
@Oleg I am using JQgrid-4.5.4, I am getting error at this line when it is trying to create SubGrid -- $("#" + subgridDivId).html("
"); ---- My Parent Grid has only one record and I am passing that Key ID that is 03/19/2014 It works fine If I make Some Number as Key as shown in my code it's getting this issue only when !ReqType is passed with date as KEY field — msbyuva, Mar 19 '14 at 13:49

score 1 · Accepted Answer · edited May 23 '17 at 10:26

You can use $.jgrid.jqID to escape mata-characters:

$("#" + subgridDivId).html("<table id='" + $.jgrid.jqID(subgridTableId) + "'></table>");

Alternatively you can choose just another id value. For example you can generate the id:

var subgridTableId = $.jgrid.randId() + '_t';

The function $.jgrid.randId is very simple (see the 3 lines of code). It generates unique value which can be used as an id attribute.

Additionally I would strictly recommend you to use idPrefix (see here and here). For example idPrefix: "s_" + rowId + "_" value is good for the subgrid. The option gridview: true, autoencode: true is recommended for all grids. The option autowidth: true is practical for subgrids. The answer could be helpful for you too.

I recommend you additionally to update jqGrid to the current version 4.6.0.

jqGrid Subgrid error with Date field as KEY Parameter + asp.net mvc3

1 Answers1