Add class based on date in Kendo Grid

[Allan]

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

<script>
    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 + "']");
                $(currenRow).addClass("customClass");
            }
        }
    }
</script>​

 

My grid code is as follows

 

    @(Html.Kendo().Grid(Model)
    .Name("Grid")
    .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");
        }
    )
    .Pageable()
    .Groupable()
    //.Scrollable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(40)
        .ServerOperation(false)        
        )
    .ToolBar(tools => tools.Pdf())
    .Pdf(pdf => pdf
        .FileName("PDF_Vessel_Export.pdf")        
        .ProxyURL(Url.Action("PDF_Export_Read", "Grid"))
        )
    .ToolBar(tools => tools.Excel())
    .Excel(excel => excel
            .FileName("Excel_Vessel_Export.xlsx")
            .Filterable(true)
            .ProxyURL(Url.Action("Excel_Export_Save", "Grid"))
            )
        )​

[Radoslav]

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) {
                $(row.cells[3]).addClass("customRed");
            }
        }
    }

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.

Regards,
Radoslav
Telerik