Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
Bug when using grid as subgrid and editrow
02/06/2014
15:29
Avatar
bennison
New Member
Members
Forum Posts: 2
Member Since:
02/06/2014
sp_UserOfflineSmall Offline

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();
            }
        }
    );

02/06/2014
17:02
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

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.

03/06/2014
17:56
Avatar
bennison
New Member
Members
Forum Posts: 2
Member Since:
02/06/2014
sp_UserOfflineSmall Offline

Thanks, worked as expected.  Didn't find that when I looked for a solution.

Forum Timezone: Europe/Sofia

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.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information