Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
375
problems updating rows programmatically when paging is enabled
posted

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);

    }

Parents
  • 5513
    Verified Answer
    Offline posted

    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

Reply Children
No Data