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");  
             }
    });
}

Answer 1

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.