This is a migrated thread and some comments may be shown as answers.

Add class based on date in Kendo Grid

1 Answer 1159 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Allan asked on 27 Aug 2015, 03:39 PM

Hi there,

I have a grid setup and I want to add a class to the row that has the data of PPT under the status column.  I got a copy of an examples project but the javascript included is for numeric values.  I want to add the class to a field that has written data in this case the term "PPT"  how can I achive this?

The javascript I was provided with

    function onDataBound(e) {
        var grid = $("#Grid").data("kendoGrid");
        var gridData = grid.dataSource.view();

        for (var i = 0; i < gridData.length; i++) {
            //get the item uid
            var currentUid = gridData[i].uid;
            //if the record fits the custom condition
            if (gridData[i].EmployeeId % 2 == 0) {
                //find the row based on the uid and the custom class
                var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");


My grid code is as follows


    .Columns(columns =>
            columns.Bound(p => p.owner_company).Title("Owner");
            columns.Bound(p => p.vessel_name).Title("Vessel");
            columns.Bound(p => p.vessel_type).Title("Type");
            columns.Bound(p => p.fixture_charterer).Title("Charterer");
            columns.Bound(p => p.current_location).Title("Location");
            columns.Bound(p => p.next_charterer_info).Title("Next Charter");
            columns.Bound(p => p.fixture_work).Title("Work");
            columns.Bound(p => p.fixture_note).Title("Notes");
            columns.Bound(p => p.vessel_status).Title("Status");
    .DataSource(dataSource => dataSource
    .ToolBar(tools => tools.Pdf())
    .Pdf(pdf => pdf
        .ProxyURL(Url.Action("PDF_Export_Read", "Grid"))
    .ToolBar(tools => tools.Excel())
    .Excel(excel => excel
            .ProxyURL(Url.Action("Excel_Export_Save", "Grid"))

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 31 Aug 2015, 08:41 AM
Hello Allan,

Thank you for contacting us.

To achieve the desired functionality you can use following code snippet on the client side dataBound event:
function OnDataBound(e) {
        var kendoGrid = $("#MyGrid").data("kendoGrid"); // get the grid widget
        var rows = e.sender.element.find("tbody tr"); // get all rows
        // iterate over the rows and if the undelying dataitem's Status field is PPT add class to the cell
        for (var i = 0; i < rows.length; i++) {
            var row = rows[i];
            var status = kendoGrid.dataItem(row).Status;
            if (status && status.indexOf("PPT") > -1) {

Additionally I am sending you a simple example which demonstrates the described approach. Please check it out and let me know if it helps you.

Looking forward for your reply.

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question