Row style based on content

[Allan]

I've been working on change the class added to a table row of the grid based on the value of a specific cell.  For some reason however my code doesn't actually seem to do anything.  There are no errors it just doesn't apply a class to the row cell and I don't know why.  Can someone do a sanity check for me and make sure I have the code correctly structured please.

The Grid

   @(Html.Kendo().Grid<Spoton_Areas_Test.ViewModels.VesselsViewModel>()
             .Name("Grid")
             .Columns(columns => {
                 columns.Bound(c => c.fixture_work)
                     .Title("Work");
                 columns.Bound(c => c.vessel_status)
                     .Title("Status");
               })
             .Editable(editable => editable.Mode(GridEditMode.InLine))
             .Pageable()
.Events(e=>e.DataBound("OnDataBound"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Sort(sort =>
                {
                    sort.Add(
                    company => company.owner_company).Ascending();
                })
            .PageSize(40)
            .Model(model =>
                {
                  model.Id(p => p.vessel_idx);
              })
          .Read(read => read.Action("vessels_Read", "Home"))
          .Update(update => update.Action("vessels_Update", "Home"))
          ))

My Javascript

function onDataBound(e) {
     var kendoGrid = $("#Grid").data("kendoGrid");
     var rows = e.sender.element.find("tbody tr");

     for (var i = 0; i < rows.length; i++) {

         var row = rows[i];
         var status = kendoGrid.dataItem(row).vessel_status;

         if (status = "PPT") {
             $(row.cells[3]).addClass("customRed");
         }
     }
 }

Not sure what's wrong but any help is appreciated

[Viktor Tachev]

Hello Allan,

I have examined the code and it seems mostly correct.

Note that in the if condition you are assigning a value to the status variable. Use the == operator instead.

Also, it seems that the CSS class is applied to the fourth cell in the row. Please ensure that this is the correct cell where you would like the style applied. You can test the behavior by setting CssClass to the first cell:

$(row.cells[0]).addClass("customRed");

Regards,
Viktor Tachev
Telerik

[Allan]

Is it possible to add a class to a div element that I have in a custom cloumn that uses ClientTemplate?

.ClientTemplate("<div id='status_flags' class='status_flags'></div>");

I have the above div in the first column of my grid on every row and it uses a client template.  I'd like to add a class to that div per row based on conditions.  Here is what I have in javascript.  My question is, how do I add a class to that div through my IF statements, standard javascript doesn't seem to work perhaps because of the kendo data associations.

 

//
// Grid Prompt
function prompt(e) {
    var kendoGrid = $("#Grid").data("kendoGrid");
    //var flags = document.getElementById("status_flags");
    var rows = e.sender.element.find("tbody tr");

    //Get todays date
    var newdate = new Date();

    //Add 21 days to todays date
    newdate.setDate(newdate.getDate() + 21);

    for (var i = 0; i < rows.length; i++) {

        var row = rows[i];
        var charterer = kendoGrid.dataItem(row).fixture_charterer,
            offhire = kendoGrid.dataItem(row).fixture_stop,
            forward = kendoGrid.dataItem(row).next_charterer_info;

        if (charterer == "") {
            $(row).addClass("prompt");
            [ADD CLASS TO DIV]

        }
        if (forward !== "") {
            $(row).addClass("forward");
        }
        if (offhire < newdate && offhire !=null) {
            $(row).addClass("offhire");
        }

    }
}

[Viktor Tachev]

Hi Allan,

You can use the CSS class that is added to the grid cell to style the div element. Check out the code snippet below for illustration.

.prompt div {
    background: red;
}

Regards,
Viktor Tachev
Telerik