Hello, I am trying to programmatically update the data in my iggrid however, when paging is enabled, it will blow up when it gets to the second page of data. I am using 13.1 however, I also tested with 13.2 and it also dosn't seem to work.
Let me give you a simplified example to better understand. Let's say I have a datasource with 15 rows of data and paging is enabled with the 10 rows per page. So, in this example I would have 2 pages of data, page one with 10 rows and page 2 with the remaining 5 rows.
Let's say the data contains four fields: ID, price, tax, and total. Initially, all of this data is set. However, I have a simple imput on the webpage that a user can enter a new tax amount. This will then fire a jQuery function that will loop through all of the data in the igGrid and change the tax data to the newly entered data and calculate a new total. Some sample code of this function can be seen below. The problem is once I get to the rows that are on page 2, when I try and execute updateRow I get the following error:
Unable to get value of the property 'length': object is null or undefined
The only way I've been able to get around this is by turning off paging and having everything on one page but this isn't very good because there can be hundreds of rows which makes the grid a mile long (A possible unrelated issue is if I enable filtering on this long page of data, I have to use dataView() because the data() will only update up to the first filtered row and will leave the remaining data unchanged).
Am I doing something that isn't supported or am I going about this the wrong way? Any help would be appreciated.
Regards,
Rosco
Function CalcTotal(evt, ui) {
var data = $("#grid1").data("igGrid").dataSource.data(), gridUpdating = $("#grid1").data("igGridUpdating"), row;
for (var i = 0; i < data.length; i++) {
row = data[i];
row.tax = ui.value;
row.total = row.price * ui.value;
gridUpdating.updateRow(data[i].ID, row);
}
Hello Rosco,
I believe your issue comes from the fact Updating's updateRow method expects the row updated to be actually present in the grid. To circumvent this limitation to the API you can use its corresponding data source function directly:
function CalcTotal(evt, ui) { var data = $("#grid1").data("igGrid").dataSource.data(), gridUpdating = $("#grid1").data("igGridUpdating"), row; for (var i = 0; i < data.length; i++) { row = data[i]; row.tax = ui.value; row.total = row.price * ui.value; $("#grid1").data("igGrid").dataSource.updateRow(data[i].ID, row, true); } $("#grid1").igGrid("dataBind");}
You'll notice the additional parameter which controls if the update will be directly committed to the data source. The call to dataBind below serves to rerender the grid with the new data.
I hope this helps! If you have any other questions, please let me know!
Best regards,
Stamen Stoychev
Thanks Stamen,
I thought the updateRow method had to be called if you wanted to update any row in the igGrid; I didn't realize you could just update the dataSource directly. Your method works great or simply updating all of the data and only calling updateRow for those rows in the grid that are a part of the current dataView also works.
thanks again!