Set color of a cell based on data

5 posts, 0 answers
  1. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 29 Jul Link to this post

    I'm struggling on how to set the color of a cell in the grid based on data.  I see where this question has been asked a lot before - but I'm not seeing an answer that is understandable to me.

    I am using ASP.NET MVC with a grid that has an AJAX datasource.  The datasource returns a column that contains the color I want the cell to be. 

    The view's model contains the selection fields for the page.  The grid is using a different class named: PlannedProjectList.  There is a field in PlannedProjectList that contains the color of the cell.

    @model LRFP.ViewModels.PlannedProjectSelection 

    @(Html.Kendo().Grid<LRFP.ViewModels.PlannedProjectList>()

     

    I was able to set the color of the cell with this.  But I don't want to use a model field.  Because each row can be a different color.  So I need to use a field from the data on the grid.

    columns.Bound(c => c.PlannedProjectName).HtmlAttributes(new { style = "color: " +  @Model.fieldColor + "  ;" });

    Is it possible to do what I'm asking?  Or is there another way?  If so, please show a detailed example.  I'm a newbie - so the more detailed example the better.

    Thanks for your help.

  2. Kostadin
    Admin
    Kostadin avatar
    1713 posts

    Posted 02 Aug Link to this post

    Hello Terry,

    I would recommend you to examine the following how to article which elaborates more on customizing cell based on the data value. You can use any one of the method to achieve your requirement.

    Regards,
    Kostadin
    Telerik by Progress
    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. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 08 Aug in reply to Kostadin Link to this post

    For anyone who needs to know how to set the color for a cell in a grid based on data displayed in the grid.  I ended up doing what was described here:  http://stackoverflow.com/questions/11270288/how-do-i-change-the-background-color-of-a-kendo-ui-for-mvc-grid-cell

    They show defining the grid column like this: 

    columns.Bound(o => o.QtyReceived).Width(20).Title("Qty Rx").ClientTemplate("#= LineItems_Databound(QtyShipped,QtyReceived)#");

     

    And having this JavaScript function:

    <script>

    function LineItems_Databound(qtySx, qtyRx) {

    if (qtyRx < qtySx) {return "<div style='background: pink'>" + qtyRx + " </div>";

    }

    else {

    return qtyRx;

        }

    }

    </script>

     

     

  5. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 08 Aug in reply to Kostadin Link to this post

    For anyone who needs to know how to set the color of an ASP.NET MVC grid with an Ajax datasource.  I ended up doing what is described in this post:  http://stackoverflow.com/questions/11270288/how-do-i-change-the-background-color-of-a-kendo-ui-for-mvc-grid-cell

    They define the grid column like this:

    columns.Bound(o => o.QtyReceived).Width(20).Title("Qty Rx").ClientTemplate("#= LineItems_Databound(QtyShipped,QtyReceived)#");

    And use this JavaScript function:

      function LineItems_Databound(qtySx, qtyRx) {if (qtyRx < qtySx) {return "<div style='background: pink'>" + qtyRx + " </div>";}else {return qtyRx;}}

  6. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 08 Aug in reply to Terry Link to this post

    Sorry for the double post.  The form gave me an error - so I did it a second time.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready