StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The code of master/details scenario looks like following:</p> <ol> <li>First of all one use <code>datatype: "local"</code> initially for the second (details) grid. As the result the details grid stay empty till no rows in the first (master) grid is selected. No request to the <code>url</code> of the second (details) grid will be made initially.</li> <li>If the first (master) grid will be reloaded (after the click on "Reload Grid" button of <code>navGrid</code>) the data of the second grid must be removed. One can reset optionally <code>datatype</code> to <code>"local"</code> value too.</li> <li>One can use <code>postData</code> with properties defined as function to append parameters to the URL if one use HTTP GET operation. See <a href="https://stackoverflow.com/a/2928819/315935">the answer</a> for details. It allows to implement dynamical values of the parameters in mostly natural way. Additionally the values of parameters will be automatically encoded using <a href="http://www.w3schools.com/jsref/jsref_encodeuricomponent.asp" rel="nofollow noreferrer">encodeURIComponent</a> and you will have correct URL.</li> <li>It's frequently a problem, that details grid (the second grid) can use the same rowids as the master grid (the first grid). To prevent the problem with id duplicates I recommend to use <code>idPrefix</code> at least in one from the grids. For example you can use <code>idPrefix: "d_"</code> for the details grid.</li> <li>Because you set explicitly <code>datatype</code> to <code>"json"</code> before reloading of data from the server you can safe use <code>loadonce: true</code> for the second (details) grid. After the loading the data from the server <code>datatype</code> will be automatically set to <code>"local"</code>, but you will have at the moment the data which corresponds selected row of the master grid.</li> </ol> <p>The main schema of the code could be the following</p> <pre><code>var $master = $("#grid1"), $details = ("#grid2"); $master.jqGrid({ colModel: [ ... { name: "PctIndCode", ... }, { name: "PctIndNum", ... } ], onSelectRow: function (rowid) { // set datatype to "json" and reload the grid. $details.jqGrid("setGridParam", { datatype: "json" }) .triggerHandler("reloadGrid", [{current: true, page: 1}]); }, loadComplete: function () { var selRowId = $(this).jqGrid("getGridParam", "selrow"); if (selrow === null) { // no row selected after reloading of the master grid $details.jqGrid("setGridParam", { datatype: "local" }) .triggerHandler("reloadGrid", [{page: 1}]); } }, toppager: true, gridview: true }); $master.jqGrid("navGrid", "#grid1_toppager", { add: false, edit: false, del: false, search: false, refreshstate: "current"}); $details.jqGrid({ datatype: "local", idPrefix: "d_", // to be sure that no id duplicates with master grid exist url: "GetLetterInformationHandler.ashx", postData: { CurrentUser: 1157, TabName: "relatedLetters", IndCode: function () { var selRowId = $master.jqGrid("getGridParam", "selrow"); return selRowId === null ? "" : $master.jqGrid("getCell", selRowId, "PctIndCode"); }, IndSerial: function () { var selRowId = $master.jqGrid("getGridParam", "selrow"); return selRowId === null ? "" : $master.jqGrid("getCell", selRowId, "PctIndNum"); } } ... ); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload