Highlighting the Current Page of WebGrid

        Introduction:

                    WebGrid helper makes it very easy to display/show tabular data quickly in your ASP.NET MVC 3(or ASP.NET Web Pages) application. This works great in most cases. However, sometimes, you may need to customize the WebGrid. For example, you may need to highlight the current page of WebGrid. In this article, I will show you how to highlight the current page by using a very simple trick.

            Description:

                    For example purpose, I am putting all the code in a MVC view. It is not recommended for production use. So, just open your MVC view(or your ASP.NET web page) and add these lines,

        @using System.Text.RegularExpressions
        @functions{
            public class Employee
            {
                public Employee()
                {
                    ContactNumbers = new List<string>();
                }
                public string Name { get; set; }
                public Address Address { get; set; }
                public List<string> ContactNumbers { get; set; }
                public Address NotNullableAddress
                {
                    get
                    {
                        return Address ?? new Address();
                    }
                }
                public string Contacts
                {
                    get
                    {
                        return string.Join("; ", ContactNumbers);
                    }
                }
            }
            public class Address
            {
                public string City { get; set; }
            }
            }
        @{
            var list = new List<Employee>();
            for (int i = 1; i < 51; i++)
            {
                list.Add(new Employee
                        {
                            Name = "MyName" + i,
                            Address = new Address { City = "MyCity" + i },
                            ContactNumbers = new List<string> { "021-XXXXXXXX" + i, "XXXXXXXX" + i }
                        });
            }
            var grid = new WebGrid(source: list);
            var pager = grid.Pager().ToString();
            var newPager = Regex.Replace(pager, "(\\d+) ", "<span class='selected'>$1</span>");
            var gridHtml = grid.GetHtml(columns: grid.Columns(
                grid.Column("NotNullableAddress.City", header: "City"),
                grid.Column("Name"),
                grid.Column("Contacts"))).ToString();
            gridHtml = Regex.Replace(gridHtml, "(<tfoot>\\s*<tr>\\s*<td[^>]*>)([^<]*|<[^/]*|</[^t]*)*(</tfoot>)", "$1" + newPager + "</td></tr>$3");
        }
        @(new HtmlString(gridHtml))

        <style>
            .selected
            {
                background: none repeat scroll 0 0 #267CB2;
                color: #FFFFFF;
                margin: 5px;
            }
        </style>

                    WebGrid helper allows you to style the pager using footerStyle parameter. But unfortunately it is very difficult to style the current page because the current page is  render as just text inside the td element. This is why I have used the Regex class above. The above code will simply insert a span with selected class on the position of selected page text. I have also added the selected class style on the view. So, you can easily style the selected page text. 

                Summary:

                              WebGrid makes it very easy to show tabular data with paging, sorting, filtering, etc. Sometimes, you may need to highlight the current/selected page text because highlighting the current page will increase the user experience. In this article, I showed you how to highlight the current page using a very simple trick.  Hopefully you will enjoy this article too.