Telerik Mvc Grid Extension Method to highlight grid row

Telerik Mvc Grid Extension Method to highlight InActive record

I was recently working on a project where in there was a requirement that all those grid rows which are inactive in database should be highlighted with a different colour. In this project we were working with Telerik Mvc extensions.

I googled for this, and most of the responses were like, to add a client side RowDataBound event to each of the grid & place the logic there.

According to me this is a bit of time consuming tasks. So after some research & a bit help from telerik MVC forums, I created my own extension method to highlight the grid row for which the column value of the IsActive column is false.

In our database, each of the table contains a column “IsActive” which stores a Boolean value “true” or “false” so as to represent the particular record is Active or not. A record with false value in “IsActive” column indicates that the record is InActive.

Here are some simple steps to achieve this.

  1. First we need to write an extension method which will add a handler to highlight the record. Here is the code snippet for that

2. Add following class to CSS

3. Add following javascript function to your master page

4. Append your grid like this

And that’s all we need to do the row will be highlighted like this

You can find the source code here

Advertisements

2 thoughts on “Telerik Mvc Grid Extension Method to highlight grid row

  1. Hi there, I created an alternative to your method which actually sent me on the right track to achieving what you wanted – but in a generic way:

    public static GridBuilder HighlightRows(this GridBuilder builder, Func condition, string cssClass = “”) where T : class
    {
    Grid grid = builder.ToComponent();

    // Get rows matching the condition
    var rows = grid.DataSource.Where(condition);

    grid.RowAction = row =>
    {
    if(rows.Contains(row.DataItem))
    {
    row.HtmlAttributes[“class”] = cssClass;
    }
    };

    return builder;
    }

    This makes it possible to add this method call to the grid:

    .HighlightRows(u => u.Name.StartsWith(“M”), “myClass”)

    I know there is a potential performance issue loading all matching rows for each row in this way, but I didn’t have time to find a better solution – improvements are more than welcome!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s