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

score 3 · Accepted Answer · edited May 23 '17 at 11:56

3

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.

edited May 23 '17 at 11:56

Community

1
1

answered May 31 '14 at 11:23

Oleg

220,925
34
403
798

thanks oleg... I have recently asked one question regarding search operation in jqgrid I didn't get answer from any one. I have specified you in the comment but I didn't get the replay from u also... Finally I got the answer after investigating. Thank u once again for giving valuable suggestion.... Please send me your contact mail Id to my mail purna.newmek@gmail.com If i have any query I will send directly to your mail.... – Purna May 31 '14 at 12:07
@Purna: You are welcome! If you write comment with `@Oleg` on *new* question where I don't wrote any answer then I'll get no notification. You should write comment to one of my previous answers (like this one). You can find my email at the end of [my profile](http://stackoverflow.com/users/315935/oleg), but I don't like make free support of everyone via email. If I write an answer on stackoverflow it can help *other readers*. The email is private and it helps only one person. So please send me emails for commercial suggestions only. – Oleg May 31 '14 at 15:52
Is it possible to enable the add/edit buttons of pager in code behind. If it possible how can I do it using C# as code behind. – Purna Jun 02 '14 at 05:38
@Purna: Yes you can. One can do this in JavaScript code. See [the answer](http://stackoverflow.com/a/5376355/315935) and [this one](http://stackoverflow.com/a/7057838/315935) which demonstrates what one can do. – Oleg Jun 02 '14 at 07:27
I need to enable/disable based on the count of regards in Jq sub grid. If the count is >0 then enable the edit,delete and view otherwise enable only add. – Purna Jun 02 '14 at 10:59
@Purna: Edit/Delete/View buttons of navigator bar are related to the selected row of the grid (or subgrid depend on where you create navigation bar). So you can enable/disable/hide/show the buttons inside of `onSelectRow`/`beforeSelectRow` callback in the way which I described in the referenced answers. – Oleg Jun 02 '14 at 11:39
Hi, I have created a custom button for edit like http://trirand.com/blog/jqgrid/jqgrid.html in that go to the Row editing and then Click Custom Edit . If i click the edit button I need to open the my View(which consist of all the fields design present in the Grid) and fill the clicked row values into that view.How can I achieve this one. – Purna Jun 04 '14 at 08:32
@Purna: jqGrid use *dynamical* data for filling the grid and for editing per default. So you need use *empty* `` in the view as the input data. In the same way you don't need to implement any editing view. jqGrid will fill the editing form *dynamically* and display it on *the same* page. If you follow the default implementation you will need to implement just controller actions in your code and no views. If you do need to create your *custom view* you can use `addfunc`, `editfunc` and `delfunc`: see [here](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator#parameters)
– Oleg Jun 04 '14 at 08:40
@Purna: Inside of `editfunc` and `delfunc` you can use `var rowid = $(this).jqGrid("getGridParam", "selrow");` to get `rowid` - the id of selected row. You can use `var rowData = $(this).jqGrid("getRowData", rowid);` to get the data of selected row. Then you can make Ajax request to the server with the corresponding parameter for example. – Oleg Jun 04 '14 at 08:44
My requirement if I click the edit button the grid has to be disappear and open the view and it has to fill the edited column values. Is it possible to do like this. Can give me demo example for this if it possible – Purna Jun 04 '14 at 08:53
@Purna: Just assign `window.location.href` to new URL which you want. You can do this inside of `editfunc` on click on custom button which you add by `navButtonAdd` in navigator bar (see [here](http://stackoverflow.com/a/16559769/315935)). – Oleg Jun 04 '14 at 09:05
The edit button present in every row of the grid then also it will work.If I add the url in navbar. – Purna Jun 04 '14 at 09:15
@Purna: I can repeat that you need assign `window.location.href`, but *where* (in which part of your code) you should do this depends on the implementation details. So you should better post the code instead of description what you do. – Oleg Jun 04 '14 at 09:24

How to get the particular cell value in JQgrid

1 Answers1