Creating a Custom DataGridColumn ClassBy John Dyer
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
DataSourceto a particular column in the rendered DataGrid.
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
Descriptionof the top 10 FAQs from ASPFAQs.com:
This display works really well. But what if we wanted to limit how much of the
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
Descriptioncolumn 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:
This function takes the string of text from the database table and a number,
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
Substring method of the
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
DataBinder.Eval() method into the
Truncate(input, characterLimit) function
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!