Databases
StackOverflow2013
Postsdbo
POjqGrid with local sorted data, how to properly add, change, delete rows manually
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjqGrid with local sorted data, how to properly add, change, delete rows manually
    text
    copied!<p>I am new to jqGrid, but am learning fast... </p> <p>I am using jqGrid with local data. It is showing the state of certain objects, and they are being changed in realtime. I receive state changes via a comet based API, and these changes require me to add/change/delete rows in the table. The data needs to remain sorted by a hidden "sortorder" column. That makes it easier, I think, having a static sort order. </p> <p>So I am not using the "data" parameter, I don't "load" any data, I add the rows one at a time.</p> <p>I'm thinking to do each insert, I could either resort the rows after each insert, or better yet iterate through the items in the table's data until I'm at the end or find one greater (by this sortorder value) than the one I am adding. Then add the new one right before this row. At the present time I'm adding them all at row 1, each object like this:</p> <pre><code> jQuery("#mygrid").jqGrid('addRowData',1, obj); </code></pre> <p>So I see them, they look great, but they are not in the proper order yet.</p> <p>Deleting is (I think) pretty easy. I haven't gotten there yet.</p> <p>What about changes, though? A change in the data could include a change in the "sortorder" value, so I would want the data resorted after each change. I believe I could define this hidden column as the sort column, and when data changes, change the underlying data. Is there a simple way to have the grid "reorder" the rows it has? I tried $('#mygrid').trigger("reloadGrid") but that didn't resort anything... after loading the initial data with the 'addRowData' call above, but it had no effect. The data remained the same... </p> <p>Am I on the right track? Is there a sample out there programmatically adding rows, changing rows, deleting rows, using the grid really just to display the current sorted state of things?</p> <p>Here is my grid definition which I create in $(document).ready()</p> <p>The html: &lt;table id='mygrid'&gt;&lt;/table&gt;</p> <pre><code> jQuery("#mygrid").jqGrid({ datatype: "local", loadonce: true, scroll:1, height: "auto", width: '100%', colNames:['A','B', 'C', 'D', 'SortKey'], colModel:[ {name:'a',index:'a'}, {name:'b',index:'b'}, {name:'c',index:'c'}, {name:'d',index:'d'}, {name:'sortordering',index:'sortordering', hidden:true} ], rowNum:200, sortname: 'sortordering', sortorder: 'asc', shrinkToFit: true, autowidth: true, viewrecords: true, multiselect: false, imgpath: "lib/basic/images", caption: "Testing 123" }); </code></pre> <p>The grid looks great with the data I've added, I just need to sort it and manage the state changes now...</p> <p>Thanks for any advice!</p> <p>EDIT #1: I've been busy trying things out and learning what's best. Here's what I know so far:</p> <p>1) $('#mygrid').trigger("reloadGrid") is not for "loadonce" / "local" data. It is for getting/refreshing the data from the host, if that's what you are doing. </p> <p>2) The only way I've successfully resorted after any changes is by calling jQuery("#mygrid").jqGrid('sortGrid',"sortordering",false); BUT, I have to call it twice :-( because each call to sort TOGGLES the direction (ascending or descending) as if I clicked the column. No way to specify direction in the 'sortGrid' call - should be an additional parameter in my opinion...</p> <p>3) for changing data, I need to use jQuery("#mygrid").jqGrid('setRowData',...); and probably resort after that</p> <p>4) for deleting data I need to use jQuery("#mygrid").jqGrid('delRowData',...); </p> <p>My next task is to figure out the correct way to find the rowID of the row I want to change, hopefully without iterating through all of them but I will do that if I have to...</p> <p>Edit #2: I now understand the importance of rowID, that helps a lot! As I explain here, you can specify a column value to act as the rowID value as well (it better be unique!) and this makes it so easy to reference that row later... So, when new information arrives and you need to either edit (setRowData) or delete (delRowData), pass the value of this column as the rowID parameter of setRowData or delRowData, then the entire object (as the new data) and you are all set. If you don't want to see this "key" in the grid, simply make it hidden. To specify it this column as hidden and as the rowID in your colModel specification (change primarykey to whatever the attribute name is in your data):</p> <pre><code> {name:'primarykey',index:'primarykey', key: true, hidden:true} </code></pre> <p>As an aside - In my example above, I tried yesterday using the "sortordering" column as the key, but while it is always unique, it can actually change over time, so it does NOT make a good candidate for the key: true attribute. </p>
 

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