Click here to Skip to main content
13,197,105 members (50,196 online)
Click here to Skip to main content
Add your own
alternative version


26 bookmarked
Posted 24 Oct 2013

An Expandable .Net GridView

, 24 Oct 2013
Rate this:
Please Sign up or sign in to vote.
An expandable .NET GridView control


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.


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.


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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Sitang Ruan
Software Developer (Senior) TrafficTech Inc.
Canada Canada
I am Sitang Ruan, a .Net developer focus on web application development for 6 years. I like to write elegant and efficient codes to provide user a smooth and solid experience. I also like to take very complicated and challenging tasks.

You may also be interested in...

Comments and Discussions

QuestionWinform Version Pin
BEBE201123-Jun-16 6:56
memberBEBE201123-Jun-16 6:56 
QuestionDemoGrid1 DemoGrid2 DemoGrid3 Pin
Don289-Sep-14 10:54
memberDon289-Sep-14 10:54 
AnswerRe: DemoGrid1 DemoGrid2 DemoGrid3 Pin
Sitang Ruan9-Sep-14 14:52
professionalSitang Ruan9-Sep-14 14:52 
GeneralRe: DemoGrid1 DemoGrid2 DemoGrid3 Pin
Don2828-Sep-14 9:08
memberDon2828-Sep-14 9:08 
GeneralRe: DemoGrid1 DemoGrid2 DemoGrid3 Pin
Don2828-Sep-14 15:13
memberDon2828-Sep-14 15:13 
GeneralRe: DemoGrid1 DemoGrid2 DemoGrid3 Pin
Sitang Ruan29-Sep-14 3:21
professionalSitang Ruan29-Sep-14 3:21 
QuestionNice work Pin
Mike Hankey31-Aug-14 9:31
professionalMike Hankey31-Aug-14 9:31 
Questionerror..not able to identify the expandablegridview element Pin
Member 1060777923-Feb-14 18:11
memberMember 1060777923-Feb-14 18:11 
AnswerRe: error..not able to identify the expandablegridview element Pin
Sitang Ruan24-Feb-14 3:20
professionalSitang Ruan24-Feb-14 3:20 
GeneralRe: error..not able to identify the expandablegridview element Pin
Member 1060777924-Feb-14 4:39
memberMember 1060777924-Feb-14 4:39 
GeneralRe: error..not able to identify the expandablegridview element Pin
Sitang Ruan29-Sep-14 3:24
professionalSitang Ruan29-Sep-14 3:24 
QuestionI hesitate to use this with the presidential sample :-> Pin
Member 281990310-Feb-14 15:45
memberMember 281990310-Feb-14 15:45 
GeneralMy vote of 5 Pin
maheshnakka4-Nov-13 1:28
professionalmaheshnakka4-Nov-13 1:28 
Used it in my project as mode 2 Working very well thanks.........

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.171020.1 | Last Updated 24 Oct 2013
Article Copyright 2013 by Sitang Ruan
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid