jqGrid | add-edit-delet rows of related grid

Question

I have 2 grids , and i the second one is related to first one , i want to add/edit in the second grid and i want to update the first gird's data in database !
but the problem is 1- i don't have id of selected row in the first grid
2- i don't know how to send this id to server by jqGrid

my project's index page

index.html:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index Page</title>
    <!-- external scripts -->

    <!-- jQuery & Bootstrap -->
    <script type="text/javascript" src="{% static "js/jquery.js" %}"/></script>
        <script type="text/javascript" src="{% static "js/jquery.jqGrid.min.js" %}"/></script>
    <link rel="stylesheet" type="text/css" media="all" href="{% static "css/bootstrap.min.css?id=1" %}"/>
    <script type="text/javascript" src="{% static "js/bootstrap.min.js" %}"/></script>
    <!-- jQuery & Bootstrap -->

    <!-- jqGrid -->
    <link rel="stylesheet" type="text/css" media="screen" href="{% static "css/ui.jqgrid.css" %}" />
    <link rel="stylesheet" type="text/css" media="screen" href="{% static "css/ui-lightness/jquery-ui.min.css" %}" />
    <script type="text/javascript" src="{% static "js/grid.locale-en.js" %}"/></script>
    <!-- jqGrid -->

    <!-- own implemented scripts -->
    <script type="text/javascript" src="{% static "js/script.js" %}"/></script>  
    <!-- own implemented scripts -->

    <!-- external scripts-->

    <script type="text/javascript">
    $(function () {
        $("#list").jqGrid({
            url: "http://localhost:8000/getdata",
            datatype: "json",
            mtype: "GET",
            colNames: ["شناسه", "کد","نام", "عنوان" ,"عنوان انگلیسی", "ظرفیت", "ظرفیت اضافه","قیمت روز"],
            colModel: [
                  { name: "id", index:"id", width: 60 , editable:true,editoptions: {readonly: "readonly"}},
            { name: "code", width: 60 , editable:true},
            { name: "name", width: 90 , editable:true},
            { name: "title", width: 90 ,editable:"true", editable:true},
            { name: "english_title", width: 100, align: "left", editable:true },
            { name: "capacity", width: 90, align: "left", editable:true },
            { name: "extra_capacity", width: 90, align: "left", editable:true },
            { name: "today_price", width: 80, align: "left" , editable:true},
            ],
            rowNum:10,
            rowList:[10,20,30],
            pager: '#pager',
            loadonce:true,
            sortname: 'id',
            viewrecords: true,
            sortorder: "desc",
            rownumbers: true,
            rownumWidth: 40,
            gridview: true,
            multiselect: false,
            caption: "اتاق ها",
            onSelectRow: function(ids) {
                if(ids == null) {
                    ids=0;
                    if(jQuery("#list_d").jqGrid('getGridParam','records') >0 )
                    {

                        jQuery("#list_d").jqGrid('setGridParam',{url:"getpricelist?q=1&id="+ids,page:1}).trigger('reloadGrid');

                    }
                } else {
                    jQuery("#list_d").jqGrid('setGridParam',{url:"getpricelist?q=1&id="+ids,page:1}).trigger('reloadGrid');
                jQuery("#list_d").jqGrid('setCaption',"لیست قیمت اتاق شماره : "+ids)
                }
            }
     });
    jQuery("#list").jqGrid('navGrid','#pager',{edit:true,add:true,del:true,search:false},
     /*   {
                    recreateForm: true,
                    beforeShowForm: function ($form) {
                        $form.find(".FormElement[readonly]")
                            .prop("disabled", true)
                            .addClass("ui-state-disabled")
                            .closest(".DataTD")
                            .prev(".CaptionTD")
                            .prop("disabled", true)
                            .addClass("ui-state-disabled")
                    },
        }, */
     //edit options
       { // Edit option (parameters of editGridRow method)
        recreateForm:true,
        reloadAfterSubmit:true,
        closeOnEscape:true,
        savekey: [true,13],
        closeAfterEdit:true,
        url:'/edit',
        ajaxEditOptions: {
            beforeSend: function(jqXHR) {
                var csrf_token = getCookie('csrftoken'); 
                jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
            }

        },
            afterSubmit: function () {
             jQuery("#list").jqGrid("setGridParam", {datatype: 'json'});
             console.log('changed data type');
             return [true];
         },
        editData: {
            csrfmiddlewaretoken: getCookie('csrftoken')
        }
    },
    //add options
    { 
        recreateForm:true,
        reloadAfterSubmit:true,
        closeOnEscape:true,
        savekey: [true,13],
        closeAfterAdd: true,
        url:'/add',
        ajaxEditOptions: {
            beforeSend: function(jqXHR) {
                var csrf_token = getCookie('csrftoken'); 
                jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
            }
        },
            afterSubmit: function () {
             jQuery("#list").jqGrid("setGridParam", {datatype: 'json'});
             console.log('changed data type');
             return [true];
         },
        addData: {
            csrfmiddlewaretoken: getCookie('csrftoken')
        }

    },
    //delete options
    { 
        recreateForm:true,
        reloadAfterSubmit:true,
        closeOnEscape:true,
        savekey: [true,13],
        url:'/delete',
        ajaxDelOptions: {
            beforeSend: function(jqXHR) {
                var csrf_token = getCookie('csrftoken'); 
                jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
            }
        },
        afterSubmit: function () {
             jQuery("#list").jqGrid("setGridParam", {datatype: 'json'});
             console.log('changed data type');
             return [true];
         },
        delData: {
            csrfmiddlewaretoken: getCookie('csrftoken')
        }
    }

    );
  jQuery("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});



/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    jQuery("#list_d").jqGrid({
        height: 100,
    width:345,
        url:'getpricelist?q=1&id=1',
        datatype: "json",
        colNames:['از','تا', 'قیمت'],
        colModel:[

    {name:'from',index:'from', width:100, editable:true},
    {name:'to',index:'to', width:100, editable:true},
    {name:'price',index:'price', width:80, editable:true},
        ],
        rowNum:5,
        rowList:[5,10,20],
        pager: '#pager_d',
        sortname: 'item',
        viewrecords: true,
        sortorder: "asc",
        multiselect: false,
        caption:"لیست قیمت"
    }).navGrid('#pager_d',{add:true,edit:true,del:true},

     //edit options
       { // Edit option (parameters of editGridRow method)
        recreateForm:true,
        reloadAfterSubmit:true,
        closeOnEscape:true,
        savekey: [true,13],
        closeAfterEdit:true,
        url:'/ple',
        ajaxEditOptions: {
            beforeSend: function(jqXHR) {
                var csrf_token = getCookie('csrftoken'); 
                jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
            }

        },
            afterSubmit: function () {
             jQuery("#list").jqGrid("setGridParam", {datatype: 'json'});
             console.log('ple data type');
             return [true];
         },
        editData: {
            csrfmiddlewaretoken: getCookie('csrftoken')
        }
    },
    //add options
    { 
        recreateForm:true,
        reloadAfterSubmit:true,
        closeOnEscape:true,
        savekey: [true,13],
        closeAfterAdd: true,
        url:'/pla',
        ajaxEditOptions: {
            beforeSend: function(jqXHR) {
                var csrf_token = getCookie('csrftoken'); 
                jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
            }
        },
            afterSubmit: function () {
             jQuery("#list").jqGrid("setGridParam", {datatype: 'json'});
             console.log('pla data type');
             return [true];
         },
        editData: {
            csrfmiddlewaretoken: getCookie('csrftoken')
        }

    },
    //delete options
    { 
        recreateForm:true,
        reloadAfterSubmit:true,
        closeOnEscape:true,
        savekey: [true,13],
        url:'/pld',
        ajaxDelOptions: {
            beforeSend: function(jqXHR) {
                var csrf_token = getCookie('csrftoken'); 
                jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
            }
        },
        afterSubmit: function () {
             jQuery("#list").jqGrid("setGridParam", {datatype: 'json'});
             console.log('pld data type');
             return [true];
         },
        delData: {
            csrfmiddlewaretoken: getCookie('csrftoken')
        }
    }



    );

        }); 

    </script>

    </head>
    <body>

        <table id="list"><tr><td></td></tr></table>
        <div id="pager"></div> 

        <table id="list_d"></table>
        <div id="pager_d"></div>
    </body>
</html>

score 2 · Answer 1 · edited May 23 '17 at 12:15

If I correctly understand your question you need to update the grid $("#list") after editing of the grid $("#list_d"). To do this you need just modify the code of afterSubmit of the second grid for both editing (Add/Edit) and Delete. The code of afterSubmit can be about the following

 afterSubmit: function () {
     var $mainGrid = $("#list"),
         pageOfMainGrid = $mainGrid.jqGrid("getGridParam", "page");
     $mainGrid.jqGrid("setGridParam", {datatype: "json"})
         .trigger("reloadGrid", { page: pageOfMainGrid, current: true });
     console.log('pld data type');
     return [true];
 }

See the answer which describes the options of reloadGrid. As the result the first grid will be reloaded with the same page and the currently selected row will be selected if it's possible.

If you need to know the current selected row of the first grid you can get it using $("#list").jqGrid("getGridParam", "selrow").

I would recommend you to use height: "auto" instead of height: 100. It will remove unneeded place on the right side of the grids additionally to better usage of vertical space of the HTML page.

One more remark. You current code contains many duplicates. For example you use 4 times the same Add/Edit options. You can place the following code before the first usage of navGrid:

$.extend(true, $.jgrid.edit, {
    recreateForm: true,
    reloadAfterSubmit: true,
    closeOnEscape: true,
    savekey: [true, 13],
    closeAfterEdit: true,
    closeAfterAdd: true,
    ajaxEditOptions: {
        beforeSend: function(jqXHR) {
            var csrf_token = getCookie('csrftoken'); 
            jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
        }

    },
    afterSubmit: function () {
         jQuery(this).jqGrid("setGridParam", {datatype: 'json'});
         console.log('changed data type');
         return [true];
    },
    editData: {
        csrfmiddlewaretoken: getCookie('csrftoken')
    }
});

$.extend(true, $.jgrid.del, {
    closeOnEscape: true,
    ajaxDelOptions: {
        beforeSend: function(jqXHR) {
            var csrf_token = getCookie('csrftoken'); 
            jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
        }
    },
    afterSubmit: function () {
         jQuery(this).jqGrid("setGridParam", {datatype: 'json'});
         console.log('changed data type');
         return [true];
     }
    delData: {
        csrfmiddlewaretoken: getCookie('csrftoken')
    }
});

After that the code which contains both calls navGrid can be reduced to

jQuery("#list").jqGrid('navGrid', '#pager', {search: false},
    { url: '/edit' }, { url: '/add' }, {url:'/delete'});

var reloadMainGrid = function () {
        var $mainGrid = $("#list"),
            pageOfMainGrid = $mainGrid.jqGrid("getGridParam", "page");
        $mainGrid.jqGrid("setGridParam", {datatype: "json"})
            .trigger("reloadGrid", { page: pageOfMainGrid, current: true });
        console.log('pld data type');
        return [true];
    };

// set new afterSubmit callback for Add/Edit
$.extend(true, $.jgrid.edit, { afterSubmit: reloadMainGrid });

jQuery("#pager_d").jqGrid('navGrid', '#pager', {},
    { url: url:'/ple' }, { url: '/pla' },
    { url: '/delete', afterSubmit: reloadMainGrid });

Such code seems to me shorter and more easy to read and maintain. By the way you can include $.extend(true, $.jgrid.defaults, {...}); before creating of both grids and include common options which you use in both grids (gridview: true, datatype: "json", viewrecords: true, ...). In the way you will reduce the list of options of both grids.

I personally have my personal preferences and have small JavaScript which contains only the line with $.extend(true, $.jgrid...., {...}); with modifications of $.jgrid.defaults, $.jgrid.edit, $.jgrid.del. I include the JavaScript file on all pages where I create jqGrid (directly after grid.locale-en.js and jquery.jqGrid.min.js). In the way the code of all my pages is short and don't contains unneeded duplicates.

no ! i mean when i pass a row of second grid(#list_d) to the server , i also need the ID of related row in first gird(#list) in server side , but i don't know how to access that , because it only posts the colModels to server and there's no colmodel named id in second grid! ! yo got my question? — Iman Mirzadeh, Aug 03 '14 at 06:29
to complete and clarify last comment : i want to have id of clicked row of the first grid , and pass it to the server when i edit the second grid ( since the second grid's rows' details are depended to first grid's clicked row) !! @Oleg — Iman Mirzadeh, Aug 04 '14 at 11:03

score 1 · Accepted Answer · answered Aug 05 '14 at 02:06

the answer is using jqGrid editData(or DelData for deleting options)! as documantion said , we can send additional data in editData option so i have to change the code like this :

editData: {
            csrfmiddlewaretoken: getCookie('csrftoken'),
            additional_data1 : additional_value1,
            additional_data2 : additional_value2,
            // any other key:value you want :)


        }

and in serverside (views.py in Django) :

additional_data1 = request.POST.get('additional_data1')
#and any other key value using this format :  variable_name = request.POST.get('key')

jqGrid | add-edit-delet rows of related grid

2 Answers2