Kendo Grid add and array of element to to a table with Javascript

Question

I have a form to add admin user to a site. Multiple users can be added at once. OnSuccess, I need to append the users to a Kendo Grid (Table). How can I append all three users when the AJAX response looks like this.

{ "Result": true, "Message": "Success!", "AccountRoleId": 106, "Users": [ { "FirstName": "Joe", "LastName": "Smith", "Email": "[email protected]", "Status": 1 }, { "FirstName": "John", "LastName": "Doe", "Email": "[email protected]", "Status": 1 }, { "FirstName": "Al", "LastName": "Jones", "Email": "[email protected]", "Status": 1 } ] } 

This script will not work I keep getting a single entry of undefined undefined, added to the Kendo table after the form is submitted.

var newRow = { FirstName: response.Users.FirstName, LastName: response.Users.LastName, Email: response.Users.Email, Status: response.Users.Status }; var grid = $("#UsersTable-").data("kendoGrid"); grid.dataSource.add(newRow); 

Answer 1

You have to access the property Users which has an array. This will render the grid.

var grid = $("#UsersTable-").data("kendoGrid"); if(response.Result) { response.Users.forEach((item) => { item.Status = item.Status || 0; }); grid.dataSource.add(response.Users); } else { console.error('unable to fetch data'); }