GridView Enhancements and fixes in ASP.NET

No.of Views4645
Bookmarked0 times
Downloads 
Votes0
By  MSD   On  15 Jul 2010 10:07:23
Tag : ASP.NET , Grid Controls
Enhancements and fixes that add features: more control over column widths, preventing text wrapping, formatting auto-generated columns.
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

Introduction

Have you ever needed to control the widths of your columns in a GridView especially when the GridView's width is relative to the container (for example: width="100%") and the columns keep getting the total width of the GridView distributed among them? All you want is for each column to take just enough width to display its contents and the remaining width can be allocated to the last column, but that did not work, did it? Have you ever tried using the Wrap="False" in a GridView's RowStyle or HeaderStyle and were surprised it did not work in all browsers? This article is my take at solving these two issues, and it works in both IE and FF.

In addition, I present a method to solve a problem when using automatically generated columns in the GridView. As is known, there is a property of the GridView: AutoGenerateColumns, that when set to true would generate the columns automatically from the DataSource. The problem is that we have limited control (if any) on those generated columns. So for example, if the DataSource contains a Date column, the displayed data would not show as formatted, showing for example (1/1/2008 12:00:00 AM) instead of just (1/1/2008) or (01/01/2008), etc... That is a problem because we cannot (directly) change the formatting to meet our requirements. The best way to solve this would be to inherit from GridView and customize the GridView to our liking. For those (like me) that don't want to deal with another extra reference in their project, I have another way.

Background

My solution depends on JavaScript and DOM. I am using Element Injection into the existing HTML. The code is not that complex, and you don't need to be scared by these intimidating terms. You would need though to know a bit of JavaScript and what DOM (Document Object Model) actually means. If you find you lack such knowledge, a few minutes with Google will save you.

For the auto-generated columns problem, my solution depends on Reflection to set values of members that don't have public accessibility. Reflection has a performance penalty that at situations can be afforded. If you find that my solution has weak performance (which I did not notice, neither did I test for), then try the alternative: Inheritance.

Illustration

Following are a few images that illustrate what my solution does: 

Image Loading

This is what the sample code would look like without my solution  

Image Loading

This is how it looks like with columns formatted, and wrapping not changed 

Image Loading

This is how it looks like with columns formatted and wrapping fixed for the header 

Image Loading

This is when all features are enabled (wrapping fixed for both the header and data rows) 

Image Loading

This is how Date fields appear without formatting 

Image Loading

This is how Date fields appear after formatting is applied

Column Widths and Wrapping

ColumnWidthsAndWrapping.aspx

There are two parts to the solution: the JavaScript which resides in the ASPX page, and the code that registers calls to those functions, which resides in the code-behind of that page.

Let us start with the JavaScript functions:

function formatGrid(el)
{
    el = document.getElementById(el);var numOfCols = 
      el.getElementsByTagName("TR")[1].getElementsByTagName("TD").length;var colGrp = document.createElement("colgroup");var col = document.createElement("col");
    col.setAttribute("span", numOfCols-1);
    col.setAttribute("width", "1");
    col.setAttribute("white-space", "nowrap");
    col.setAttribute("padding-left", "2");
    col.setAttribute("padding-right", "2");
    col.setAttribute("border-width", "2");
    colGrp.appendChild(col);                
    el.insertBefore(colGrp, el.firstChild);                
}

 The function formatGrid receives the ID of an element in the document, which in our case would normally be the GridView. What this function does is format the GridView so that each column gets just enough width to display its contents and the last column gets all the remaining width. Remember, we are usually dealing here with a GridView that has a width of 100%. The code is relatively clear, I will just point out the following:

  1. We are getting the number of columns in the GridView, numOfCols, and using numOfCols - 1 later.
  2. The ColGroup element is responsible for grouping columns and assigning them common properties.
  3. The Col element is a child of the ColGroup element and will override what is set on the ColGroup element, and that is why it is sufficient to set attributes on the Col element (I am using simple terms, for more info: check http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4.1).
  4. The span attribute indicates how many columns the Col element will affect; in our case, we need to restrict the width of all the columns except the last one.
  5. The only required attributes are the span and the width attributes, the others are optional.

The following functions solve the wrapping part of the problem, where we would need something like "First Name" in the header of the GridView to appear on the same line and not wrap and split over two lines. Also, this applies to the data rows where the data can be long, and thus be forced to wrap to another line thus being split across two or more lines. We might need them to appear as a unit on one line. Now, using the following functions, it is easier:

function addNoWrapSpan(el, noWrap)
{var span = document.createElement("span");while(el.childNodes.length > 0)
    {var child = el.firstChild;
        el.removeChild(child);
        span.appendChild(child);
    }if(noWrap)
    span.style.whiteSpace = "nowrap";elsespan.style.whiteSpace = "inherit";
    el.appendChild(span);
}
function setNoWrap(el, noWrapTH, noWrapTD)
{
    el = document.getElementById(el);if(noWrapTH)
    {var allTHs = el.getElementsByTagName("TH");for(var i = 0; i < allTHs.length; i++)
        {
            addNoWrapSpan(allTHs[i], noWrapTH);
        }
    }if(noWrapTD)
    {var allTDs = el.getElementsByTagName("TD");for(var i = 0; i < allTDs.length; i++)
        {
            addNoWrapSpan(allTDs[i], noWrapTD);
        }
    }
}

 The first function addNoWrapSpan moves all the elements inside the provided element el (be it a td or th) to a dynamically generated span element that has the proper style depending on whether noWrap is true or false. The style used is:

span.style.whiteSpace = "nowrap"; 

 if noWrap is true and if it is false, then the following style is set:

span.style.whiteSpace = "inherit";

setNoWrap receives three parameters: el which is the element that we are configuring, noWrapTH that tells us whether or not to allow wrapping for the child THs, and noWrapTD indicating whether or not to allow wrapping on the TDs inside the element el. As you can notice, setNoWrap calls addNoWrapSpan where necessary.

The attached sample project includes a sample GridView:

<asp:GridView ID="GridView1" runat="server"AutoGenerateColumns="False" Width="100%"CssClass="GridClass"><Columns><asp:BoundField DataField="FirstName" HeaderText="First Name" /><asp:BoundField DataField="LastName" HeaderText="Last Name" /><asp:BoundField DataField="Age" HeaderText="Age" /><asp:CommandField ShowSelectButton="True" /></Columns></asp:GridView>

 Simply, it displays the data set in the code-behind and also has a CommandField which has a select LinkButton. Now, the code-behind:

private DataTable BuildDataSource()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("FirstName", typeof(string));
    dt.Columns.Add("LastName", typeof(string));
    dt.Columns.Add("Age", typeof(int));
    
    DataRow dr;
    
    dr = dt.NewRow();
    dr["FirstName"] = "John the first";
    dr["LastName"] = "Doe";
    dr["Age"] = 23;
    dt.Rows.Add(dr);

    dr = dt.NewRow();
    dr["FirstName"] = "Clark";
    dr["LastName"] = "Kent";
    dr["Age"] = 28;
    dt.Rows.Add(dr);return dt;
}

 This is a simple way to show data for test purposes; this will be replaced by code to retrieve data from the database in real case scenarios:

protected override void OnPreRender(EventArgs e)
{base.OnPreRender(e);string formatScript = "";
    formatScript += string.Format("formatGrid('{0}');" +"setNoWrap('{0}', false, true);", 
                    GridView1.ClientID);        
    ClientScript.RegisterStartupScript
        (this.GetType(), "format", formatScript, true);
}

 This is where our JavaScript is put to use. Notice that I am calling setNoWrap and assigning false for the noWrapTH parameter; this means that the header will still wrap if its contents are long, you probably will need to change that to true.

Automatically Generated Columns

AutoGeneratedColumns.aspx

Here I describe a method that allows us to format dates inside automatically generated columns (AutoGenerateColumns =true).

private void FormatDatesInGridView(GridView gv, GridViewRow gvr)
{if (gv.DataSource != null)
    {
        DataTable dt = null;if (gv.DataSource is DataView)
        {
            dt = ((DataView)gv.DataSource).Table;
        }elseif (gv.DataSource is DataSet)
            {
                dt = ((DataSet)gv.DataSource).Tables[0];
            }elseif (gv.DataSource is DataTable)
                {
                    dt = (DataTable)gv.DataSource;
                }if (gvr.RowType == DataControlRowType.DataRow)
        {foreach (TableCell tc in gvr.Cells)
            {
                DataControlFieldCell dcfc = (DataControlFieldCell)tc;if (dcfc.ContainingField is AutoGeneratedField)
                {
                    AutoGeneratedField agf = (AutoGeneratedField)dcfc.ContainingField;if (agf.DataType == typeof(DateTime))
                    {
                        System.Reflection.FieldInfo fi;
                        fi = typeof(BoundField).GetField("_dataFormatString", 
                             System.Reflection.BindingFlags.Instance | 
                             System.Reflection.BindingFlags.NonPublic);
                        fi.SetValue(agf, "{0:dd/MM/yyyy}");

                        fi = typeof(DataControlField).GetField("_statebag", 
                             System.Reflection.BindingFlags.Instance | 
                             System.Reflection.BindingFlags.NonPublic);
                        ((StateBag)fi.GetValue(agf))["DataFormatString"] ="{0:dd/MM/yyyy}";

                        System.Reflection.MethodInfo mi;
                        mi = typeof(BoundField).GetMethod("OnFieldChanged", 
                             System.Reflection.BindingFlags.NonPublic | 
                             System.Reflection.BindingFlags.Instance);
                        mi.Invoke(agf, null);
                        ((BoundField)agf).HtmlEncode = false; //Fix for Dates Formatting}
                }
            }
        }
    }
}

 The method called FormatDatesInGridView is to be called from inside the RowCreated event handler of the GridView to be formatted. This method receives two parameters: the GridView and the current row. The calling event handler would look like:

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{if(e.Row.RowType == DataControlRowType.DataRow)
        FormatDatesInGridView(GridView1, e.Row);
}

 The method first determines the DataSource of the GridView (could be modified if you have other types as DataSource). Then, it checks all cells of the current GridViewRow, and if the type of the ContainingField of the AutoGeneratedField is DateTime, we do the following using Reflection:

  • set _dataFormatString to "{0:dd/MM/yyyy}" (could be changed to meet requirements).
  • set Viewstate["DataFormatString"] to the same value "{0:dd/MM/yyyy}" by setting the value of _statebag["DataFormatString"].
  • call the OnFieldChanged method to apply these changes (this method eventually causes Binding to occur).
  • Update: apparently, HtmlEncode is sometimes true in some environments, which prevents us from controlling the formatting of the dates. That is why I added the line to set it to false.

That's it, the date fields are now formatted. How I came up with these steps is by using Reflector and checking how the classes work internally.

Sample Project Source

Download source files -4 kb

 
Sign Up to vote for this article
 
About Author
 
MSD
Occupation-Software Engineer
Company-
Member Type-Fresh
Location-Lebanon
Joined date-31 Jan 2010
Home Page-
Blog Page-http://msd-bml.blogspot.com
 
 
Other popularSectionarticles
Comments
By:DougDate Of Posted:8/16/2010 2:01:34 PM
How to use with AJAX
So I combined the 3 GridViews and only have 1 where I also added a Select button and put the GridView in an Update Panel (AJAX). When I either select a different criteria from the trigger control (DropDownList) OR click on the select button in any row, the GridView goes back to wrapping (even though I have ALL templates set to No Wrap). How would I call your script to have it run as part of the postback to keep everything not wrapped? Thanks.
By:DougDate Of Posted:8/9/2010 9:55:12 AM
Nice Solution
This worked great! I was having problems with aligning 3 GridViews where setting all Wrap settings to false would not prevent wrapping. I implemented this solution for all three GridViews and everything lines up and the wrapping is no longer. Thanks.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top