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

Highlight a transaction in grid based on external data

3 Answers 53 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Suman
Top achievements
Rank 1
Suman asked on 05 Dec 2012, 10:58 PM
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

3 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 07 Dec 2012, 12:04 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Suman
Top achievements
Rank 1
answered on 11 Dec 2012, 12:43 AM
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
0
Vladimir Iliev
Telerik team
answered on 12 Dec 2012, 01:25 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Suman
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Suman
Top achievements
Rank 1
Share this question
or