An Expandable .Net GridView

• Download demo - 243.5 KB

Introduction

This tip introduces an enhanced .NET GridView control which is called expandable GridView. The control provides several modes to expand the row with detail information. It is easy to set up the detail row format. Developer can also freely define his own detail template according to real requirements.

It is implemented with .NET GridView, jQuery, and JSON.

Background

In my daily work, it is quite common that I have way more information to show in grid than the screen size allows. This is not a new topic and there are a lot of solutions for that, for example, the third party master/detail grid control, hover popup, or dialogue style popup raised by row click.

However the disadvantages are:

1. You may need to pay for the third party control
2. The coding burden could be big and codes are not so easy to reuse
3. You may not be 100% free to define your own template

The third one is the biggest motivation that attracts me to do this control.

Control Description

If you download and unzip the attachment, you will find under App_Code, there is a class called ExpandableGridView. It inherits the standard .NET gridview and adds some new features on top of it. If you turn off the flag of enabling detail mode, then it only behaves exactly as a standard GridView control. If you turn it on and accordingly set up the related settings, the control itself will render a properly formatted detail row which you can expand/collapse. It saves you time from writing the dummy HTML codes.

How to Use

Detail Mode 1 (from detail data list)

Detail mode 1 (from detail data list) is good for such case: you have a bunch of additional fields to show and they don't need any extra processing, just some simple format and plain text.

All you need to do is just add the fields name and label for the field into an array list of the control and turn on the detail render mode.

Part of the codes can be like this:

DemoGrid1.mShowExpandColumn = true;
DemoGrid1.mDetailRenderMode = ExpandableGridViewDetailRenderMode.FromDetailDataList;
DemoGrid1.mAnimationDurationTime = 500;
DemoGrid1.mDetailColumnsCount = DetailColumnCountPerRow.Three;
DemoGrid1.mDetailDataList.Add(new ExpandableGridViewDetailData("First Name", "FirstName"));
DemoGrid1.mDetailDataList.Add(new ExpandableGridViewDetailData("Last Name", "LastName"));  

Below is the example page of detail mode 1:

Detail Mode 2 (from a specific detail column in data source)

Detail mode 2 (from a specific detail column in data source) is good for such case: you have a long text string stored in a column in the data source, for example, a description, comment, or note.

The main thing is that you just need to give the name of this column you want to display as detail.

The example code segment is like below:

DemoGrid2.mShowExpandColumn= true;
DemoGrid2.mDetailRenderMode= ExpandableGridViewDetailRenderMode.FromDataSourceDetailColumn;
DemoGrid2.mDataSourceDetailColumnName = "Description";   

The example screen shot is as shown below:

Detail Mode 3 (detail row HTML content rendered by a specific JS method):

Detail mode 3 (detail HTML rendered by a specific JS method) is good for such case: you want to have a fully customized detail row template by yourself. It contains every element you need, label, input, dropdown list, grid, Ajax event buttons, image, video, audio, unlimited anything.

The code segment is like below:

DemoGrid3.mShowExpandColumn = true;
DemoGrid3.mDetailRenderMode = ExpandableGridViewDetailRenderMode.FromPageDefinedJavaScriptMethod;
DemoGrid3.mPageDefinedJavascriptMethodNameToRenderDetail = "DemoGridViewRenderDetail"; 

In the third line, the name "DemoGridViewRenderDetail" is a JS method (of course, you can name it by yourself) that will receive several parameters from the control, which include the grid's id, expand icon object, the current row index, and the JSON formatted whole data row. You can freely use all the data passed to render a magical HTML content by JS codes.

Below is the JS method segment:

function DemoGridViewRenderDetail(gridID, expandImage, currentRowIndex, dataRowJsonData) {
     var dataRow = $.parseJSON(dataRowJsonData);
     //...
     var id = GetValueFromJsonFormattedDataRow(dataRowJsonData, "ID");
     var firstName = GetValueFromJsonFormattedDataRow(dataRowJsonData, "FirstName");
     //...
     var detailHtml = "";
     detailHtml += "<table style='width: 100%'>";
     detailHtml += "<tr>";

Here is an example screen shot of detail mode 3:

More Settings

There are few other settings you can use for this control which are not covered above. For example, you can set the control to open the detail row with or without animation effect and you can also set the animation duration time. You can replace the expand/collapse icon with your own icons. Read the codes in the ExpandableGridView class - you will find them all. You can even define an additional JS method for the expand/Collapse click, for example, to log user's behaviour. Of course, you can extend them if you need.

Limitations

This control is implemented based on a standard .NET control. It is not as strong as some third-party stuff on the market. For example, it might have some small bug if there are multiple grids on the same page (I didn't have a chance to look deeper into it yet), even this might not be such a frequent case. Also it depends on jQuery, so when use it, don't forget to reference jQuery in your page.

The Values

So why this control may still have its value?

1. It is free and open, you can modify it furthermore.
2. For simple detail cases, like mode 1 and 2, it can save your coding time.
3. For mode 3, you have unlimited freedom to define your own template, and this is the most attractive point that pushed me to do it.