Row style based on content

4 posts, 0 answers
  1. Allan
    Allan avatar
    34 posts
    Member since:
    Aug 2015

    Posted 01 Mar Link to this post

    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
  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 02 Mar Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Allan
    Allan avatar
    34 posts
    Member since:
    Aug 2015

    Posted 03 Mar in reply to Viktor Tachev Link to this post

    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");
            }
      
        }       
    }

  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 07 Mar Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready