I have just starting working with this grid and am planning on having the grid bind to a JSON datasource that is periodically updated via websockets. For now I am just randomly updating things on a timer to test out the grid. I notice that after i call
$('#grid').igGridUpdating('updateRow', data[0].Name, data[0]);
the Grouping/Filtering/Sorting is not updated to reflect the changes. The grid cell is updated correctly. I have tried autocommit: true and and false(handling data dirty) but neither seems to work. Is there any way to force these to update after a change is made?
Hello Millage,
Were you able to resolve the issue?
Please let us know if you have any further questions regarding this matter.
Hey Margin, Thanks for this, i will give it a try. As far as the updating with paging, I am using 13.2 and it still does not work. It seems the updateRow fails if the row you are trying to update is not on the current page.
Hello John,
John Millage said:I have almost everything working except i need to store off the expanded state of the group by records. I can't seem to figure out how to get these values, and then reset them. Can you give me an example of how this is done?
We don't have public APIs for expand/collapse the grouped rows. The solution which I made is based on saving the expanded group rows text and then use it to locate the same groups after the dataBind.
Here is the example code which works only for the first level of grouped rows, but can easily be modified to work on multiple levels:
var groupedRows = [];function saveGroupByState() { var groupTitle; groupedRows = []; // iterate on the expanded DOM TRs $("#grid1>tbody>tr[data-state='expanded']").each(function(ix, el) { // save the group row text up to the first "(" groupTitle = $(el).find("td:eq(1)").text(); groupedRows.push(groupTitle.substring(0, groupTitle.indexOf("("))); });}
function restoreGroupByState() { var tr, i; for (i = 0; i < groupedRows.length; i++) { // find a group row which contains the saved text tr = $("#grid1>tbody>tr[data-grouprow='true']:contains('" + groupedRows[i] + "')"); // toggle its state tr.find("span.ui-iggrid-expandbutton").mousedown(); }}
P.S.: In our latest SR (13.1.20131.2407, 13.2.20132.2157) the igGridUpdating.updateRow should work with Paging.
Hope this helps,Martin PavlovInfragistics, Inc.
Ok, after some digging around i figured out that you cannot use the updateRow api with paging and must call updateRow directly on the internal datasource. Now I am able to call dataBind and am working on restoring the Sorting/Grouping/Filtering/Paging settings. I have almost everything working except i need to store off the expanded state of the group by records. I can't seem to figure out how to get these values, and then reset them. Can you give me an example of how this is done?
Hello Martin, I should have been more descriptive. The grid does not clear right away, It only clears once i try to do something like add a group by column or re-arrange the columns. Then it clears and I will only see new rows that are added after the change.
Here is my grid config
$("#grid").igGrid({ primaryKey: "oid", width: "100%", height: "100%", autoCommit: true, autoGenerateColumns: false, dataSource: data, //JSON Array defined above columns: [ { headerText: "Order ID", key: "oid", dataType: "number" }, { headerText: "Instrument", key: "inst", dataType: "string" }, { headerText: "Desk", key: "desk", dataType: "number" }, { headerText: "Strat", key: "strat", dataType: "number" }, { headerText: "Side", key: "side", dataType: "string" }, { headerText: "Status", key: "status", dataType: "string" }, { headerText: "Qty", key: "qty", dataType: "number" }, { headerText: "Price", key: "px", dataType: "number" }, { headerText: "Wrk Qty", key: "wrkQty", dataType: "number" }, { headerText: "Exec Qty", key: "execQty", dataType: "number" } ], features: [ { name: 'Updating', enableAddRow: false, enableDeleteRow: false, editMode: null }, { name: "Resizing", deferredResizing: false, allowDoubleClickToResize: true }, { name: "GroupBy", type: "local", emptyGroupByAreaContent: "Group By" }, { name: "Hiding" }, { name: "Selection", mode: "row", multipleSelection: false, activation: true }, { name: "Sorting", type: "local" }, { name: "Filtering", allowFiltering: true, caseSensitive: false, }, { name: "ColumnMoving", mode: "immediate" }, { name : 'Paging', type: "local", pageSize: 100, pageSizeList: [10, 20, 50, 100, 1000, 5000] } ] });
Also when am moving a column I see this error come through
Uncaught Error: Grid has pending transactions which may affect rendering of data. To prevent exception, application may enable "autoCommit" option of igGrid, or it should process "dataDirty" event of igGridUpdating and return false. While processing that event, application also may do "commit()" data in igGrid.
but as you can see above, autoCommit is enabled. Not sure what is wrong.