This is a migrated thread and some comments may be shown as answers.

Yet another conditional formatting question ...

5 Answers 337 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joachim
Top achievements
Rank 1
Joachim asked on 09 Feb 2016, 09:17 AM

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!

5 Answers, 1 is accepted

Sort by
0
Accepted
Georgi Krustev
Telerik team
answered on 10 Feb 2016, 10:38 AM
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:
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Joachim
Top achievements
Rank 1
answered on 12 Feb 2016, 02:50 PM

Thanks for the feedback and assistance Georgi.

This works perfectly.

0
Joachim
Top achievements
Rank 1
answered on 12 Feb 2016, 03:14 PM

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....

0
Georgi Krustev
Telerik team
answered on 16 Feb 2016, 08:57 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Joachim
Top achievements
Rank 1
answered on 16 Feb 2016, 03:31 PM

Hi Georgi,

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

Regards,

Joachim

Tags
Grid
Asked by
Joachim
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Joachim
Top achievements
Rank 1
Share this question
or