Tuesday, July 30, 2013

Iterating through a Kendo Grid

I put data into a Kendo grid, but then the user has the ability to sort it and edit it.  In one case, I put in a location search function that pops up a window.  When the window closes, the grid has to be updated.

Here is the function that I use to do the search and update:

function ahe_receiveNewLocation(itemType, itemId, itemName, locationId, locationName) {
    var myData = $("#ahe_inventoryHistoryTransactionsGrid").data("kendoGrid")._data;
    for (var i = 0; i < myData.length; i++) {
        var row = myData[i];
        if (row.id == window.activityHistoryInventoryTransactionId) {
            row.Location = "<a href='javascript:ahe_getNewLocation(" + row.Id + ", " + locationId
                         + ", \"" + locationName + "\")'>" + locationName + "</a>";
        }
    break;
    }
}
Note the red code above.  That datastructure points to the data for the rows currently displayed in the grid.  If the data you are interested in includes rows that are not currently displayed (paged out of sight), you have to use a slightly different data structure.  Instead, use data("kendoGrid").dataSource._data.  When using the Chrome object browser, be aware that it doesn't always show the underbar ( _ ) at the start of 'data'.  It just shows the word data, which is a function, not the array of records. 

The key item above is to get to the _data element.  That is an array that holds all of the data attributes.

In addition, if you set an id in your schema for the grid, the id element shows up there.

   var myDataSource =
        new kendo.data.DataSource({
            data: dataset,
            pageSize: 3,
            schema: {
                model: {
                    id: "InventoryTransactionId",
                    fields: {
                        InventoryTransactionId: {
                            editable: false,
                            nullable: true
                        },
                        Action: {
                            editable: false,
                            nullable: true
                        },
                        Item: {
                            editable: false,
                            nullable: true
                        },
                        UsageQuantity: {
                            editable: true,
                            nullable: false,
                            validation: {
                                required: true
                            }
                        },
                        UnitOfMeasure: {
                            editable: false,
                            nullable: true
                        },
                        UsageDescription: {
                            editable: false,
                            nullable: true
                        },
                        Run: {
                            editable: false,
                            nullable: true
                        },
                        TrackingNumber: {
                            editable: false,
                            nullable: true
                        },
                        TransactionDate: {
                            editable: false,
                            nullable: true
                        },
                        Location: {
                            editable: false,
                            nullable: true
                        }
                    }
                }
            }
        });


Finally, if you want your change to be displayed, you have to tell the grid to refresh itself.

        grid.refresh();

This will tell the grid to reload itself from it's data component.

(iactex.activityHistoryEdit.js)

No comments:

Post a Comment