How to change grid column value on DataBound event

Question

I have the following Grid,

<div class="kotgrid">
</div>

And I bound the data as following. Here I want to change timedelay column value on DataBound event,

$(".kotgrid").kendoGrid({
    dataSource: dataSource, 
    dataBound: function (e) {
        var grid = this;
        grid.tbody.find('>tr').each(function () {
            var dataItem = grid.dataItem(this);
            var d = new Date();
            var currentTime = parseTime(dataItem.servertime);
            var currenTime = d.getHours() + ":" + d.getMinutes();
            var meanTime = diff(orderTime2, currenTime2)
            //I want to set this meanTime in timedelay coloumn. How can I achieve this?
        })
    },
    filterable: true,
    scrollable: true,
    columns: [
                   { hidden: true, field: "orderitemid" },
                   { field: "tableid", title: "Table No" },
                   { field: "itemname", title: "Items" },
                   { field: "quantity", title: "Quantity" },
                   { field: "modifier", title: "Modifier" },
                   { hidden: true, field: "orderedtime", title: "Time Delay" },
                   { field: "timedelay", title: "Time Delay" },
                   { hidden: true, field: "alert" },
                   { hidden: true, field: "category", groupHeaderTemplate: "#= value #" },
                   { command: { text: "Pickup", click: showDetails} }
             ],
    mobile: "phone",
    editable: false,
    selectable: "row",
    height: "600px"
});

I don't know how to achieve it. Any help will be highly appreciable.

Thanks in advance.

Answer 1

You don't need to iterate over the <tr> elements, unless you only want to do it for the current page. You can just iterate over grid.dataSource.data(). So you could do something like:

var data = this.dataSource.data();
$(data).each(function() {
    var d = new Date();
    var currentTime = parseTime(this.servertime);
    var currenTime = d.getHours() + ":" + d.getMinutes();
    var meanTime = diff(orderTime2, currenTime2)
    // set on dataItem
    this.set("timedelay", meanTime);
});

Regardless of how you get access to the dataItem , you can set any property using the set method (the data source contains Model items which inherit from ObservableObject).