MVC Grid jQuery Plugin to customize row and columns

Download Sample Project

In my previous postHow to Implement tooltip in MVC grid I discussed some of the client side manipulation of web grid control. After that discussion I got lot of requests to provide some help on handling different client side actions a user can perform inside MVC grid. I decided to build a very quick and simple jQuery plug-in for MVC web grid. This plugin is still in very early development stage. In this post I will share some of the details of this plug-in. Using this plugin you will be able to bind to various client side events inside the web grid control.

Before I go into some details about this plug-in I will set up the context of this discussion by showing some of the prototype code from sample.

    
 @grid.GetHtml(
  htmlAttributes: new { id = "postsgrid" },
  columns: grid.Columns(
  grid.Column("Title", "Blog title"),
  grid.Column("Author", "Blog Author", @<div post_id="@item.PostId">@item.Author</div>),
  grid.Column("DateCreated", "Created On", @<i>@item.DateCreated.ToString("yyyy-MM")</i>, "mystyle", false)
  ),
  mode: WebGridPagerModes.Numeric | WebGridPagerModes.NextPrevious,
  tableStyle: "table table-striped",
  ooterStyle: "pagination"
  )

It is pretty much same code from last discussion with minor changed. I have explicitly set id attribute value for contained table element. You can see that I have set the value of id to postsgrid. It always helps if you can uniquely identify elements using id. I am going to use this id as jQuery selector. Now let us see some client side javascript that binds this MVC grid to my jQuery plug-in.

 $(document).ready(function () {
    $('#postsgrid').webGrid({
        keyfield:'post_id',
        events: {
            hoverRowColumn: function (data) {
                $(data.elem).addClass("blue-column");
            },
            leaveRowColumn: function (data) {
                $(data.elem).removeClass("blue-column");
            }
        }
    });
});

I will describe what this javascript code is doing. As you can see that I have used id of the table element to bind my jQuery plugin to the element. Next you are looking at an option named keyfield. Since each element in your grid may have way to uniquely identity data for that row, you can set that unique id value as custom attribute in one of columns of the row. It does not matter what HTML element you will use for this custom attribute. I am just making sure that it is present in some column of the row. The plug-in does not enforce name of this custom attribute. The plugin will pick up name of that custom attribute from keyfield option value. If you do not specify this option value, then plugin will ignore it and will not make any attempt to extract value of this unique identifier of row data. From razor code snippet you can see that I have set this identifier value as post-id attribute on Author column.

Web Grid Plug-in

This MVC grid jQuery plug-in is still in very early development state. Currently it iterates over all the rows and columns of table and then binds each element to mouse events. You can provide your own implementation of these event handler delegates. Plug-in checks if some function has been specified for each of these events, then it calls the function. Plug-in passes some data to these function.

• row: This property specifies zero based index of row on which the event occurred
• col: This property specifies zero based index of column in row on which the event occured
• elem: This property specifies HTML element on which the event occurred. This could could be row or cell element on which event occurred.
• data_key: This property specifies unique key value extracted from element that has keyfield named attribute set on it.

Sample Code

I have attached sample project that I am using to develop and test all web grid related functionality. You will find byteblocks.webgrid.js file that has all core implementation of this jQuery plugin.

As I add more features to this jQuery plug-in I will post lastest code in my posts.