title: jqGrid | add-edit-delet rows of related grid
body: <p>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 !<br>
  but the problem is 
   1- i don't have id of selected row in the first grid<br>
   2- i don't know how to send this id to server by jqGrid  </p>
  
  <p><img src="https://i.stack.imgur.com/33H8q.png" alt="my project&#39;s index page"></p>
  
  <p>index.html:  </p>
  
  <pre><code>{% load static %}
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Index Page&lt;/title&gt;
      &lt;!-- external scripts --&gt;
  
      &lt;!-- jQuery &amp; Bootstrap --&gt;
      &lt;script type="text/javascript" src="{% static "js/jquery.js" %}"/&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="{% static "js/jquery.jqGrid.min.js" %}"/&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" media="all" href="{% static "css/bootstrap.min.css?id=1" %}"/&gt;
      &lt;script type="text/javascript" src="{% static "js/bootstrap.min.js" %}"/&gt;&lt;/script&gt;
      &lt;!-- jQuery &amp; Bootstrap --&gt;
  
      &lt;!-- jqGrid --&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen" href="{% static "css/ui.jqgrid.css" %}" /&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen" href="{% static "css/ui-lightness/jquery-ui.min.css" %}" /&gt;
      &lt;script type="text/javascript" src="{% static "js/grid.locale-en.js" %}"/&gt;&lt;/script&gt;
      &lt;!-- jqGrid --&gt;
  
      &lt;!-- own implemented scripts --&gt;
      &lt;script type="text/javascript" src="{% static "js/script.js" %}"/&gt;&lt;/script&gt;  
      &lt;!-- own implemented scripts --&gt;
  
      &lt;!-- external scripts--&gt;
  
      &lt;script type="text/javascript"&gt;
      $(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') &gt;0 )
                      {
  
                          jQuery("#list_d").jqGrid('setGridParam',{url:"getpricelist?q=1&amp;id="+ids,page:1}).trigger('reloadGrid');
  
                      }
                  } else {
                      jQuery("#list_d").jqGrid('setGridParam',{url:"getpricelist?q=1&amp;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&amp;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')
          }
      }
  
  
  
      );
  
          }); 
  
      &lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;table id="list"&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
          &lt;div id="pager"&gt;&lt;/div&gt; 
  
          &lt;table id="list_d"&gt;&lt;/table&gt;
          &lt;div id="pager_d"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>