jqGrid setting multiselect checkbox id and name to a different value

Question

I've just added free jqGrid to my ASP.NET MVC web application. Whist it is working great for the most part, I would like to set the values for "id" and "name" attributes on the multiselect checkboxes to an Id column value from a different column in the table?

Instead the checkboxes are set as follows:

<input type="checkbox" id="jqg_list2_jqg30" class="cbox" name="jqg_list2_jqg30" aria-checked="false">

How do I replace the jqg_list2_jqg30?

I've been following this demo where the id and name attributes on the checkboxes are set correctly, but I can't see what I am doing differently - http://www.trirand.com/blog/jqgrid/jqgrid.html

This is the logic for jqGrid

$("#list2").jqGrid({
        url: 'https://localhost:44319/Package/GetPackages/2',
        datatype: "json",
        contentType: "application/json; charset-utf-8",
        mtype: 'GET',
        colNames: ['Id', 'Name', 'Description'],
        colModel: [
            { name: 'Id', index: 'Id', width: 55, sorttype: "int" },
            { name: 'Name', index: 'Name', width: 90, searchoptions: { "sopt": ["bw", "eq"] } },
            { name: 'Description', index: 'Description', width: 90 }                
        ],
        rowNum: 25,
        rowList: [25, 50],
        pager: '#pager2',
        toppager: true,
        sortname: 'Id',
        viewrecords: true,
        height: "auto",
        sortorder: "asc",
        multiPageSelection: true,
        multiselect: true,
        selarrrow: [],
        caption: "JSON Example",
        loadonce: true,
        jsonReader: { repeatitems: false }
    });
    jQuery("#list2").jqGrid('navGrid', '#pager2',
        { edit: false, add: false, del: false, search: true, view: false, refresh: true });
    jQuery("#m1").click(function () {
        var s;
        s = jQuery("#list2").jqGrid('getGridParam', 'selarrrow');
        alert(s);
    });

I know I could write some custom logic to do this but I don't think this is required as the example above shows and is something that should work out of the box?

Thanks in advance.

Answer 1

I think there are some common misunderstandings which follow your question. I suppose that you get the ids of selected elements by using jQuery("#list2").jqGrid('getGridParam', 'selarrrow') and then you need to get detailed information about the selected items: "id" and "name".

The first problem is the rowid of your grid. You don't included any test data returned from url: 'https://localhost:44319/Package/GetPackages/2', but I can guess that it's array of items like {"Id": 123, "Name": "Some name", "Description": "Some description"}, where the value of Id come from the database and all the values are unique. The internal organization of jqGrid require that every row of the grid (every <tr> element of the HTML table with the main data) has id attribute with an unique value. One names the value of id attribute as "rowid". By default jqGrid examines the input data for id property and uses the values as rowid. If you use Id instead of id then you can add jsonReader: { id: "Id" } to fix the problem and to inform jqGrid to use it as the input of the rowids. Alternatively you can configure Newtonsoft.Json settings of your ASP.NET MVC application to assign ContractResolver = new CamelCasePropertyNamesContractResolver();. The exact place of the assignment in the code depends on the version of ASP.NET MVC, which you use. The answer shows where you can assign the configuration settings in ASP.NET Core. I personally use such settings because I try to follow the standard name conversions of C# and JavaScript.

One more option which you have is adding key: true to the column Id. It will do almost the same as jsonReader: { id: "Id" }.

If you have the rowid (or the array of rowids by jQuery("#list2").jqGrid('getGridParam', 'selarrrow')) then you can easy get the value from any column or the value of any properties of the corresponding data item. If you use loadonce: true then the items of the data returned from the server will be saved locally in data parameter, like in the case of usage datatype: "local". You can easy get the data item using getLocalRow method. You can change the code

jQuery("#m1").click(function () {
    var s;
    s = jQuery("#list2").jqGrid('getGridParam', 'selarrrow');
    alert(s);
});

to

jQuery("#m1").click(function () {
    var $grid = jQuery("#list2"), i, item,
        ids = $grid.jqGrid("getGridParam", "selarrrow");

    for (i = 0; i < ids.length; i++) {
        item = $grid.jqGrid("getLocalRow", ids[i]);
        alert("rowid=" + ids[i] +
            "\nId=" + item.Id +
            "\nName=" + item.Name +
            "\nDescription=" + item.Description);
    }
});

By the way, I recommend you to remove unneeded index properties from all columns (from colModel) and remove some options of jqGrid with default values (mtype: 'GET', height: "auto", sortorder: "asc", selarrrow: []). I recommend you to remove empty div <div id="pager2"></div> from your HTML page and to use pager: true instead of pager: '#pager2'. Free jqGrid will generate the div for the page in the same way like for the toppager (see toppager: true). It simplifies the code. You can get the id selector of generated pager (if you need) using jQuery("#list2").jqGrid('getGridParam', 'pager'), but one don't need it in the most cases. Instead of using

jQuery("#list2").jqGrid('navGrid', '#pager2', {...});

you can use just

jQuery("#list2").jqGrid('navGrid', {...});

which will add navigator buttons to all pages of the grid.