Set color of a cell based on data

[Terry]

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.

[Kostadin]

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

[Terry]

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>

 

 

[serge]

what if the color ("pink"), is defined in the data for each cell?

[Eyup]

You can access the grid parent row and use the .dataItem() method to get its model:
https://docs.telerik.com/kendo-ui/api/javascript/ui/listview/methods/dataitem

And then you will have the required data to set the color.

[serge]

this is really hard to understand, the thing... "#:" or "#=" or "#_" or "\\#"... it can't be debugged, a mess...

[Eyup]

More info with some nice samples you can find here:
https://docs.telerik.com/kendo-ui/framework/templates/overview

[serge]

thank you Eyup, a pity we can't "like" the comments on the forum :)

[Eyup]

Thank you for your kind words. I will forward your feedback to our Tech Team for further consideration.

[Terry]

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

[Terry]

Sorry for the double post.  The form gave me an error - so I did it a second time.