javascript - How to get the particular cell value in JQgrid

Question

I have written a JQGrid which was working fine but I need to fill the sub grid based on the selected row of main grid. How can I get the selected row cell value to pass in the url of subgrid.

columns in the main grid ---- Id,Firstname,Lastname,Gender.

I need to get selected row of "Id" value.

Here is my script


 $(document).ready(function () {


            jQuery("#EmpTable").jqGrid({

                datatype: 'json',
                url: "Default1.aspx?x=getGridData",
                mtype: 'POST',
                ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                serializeGridData: function (postData) {
                    return JSON.stringify(postData);
                },
                jsonReader: { repeatitems: false, root: "rows", page: "page", total: "total", records: "records" },


                colNames: ['PID', 'First Name', 'Last Name', 'Gender'],
                colModel: [
                    { name: 'PID', width: 60, align: "center", hidden: true, searchtype: "integer", editable: true },
                    { name: 'FirstName', width: 180, sortable: true, hidden: false, editable: true, sorttype: 'string', searchoptions: { sopt: ['eq', 'bw']} },
                    { name: 'LastName', width: 180, sortable: false, hidden: false, editable: true },
                    { name: 'Gender', width: 180, sortable: false, hidden: false, editable: true, cellEdit: true, edittype: "select", formater: 'select', editrules: { required: true, edithidden: true }, editoptions: { value: getAllSelectOptions()}}],
                loadonce: true,
                pager: jQuery('#EmpPager'),
                rowNum: 5,
                rowList: [5, 10, 20, 50],
                viewrecords: true,
                sortname: 'PID',
                sortorder: "asc",
                height: "100%",
                editurl: 'Default1.aspx?x=EditRow',
                subGrid: true,
                // subGridUrl: 'Default1.aspx?x=bindsubgrid',
                subGridRowExpanded: function (subgrid_id, row_id) {

                   // var celValue = jQuery('#EmpTable').jqGrid('getCell', rowId, 'PID');

                    var subgrid_table_id, pager_id;
                    subgrid_table_id = subgrid_id + "_t";
                    pager_id = "p_" + subgrid_table_id;
                    $("#" + subgrid_id).html("");
                    jQuery("#" + subgrid_table_id).jqGrid({
                        url: "Default1.aspx?x=bindsubgrid&PID=" + row_id + "",
                        datatype: "json",
                        mtype: 'POST',
                        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                        serializeGridData: function (postData) {
                            return JSON.stringify(postData);
                        },
                        jsonReader: { repeatitems: false, root: "rows", page: "page", total: "total", records: "records" },

                        colNames: ['PID', 'First Name', 'Last Name', 'Gender'],
                        colModel: [
                    { name: 'PID', width: 60, align: "center", hidden: true, searchtype: "integer", editable: true },
                    { name: 'FirstName', width: 180, sortable: true, hidden: false, editable: true, sorttype: 'string', searchoptions: { sopt: ['eq', 'bw']} },
                    { name: 'LastName', width: 180, sortable: false, hidden: false, editable: true },
                    { name: 'Gender', width: 180, sortable: false, hidden: false, editable: true, cellEdit: true, edittype: "select", formater: 'select', editrules: { required: true, edithidden: true }, editoptions: { value: getAllSelectOptions()}}],
                        loadonce: true,
                        rowNum: 5,
                        rowList: [5, 10, 20, 50],
                        pager: pager_id,
                        sortname: 'PID',
                        sortorder: "asc",
                        height: '100%'
                    });
                    jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: false, add: false, del: false })
                }

            })

Please help to find the cell value.

Thanks purna

Oleg Oleg · Accepted Answer · 2014-05-31T11:23:28

If 'PID' column contains unique value which can be used as the rowid then you should add key: true in the definition of the 'PID' column in colModel. jqGrid will assign id attribute of <tr> elements (the rows of the grid) to the value from 'PID' column. After that row_id parameter of subGridRowExpanded will contain the value which you need and you will don't need to make any additional getCell call.

Additional remark: I strictly recommend you to use idPrefix parameter for subgrids and probably for the grids. In the case jqGrid will use the value of id attribute which have the specified prefix. If will allow to solve conflicts (id duplicates in HTML page). Currently you can have the same rowids for the rows of subgrids and to the rows of the main grid. See here more my old answers on the subject.

javascript - How to get the particular cell value in JQgrid

1 Answers