Highlight a transaction in grid based on external data

[Suman]

Hi There,

I have a grid and I need to highlight the rows which have a field called DATE_DUE and the date due is prior to certain days.

This certain date is a parameter value in a parameter table. Whatever is the number of days in a field called DAYS in that parameter table, I need to highlight the transactions in the grid when the DATE_DUE < CURRENT_DATE+DAYS.

For example, there is a transaction in grid and DATE_DUE is 20 Dec 2012. If the value of the DAYS in the parameter table is 10, I need not highlight that transaction but if is 20, I need to highlight. Today's date is 06 Dec 2012.

Please note that there is no field to join the table from where we get the grid data DATE_DUE and the parameter table where DAYS is a field

[Vladimir Iliev]

Hi Suman,

 
Basically to apply custom formatting on the Grid rows depending on their dataItem you should use the DataBound event to iterate over the current grid rows and check if given condition is met. Please check the example below:

DataBound event handler:

<style>
    .highlight_row {
        background: red;
    }

</style>
<script>
    function onDataBound(e) {
        debugger;
        grid = e.sender;
        $("#" + e.sender.options.name + " tbody tr").each(function () {
            var currentDataItem = grid.dataItem($(this));
            //supply CURRENT_DATE And DAYS varaibles
            if (currentDataItem.DATE_DUE < CURRENT_DATE + DAYS) {
                $(this).addClass("highlight_row");
            }
        })
    }
</script>

Kind Regards,
Vladimir Iliev
the Telerik team

[Suman]

Thank you for the reply.

In the scenario below:

<div id = "InfringementsListContainer" style="overflow-x: scroll; width: 100%;">
@(Html.Kendo().Grid<InfringementsNavigatorList>()
                .Name("InfringementsList")
        .Sortable()
        .Pageable(paging =>
        {           
            paging.Enabled(true);
            paging.Info(true);
            paging.PageSizes(true);
            paging.Numeric(true);
            paging.PreviousNext(true);
            paging.Refresh(true);
            paging.PageSizes(new int[5] { 5, 10, 15, 20, 25 });
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(15)
                            .Read(read => read.Action("_InfringementsList", "InfringementsList"))            
            )
         .Selectable(selectable=>selectable.Mode(GridSelectionMode.Single))
          .Reorderable(reorder => reorder.Columns(true))
         .Filterable()
         .Columns(columns =>
         {
             foreach (var item in _infringementsUserPreference)
             {

                 if (item.PROPERTY_NAME == "INFRINGEMENT_NO")
                     columns.Bound(w => w.INFRINGEMENT_NO).Title("Infringement number");
                 else if (item.PROPERTY_NAME == "FLEET_USER_CODE")
                     columns.Bound(w => w.FLEET_USER_CODE).Title("Fleet number");
                 else if (item.PROPERTY_NAME == "REGISTRATION")
                     columns.Bound(w => w.REGISTRATION).Title("Registration");
                 else if (item.PROPERTY_NAME == "DATE_DUE")
                     columns.Bound(w => w.DATE_DUE).Title("Due date").Format("{0:dd/MM/yyyy}");
             }
        })
            .ClientDetailTemplateId("InfringementListTemplate")
        )      
</div>

How do I call the function you specified?

Please let me know and thanks in advance

[Vladimir Iliev]

Hi Suman,

Basically you can read more about the available grid events here and how to configure them in Kendo MVC wrappers here. Also please check the updated code below:

<div id = "InfringementsListContainer" style="overflow-x: scroll; width: 100%;">
@(Html.Kendo().Grid<InfringementsNavigatorList>()
                .Name("InfringementsList")
        .Sortable()
        .Pageable(paging =>
        {
            paging.Enabled(true);
            paging.Info(true);
            paging.PageSizes(true);
            paging.Numeric(true);
            paging.PreviousNext(true);
            paging.Refresh(true);
            paging.PageSizes(new int[5] { 5, 10, 15, 20, 25 });
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(15)
                            .Read(read => read.Action("_InfringementsList", "InfringementsList"))
            )
         .Selectable(selectable=>selectable.Mode(GridSelectionMode.Single))
         .Reorderable(reorder => reorder.Columns(true))
         .Filterable()
         //Attach event handler
         .Events(e => e.DataBound("onDataBound"))
         .Columns(columns =>
         {
             foreach (var item in _infringementsUserPreference)
             {

                 if (item.PROPERTY_NAME == "INFRINGEMENT_NO")
                     columns.Bound(w => w.INFRINGEMENT_NO).Title("Infringement number");
                 else if (item.PROPERTY_NAME == "FLEET_USER_CODE")
                     columns.Bound(w => w.FLEET_USER_CODE).Title("Fleet number");
                 else if (item.PROPERTY_NAME == "REGISTRATION")
                     columns.Bound(w => w.REGISTRATION).Title("Registration");
                 else if (item.PROPERTY_NAME == "DATE_DUE")
                     columns.Bound(w => w.DATE_DUE).Title("Due date").Format("{0:dd/MM/yyyy}");
             }
        })
            .ClientDetailTemplateId("InfringementListTemplate")
        )
</div>

Kind Regards,
Vladimir Iliev
the Telerik team