Creating a Custom DataGridColumn Class

By John Dyer

Introduction

If you a regular visitor to 4Guys, you've no doubt heard of or have been reading Scott Mitchell's great article series on how to use, edit and customize the appearance of a DataGrid, An Extensive Examination of the DataGrid Web Control. This article series has looked at a plethora of topics, including displaying a DataGrid, providing editing and sorting support, adding client-side actions to items in a DataGrid, an so on. In Part 2 of the article series, Scott examined the DataGrid's BoundColumn column control, which can be used to tie a particular field of the DataGrid's DataSource to a particular column in the rendered DataGrid.

- continued -

In this article we'll look at some more options for controlling the way text data is formatted in a column. Specifically, we'll create our own custom column (by inheriting the BoundColumn class) that will display only a specified number of characters in a DataGrid column, ensuring that the column doesn't split words in half, but only stops at spaces. (For example, if the data in a column is, "4Guysfromrolla.com is a great site," and we specify that the column should only show 25 characters, then the output will be "4Guysfromrolla.com is a" (even though 25 characters would end with the "g" in great, our algorithm is smart enough to not include it because we don't want to split words...)).

The Basics: Displaying the Desired Data Using a BoundColumn Control

Before we delve into creating our own custom column class, let's first look at an example that simply uses a BoundColumn control to display the data. For this demo, we set up a simple DataGrid that displays the ID and Description of the top 10 FAQs from ASPFAQs.com:

<form runat="server"> <asp:DataGrid id="FAQs" runat="server" AutoGenerateColumns="False" CellPadding="2" HeaderStyle-BackColor="Black" HeaderStyle-ForeColor="White" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Bold="True"> <Columns> <asp:BoundColumn HeaderText="ID" DataField="FAQID" /> <asp:BoundColumn HeaderText="FAQ Description" DataField="Description" /> </Columns> </asp:datagrid> </form>

[View a Live Demo!]

This display works really well. But what if we wanted to limit how much of the Description was shown to keep our table size down? We might want to only show the first 50 characters or the first 10 words. In order to do this, we need a way to control the output in a more powerful way than the BoundColumn allows us to do.

Using a TemplateColumn to Control the Length of a Column

One way we can control the length of the DataGrid's Description column is to use a TemplateColumn and create a function that will handle truncating the data in the column. Specifically, we'd need to create a function that accepted a string as an input (the value of the current database field being bound to the DataGrid) and an integer, specifying the number of characters to limit the input to. This function would need to return a string, which would be the HTML that was displayed. Such a function, Truncate(input, characterLimit) is given below:

string Truncate(string input, int characterLimit) { string output = input; // Check if the string is longer than the allowed amount // otherwise do nothing if (output.Length > characterLimit && characterLimit > 0) { // cut the string down to the maximum number of characters output = output.Substring(0,characterLimit); // Check if the character right after the truncate point was a space // if not, we are in the middle of a word and need to remove the rest of it if (input.Substring(output.Length,1) != " ") { int LastSpace = output.LastIndexOf(" "); // if we found a space then, cut back to that space if (LastSpace != -1) { output = output.Substring(0,LastSpace); } } // Finally, add the "..." output += "..."; } return output; }

This function takes the string of text from the database table and a number, characterLimit. The first thing the function does is check that the number of characters in the string is actually longer than the characterLimit and that the characterLimit is greater than 0. If the string is longer than the characterLimit, then it is cut down to that length (using the Substring method of the String class).

Once that's done we need to see if we are in the middle of a word. First, we check if the last letter of our output string is the last letter of a word by checking if the next letter is a space. If it is a space, then we aren't in the middle of a word. (Here it might be a good idea to check for other punctuation, for instance periods or commas, but for simplicity, we are just checking for spaces.) If we have cut into the middle of a word, we need to find the last space before the end of the string and shorten the string to that length. The LastIndexOf method checks for the last occurrence of a string in a string. Here, it checks for the last space character in the string. If that last space is found, the string is shortened at that point. Finally, ... is added to the end of the string.

To use the Truncate(input, characterLimit) function to limit the length of a DataGrid column, you'll need to include the Truncate(input, characterLimit) function in your ASP.NET Web page (or code-behind page). In the DataGrid's TemplateColumn you'll need to add an ItemTemplate and, in that ItemTemplate, use the data binding syntax passing in the value returned by the DataBinder.Eval() method into the Truncate(input, characterLimit) function like so:

<form runat="server"> <asp:DataGrid id="FAQs" runat="server" AutoGenerateColumns="False" CellPadding="2" HeaderStyle-BackColor="Black" HeaderStyle-ForeColor="White" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Bold="True"> <Columns> <asp:BoundColumn HeaderText="ID" DataField="FAQID" /> <asp:TemplateColumn HeaderText="FAQ Description"> <ItemTemplate> <%# Truncate(DataBinder.Eval(Container.DataItem, "Description").ToString(),10) %> </ItemTemplate> </asp:TemplateColumn> </Columns> </asp:datagrid> </form>

[View a Live Demo!]

Now that we've seen how to truncate a DataGrid's column using a TemplateColumn, let's turn our attention to accomplishing the same by building a custom class that is derived from the BoundColumn class. In Part 2 of this article we'll examine how to do just this!

Read Part 2!