Kendo Controls in an AngularJS ng-repeat

Mark_verticalKendo has long been an awesome JavaScript framework for UI controls. I had to build a user management system and needed to dynamically show a number of Kendo controls, all created via an AngularJS ng-repeat.

Kendo is smart enough to know that the item in the repeat, a user in this case, is the bound object and will keep a reference to it.

<div  ng-repeat="user in model.users">
        <input kendo-numeric-text-box
               k-min="0" k-max="10000000"
               k-ng-model="user.wealth" />


Kendo: How to loop through each row in a Grid

kendouigridfinal.pngHere’s the most efficient way to loop though a list of rows in a Kendo Grid after the grid has data bound:

Step 1: Add a dataBound event assignment to a Kendo Grid (MVC example):

.Events(builder => builder.DataBound(“dataBound”))



Step 2: Loop through rows in a Kendo Grid

function dataBound(e) {
  var grid = this;
  var dataSource = grid.dataSource;
  //Loop through each record in a Kendo Grid
  $.each(grid.items(), function(index, item) {
        var uid = $(item).data("uid");
        var dataItem = dataSource.getByUid(uid);
        //Add an ID to each row as an example
        $(item).attr("id", dataItem.SomeField + "-" 
                 + dataItem.AnotherField);


Refresh Kendo Grids after an Add

Kendo is a suburb javascript UI framework and I love it.

Often I need the Grid to refresh from the server its contents after I add a new row. Here’s an easy way to do it.

In your Grid definition handle the RequestEnd event:

.DataSource(dataSource => dataSource
    .Events(events => events.RequestEnd("gridRequestEnd"))

Then wire up this javascript function to cause the Kendo Grid to update if the update was a create event.

function gridRequestEnd(e) {
    var grid = $("#grid").data("kendoGrid");
    var data = grid.dataSource;
    if (e.type == "create" || e.type == "update") {
        if (!e.response.Errors)