Yet another conditional formatting question ...

6 posts, 1 answers
  1. Joachim
    Joachim avatar
    7 posts
    Member since:
    Oct 2014

    Posted 09 Feb 2016 Link to this post

    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!

  2. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 10 Feb 2016 Link to this post

    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!
     
  3. Joachim
    Joachim avatar
    7 posts
    Member since:
    Oct 2014

    Posted 12 Feb 2016 in reply to Georgi Krustev Link to this post

    Thanks for the feedback and assistance Georgi.

    This works perfectly.

  4. Joachim
    Joachim avatar
    7 posts
    Member since:
    Oct 2014

    Posted 12 Feb 2016 Link to this post

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

  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 16 Feb 2016 Link to this post

    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!
     
  6. Joachim
    Joachim avatar
    7 posts
    Member since:
    Oct 2014

    Posted 16 Feb 2016 in reply to Georgi Krustev Link to this post

    Hi Georgi,

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

    Regards,

    Joachim

Back to Top