Yet another conditional formatting question ...

[Joachim]

Hi Guys,

I've been going over a lot of posts in regards to conditional formatting of the Grid Control's cells.  I've now ended up with the below code. However this does not want to change anything on the intended cell... Everything stays the same.

Based on the code I was expecting the cell in the column "WO Type" to change it's background color if the value of the cell containing ERR_CAUSE had a 403 value in it. What am I missing out on here?

@(Html.Kendo().Grid(Model)
              .Name("Shiftreport")
              .Events(events => events.Change("Grid_OnRowSelect"))
              .Columns(columns =>
              {
                  columns.Bound(o => o.WORK_TYPE_ID).Title("WO Type");
                  columns.Bound(o => o.TOP_EQUIPMENT_ID).Title("Equipment"); 
                  columns.Bound(o => o.ERR_DESCR_LO).Title("Work Order");
                  columns.Bound(o => o.ERR_CAUSE).Title("Cause");
                  columns.Bound(o => o.MAX_EQUIP_DOWN_TIME_START).Format("{0:dd/MM HH:mm}").Title("DT Start");
                  columns.Bound(o => o.MAX_EQUIP_DOWN_TIME_END).Format("{0:dd/MM HH:mm}").Title("DT Stop");

              })
              .CellAction(cell =>
              {
                  if (cell.Column.Title == "WO Type")
                  {
                      if (cell.DataItem.ERR_CAUSE == "403")
                      {
                          //Set the background of this cell only
                          cell.HtmlAttributes["style"] = "background:red;";
                      }
                  }
              })
              .Pageable(pageable => pageable
                  .PageSizes(true)
              )
              .Sortable()
              .Selectable()
              .Navigatable()
              .Filterable()
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .PageSize(10)
                  .ServerOperation(false)
                  .Model(model => { model.Id(p => p.WO_NO); })
                  .Sort(sort => sort.Add(o => o.MAX_EQUIP_DOWN_TIME_START).Descending())
              ))

 

 

Thanks in advance!

[Georgi Krustev]

Hello Joachim,

If you would like to format the cell value conditionally, then you will need to use the Client Template option. This is required when Ajax binding is used. You can find more details here:

• http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-do-i-have-conditional-logic-in-a-column-client-template

In your case the code will like something like this:

columns.Bound(p => p. WORK_TYPE_ID).ClientTemplate(
    "# if (.ERR_CAUSE == '403') { #" +
    "<span style='background-color: red'>#: WORK_TYPE_ID #</span>"
    "# } else { #" +
    "#: WORK_TYPE_ID #" +
    "# } #"
);

You will need to tweak the template in order to accomplish your business requirement.

Regards,
Georgi Krustev
Telerik

 

 

[Joachim]

Thanks for the feedback and assistance Georgi.

This works perfectly.

[Joachim]

I did note something that looks like a strange behavior.

The formatting with the ClientTemplate only seems to be working when I add the below setting on the Grid. When I leave the CellAction out it doesn't work at all...

1....
2.
3..CellAction(cell =>{})
4.
5....

[Georgi Krustev]

Hello Joachim,

This indeed is a strange behavior. In general, the widget does not have a requirement to define CellAction method in order to use ClientTemplate option.

In order to proceed with the investigation, I would like to ask you to send us a repro demo. Thus we will be able to review it locally and find the cause much faster.

Regards,
Georgi Krustev
Telerik

 

 

[Joachim]

Hi Georgi,

 I'll try and send in a repro demo asap.

Regards,

Joachim