Forum
15:29
02/06/2014
I have a grid that is defined with columns
colNames:['id', 'Skill', 'Description', 'Tot hours', 'Q1', 'Q2', 'Q3', 'Q4']
Using the subGridRowExpanded-function as in the example Subgrid-as-grid I create a subgrid with a similar column configuration:
colNames: ['Id','Person','State','Comment', 'Tot hours', 'Q1', 'Q2', 'Q3', 'Q4'],
Both the grid and subgrid have inline editing enabled through the ondblClickRow-event.
What happens is that when I double click on a row in the subgrid, both the current grid row and current subgrid row enter into edit mode, if both rows have the same id. The two grids are filled from two different database tables that use a simple integer as an id field. If the id number happens to coincide, both the grid row and subgrid row enter edit mode. If the id numbers differ, it works as expected.
Code below:
    $("#skillNeedGrid").jqGrid({
     url:'',
     datatype: "json",
     mtype: 'GET',
     colNames:['id', 'Skill', 'Description', 'Tot hours', 'Q1', 'Q2', 'Q3', 'Q4'],
     colModel:[
               {name:'id',index:'id', width:55, hidden:true, sortable:false, editable:false, editoptions:{readonly:true,size:10}},
               {name:'skill_id',index:'skill_id', width:200, edittype:'select', editable:true, formatter:'select', editoptions:{value:skill_select_values}},
               {name:'description',index:'description', width: 400, edittype:'text', editable:true, editoptions:{size:40, maxlength:100}},
               {name:'total_hours',index:'total_hours', width:60, edittype:'text', editable:true, editoptions:{size:20}, editrules:{number:true, minValue:0, required:true}},
               {name:'q1_hours',index:'q1_hours', width:60, edittype:'text', editable:true, editoptions:{size:20}, editrules:{number:true, minValue:0, custom:true, custom_func: checkHourSum}},
               {name:'q2_hours',index:'q2_hours', width:60, edittype:'text', editable:true, editoptions:{size:20}, editrules:{number:true, minValue:0, custom:true, custom_func: checkHourSum}},
               {name:'q3_hours',index:'q3_hours', width:60, edittype:'text', editable:true, editoptions:{size:20}, editrules:{number:true, minValue:0, custom:true, custom_func: checkHourSum}},
               {name:'q4_hours',index:'q4_hours', width:60, edittype:'text', editable:true, editoptions:{size:20}, editrules:{number:true, minValue:0, custom:true, custom_func: checkHourSum}}
          ],
     jsonReader : {
        repeatitems:false
     },
     ondblClickRow: function(id) {
       if(id && id!==lastSel){
          jQuery(this).restoreRow(lastSel);
          lastSel=id;
       }
                                            Â
       jQuery(this).jqGrid('editRow', id,
         {
           keys:true,
           mtype:"PUT",
           url:"./skillneed/" + id,
           aftersavefunc: function() {
             $("#skillNeedGrid").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid'); Â
           }
         });     Â
     },
     loadonce: true,
     rowNum:10,
     rowList:[10,20,30],
     pager: '#skillNeedPager',
     pginput: false,
     pgbuttons: true,
     sortname: 'name',
     viewrecords: true,
     sortorder: "asc",
     recreateForm: true,
     height: "100%",
     editurl:"./skillneed",
     serializeRowData: function(postdata) {
       delete postdata["oper"];
       return JSON.stringify(postdata);
     },
     subGrid: true,
     subGridRowExpanded: function(subgrid_id, row_id) {
       var sel_skill = $("#skillNeedGrid").jqGrid('getCell', row_id, 'skill_id');
       var people_select_values = '';
       var subgrid_table_id;
       subgrid_table_id = subgrid_id+"_t";
       jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='subGridPager"+subgrid_id+"'/>");
       jQuery("#"+subgrid_table_id).jqGrid({
         url:$("#skillNeedGrid").jqGrid('getGridParam', 'url') + '/' + row_id + '/assignment',
         datatype: "json",
         colNames: ['Id','Person','State','Comment', 'Tot hours', 'Q1', 'Q2', 'Q3', 'Q4'],
         colModel: [
              {name:'id',index:'id', width:55, hidden:true, sortable:false, editable:false, editoptions:{readonly:true,size:10}},
              {name:'people_id',index:'people_id', width:200, edittype:'select', editable:true, formatter:'select', editoptions:{value:people_select_values}},
              {name:'state_id',index:'state_id', width:100, edittype:'select', editable:true, formatter:'select', editoptions:{value:state_select_values}},
              {name:'comment',index:'comment', width: 200, edittype:'text', editable:true, editoptions:{size:40, maxlength:100}},
              {name:'total_hours',index:'total_hours', width:60, edittype:'text', editable:true, editoptions:{size:20}, editrules:{number:true, minValue:0, required:true}},
              {name:'q1_hours',index:'q1_hours', width:60, edittype:'text', editable:true, editoptions:{size:20}, editrules:{number:true, minValue:0}},
              {name:'q2_hours',index:'q2_hours', width:60, edittype:'text', editable:true, editoptions:{size:20}, editrules:{number:true, minValue:0}},
              {name:'q3_hours',index:'q3_hours', width:60, edittype:'text', editable:true, editoptions:{size:20}, editrules:{number:true, minValue:0}},
              {name:'q4_hours',index:'q4_hours', width:60, edittype:'text', editable:true, editoptions:{size:20}, editrules:{number:true, minValue:0}}
         ],
         jsonReader : {
            repeatitems:false
         },
         ondblClickRow: function(id) {
           if(id && id!==sgLastSel){
              jQuery(this).restoreRow(sgLastSel);
              sgLastSel=id;
           }
           jQuery("#"+subgrid_table_id).jqGrid('editRow', id,
               {
                   keys:true,
                   mtype:"PUT",
                   url:"./peopleassignment/" + id,
                   oneditfunc: function() {
                     $('select[name="state_id"] option[value="2"]').attr('disabled', 'disabled');
                     $('select[name="state_id"] option[value="3"]').attr('disabled', 'disabled');
                   },
                   aftersavefunc: function() {
                       jQuery("#"+subgrid_table_id).jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid'); Â
                   }
               });     Â
         },
         serializeRowData: function(postdata) {
           delete postdata["oper"];
           return JSON.stringify(postdata);
         },
         pager: '#subGridPager' + subgrid_id,
         height: '100%',
         rowNum:20,
         sortname: 'num',
         sortorder: "asc",
         editurl:"./peopleassignment"
       });
       jQuery("#"+subgrid_table_id).jqGrid('navGrid', '#subGridPager' + subgrid_id,
       {
           edit:true, search:false, closeAfterAdd:true, closeAfterEdit:true,
           beforeRefresh: function() {
               jQuery("#"+subgrid_table_id).jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid'); Â
           }
       },
       {
           mtype:"PUT",
           reloadAfterSubmit:true, closeAfterEdit:true, width:700, recreateForm:true,
           onclickSubmit: function (params, postdata) {
               params.url = $(this).jqGrid('getGridParam', 'editurl') + "/" + postdata[this.id + "_id"];
           },
           afterSubmit: function(response) {
             $(this).jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid'); Â
             $("#taskGrid").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
             $("#taskGrid").jqGrid('setGridParam', {selrow:sel_id});
             return [true, ''];
           },
           serializeEditData: function(postdata) {
               delete postdata["oper"];
               return JSON.stringify(postdata);
           },
           afterShowForm: function(form) {
               form.find('#people_id option[value="null"]').attr('disabled', 'disabled');
               form.find('#state_id option[value="2"]').attr('disabled', 'disabled');
               form.find('#state_id option[value="3"]').attr('disabled', 'disabled');
               form.closest('div.ui-jqdialog').center();
           }
       },
       {
           reloadAfterSubmit:true, closeAfterAdd:true, closeAfterEdit:true, width:700, recreateForm:true,
           afterSubmit: function(response) {
             $(this).jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid'); Â
             $("#taskGrid").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
             $("#taskGrid").jqGrid('setGridParam', {selrow:sel_id});
             return [true, ''];
           },
           serializeEditData: function(postdata) {
             delete postdata["oper"];
             postdata["skill_need_id"] = row_id;
             if (postdata["q1_hours"] === "") delete postdata["q1_hours"];
             if (postdata["q2_hours"] === "") delete postdata["q2_hours"];
             if (postdata["q3_hours"] === "") delete postdata["q3_hours"];
             if (postdata["q4_hours"] === "") delete postdata["q4_hours"];
             return JSON.stringify(postdata);
           },
           afterShowForm: function(form) {
               form.find('#people_id option[value="null"]').attr('disabled', 'disabled');
               form.find('#people_id option[value!="null"]:first').attr('selected', 'selected');
               form.find('#state_id option[value="2"]').attr('disabled', 'disabled');
               form.find('#state_id option[value="3"]').attr('disabled', 'disabled');
               form.closest('div.ui-jqdialog').center();
           }
       },
       {  mtype:"DELETE",
           reloadAfterSubmit:true,
           afterSubmit: function(response) {
             $(this).jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid'); Â
             $("#taskGrid").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
             $("#taskGrid").jqGrid('setGridParam', {selrow:sel_id});
             return [true, ''];
           },
           onclickSubmit: function (params, postdata) {
             params.url = $(this).jqGrid('getGridParam', 'editurl') + "/" + postdata;
           },
           afterShowForm: function(form) {
               form.closest('div.ui-jqdialog').center();
           }
       });
     }
   });
   $("#skillNeedGrid").jqGrid('navGrid', '#skillNeedPager',
       {
           edit:true, search:false, closeAfterAdd:true, closeAfterEdit:true,
           beforeRefresh: function() {
               $("#skillNeedGrid").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid'); Â
           }
       },
       {
           mtype:"PUT",
           reloadAfterSubmit:true, closeAfterEdit:true, width:700, recreateForm:true,
           onclickSubmit: function (params, postdata) {
               params.url = $(this).jqGrid('getGridParam', 'editurl') + "/" + postdata[this.id + "_id"];
           },
           afterSubmit: function(response) {
             $("#skillNeedGrid").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid'); Â
             return [true, ''];
           },
           serializeEditData: function(postdata) {
               delete postdata["oper"];
               return JSON.stringify(postdata);
           },
           afterShowForm: function(form) {
               form.closest('div.ui-jqdialog').center();
           }
       },
       {
           reloadAfterSubmit:true, closeAfterAdd:true, closeAfterEdit:true, width:700, recreateForm:true,
           afterSubmit: function(response) {
             $("#skillNeedGrid").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid'); Â
             return [true, ''];
           },
           serializeEditData: function(postdata) {
               delete postdata["oper"];
               postdata["task_id"] = sel_task;
               if (postdata["q1_hours"] === "") delete postdata["q1_hours"];
               if (postdata["q2_hours"] === "") delete postdata["q2_hours"];
               if (postdata["q3_hours"] === "") delete postdata["q3_hours"];
               if (postdata["q4_hours"] === "") delete postdata["q4_hours"];
               console.log(postdata);
               return JSON.stringify(postdata);
           },
           afterShowForm: function(form) {
               form.closest('div.ui-jqdialog').center();
           }
       },
       {  mtype:"DELETE",
           reloadAfterSubmit:true,
           afterSubmit: function(response) {
             $("#skillNeedGrid").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid'); Â
             return [true, ''];
           },
           onclickSubmit: function (params, postdata) {
               params.url = $(this).jqGrid('getGridParam', 'editurl') + "/" + postdata;
           },
           afterShowForm: function(form) {
               form.closest('div.ui-jqdialog').center();
           }
       }
   );
17:02
Moderators
30/10/2007
Hello,
Please refer to the parameter idPrefix in the docs.
This will solve your problem. There are some posts regarding this in this forum.
Kind Regards
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
Most Users Ever Online: 715
Currently Online:
64 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66