jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

Master/Detail - onclickSubmit function is not been reloaded

Tags: onclickSubmit master detail reload

02/08/2013
11:36

camminati

New Member

Members

Forum Posts: 2

Member Since:
02/08/2013

Offline

Hi,

I have a Master/Detail view in a page with two tables #grid and #grid_d. The table #grid_d shows the detail of the selected element in #grid. This is done rendering #grid_d in #grid.onSelectRow(). All info is loaded from a rest service.

The url to get #grid is /developers/ and the url to get #grid_d is /developer/DEV_ID/skills/. Hence when editing a detail row, the update url must be /developers/DEV_ID/skills/SKILL_ID.

In orther to do this, I get the current row_id in #grid.onSelectRow() and create a define function in #grid_d.onclickSubmit() which finaly puts both ids in the url together.

However, this works exactly only the first time, when #grid_d.onclickSubmit() is created first. Afterwards, all calls to #grid_d.onclickSubmit() will have the DEV_ID (row_id) from the first call (whatever you pick first). The SKILL_ID is correct.

I think there is a bug in reseting the function when the #grid_d is rendered for the second time, or is it a problem with the closure. If so, how should I be passing the DEV_ID instead?

In the code below, DEV_ID is the id from the #grid model, and SKILL_ID is the topic.id from the #grid_d model.I used jquery-1.10.2 and 1.9.1, jqGrid 4.4.5 and jqGrid 4.5.2 .. all the same.

/*
* @camminati
* developers_bug1.js
*/

$(function() {

var skill_options = function(in_url) {
    return {url: in_url,
      datatype: 'json',
      height: 'auto',
      colModel: [
        {name: 'topic.id', label: 'id', width: 60, hidden: false},
        {name: 'topic.name', label: 'Name', width: 100, editable: false},
        {name: 'value', label: 'Qualification', width: 20, editable: true},
        {name: 'topic.description', label: 'Description', width: 200, editable: false},
        {name: 'topic.category', label: 'Category', width: 100, editable: false}
      ],
      pager: '#pager_d',
      caption: 'Skills',
      recreateForm: true,
      reloadAfterSubmit: false
    };
};

var developers_options = {
    url: URL,
    editurl: URL,
    datatype: 'json',
    colModel: [
      {
        name: 'id', label: 'ID',
        width: 200,
        editable: false,
        editoptions: {disabled: true, size: 0}
      },
      {
        name: 'email',
        label: 'email',
        width: 300,
        editable: true,
        editoptions: {disabled: false, size: 0}
      }

    ],
    caption: 'Developers',
    pager: '#pager',
    height: 'auto',
    onSelectRow: function(row_id) {
      console.log('onSelectRow: function(row_id)', row_id);
      $("#grid_d").jqGrid('setGridParam', {url: 'rest/developer/' + row_id + '/skills'});
      $('#grid_d').jqGrid(skill_options('rest/developer/' + row_id + '/skills'))
              .navGrid('#pager_d',
              {}, //options
              {
                //editOptions
                mtype: "PUT",
                reloadAfterSubmit: true,
                onclickSubmit: function(params, postdata) {
                  var details_rowdata = jQuery('#grid_d').getRowData();
                  var gridId = postdata['grid_d_id'];
                  console.log('skill_editOptions onclickSubmit id->', row_id);
                  params.url = 'rest/developer/' + row_id + '/skills/' + details_rowdata[gridId - 1]['topic.id'];
                }
              },
              {}, //addoptions
              {}, //deloprions
              {} // search options
      ).trigger('reloadGrid');
    }
};

$('#grid')
          .jqGrid(developers_options)
          .navGrid('#pager',
          {}, //options
          developer_editOptions,
          developer_addOptions,
          developer_delOptions,
          {} // search options
);

});

And the html:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.10.2.custom.min.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/JavaScript" src="js/jquery-1.10.2.js"></script>
        <script src="js/grid.locale-en.js" type="text/javascript"></script>
        <script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>
        <script src="js/jqGrid_defaults.js" type="text/javascript"></script>
    </head>
    <body>
        <table id="grid"></table> <div id="pager"></div>
        <br/>
        <table id="grid_d"></table><div id="pager_d"></div>
        <script src="js/developers_bug1.js"></script>
    </body>
</html>

06/08/2013
11:50

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

I'm confused with a way you want to achieve this.

The first common error is that you create the grid every time you select a row.

This is wrong. When the grid is created, every call to the code agin will return nothing

$('#grid_d').jqGrid(skill_options('rest/developer/' + row_id + '/skills'))

This will work only once.

In the demo we have a example just look on it.

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.

06/08/2013
12:32

camminati

New Member

Members

Forum Posts: 2

Member Since:
02/08/2013

Offline

Hi and thank you for your answer,

I think I create the details grid exactly as in the example (http://trirand.com/blog/jqgrid.....qgrid.html -> Advanced/Master Detail), only that I call it the first time from the onSelectRow and not from outside. I also checked that way, initializing the details grid empty for the first time, as in the example. Same thing. Cry

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
40 Guest(s)

Currently Browsing this Page:
1 Guest(s)