Customize the Grid

asp:Feature

LANGUAGES: C# | VB.NET

ASP.NET VERSIONS: 2.0

Customize the Grid

Tailor Your Next Project

By Oscar Peli

At the end of last year, my chief asked me to build a datamanagement application to manage some tabular data. I did it in a couple of daysusing the GridView control. When I submitted the application to my chief, henoticed two problems. First he noticed that the GridView default command linkcaptions (Delete, Cancel, etc.) were very equivocal. This is really true herein Italy becausewe say Cancella for Delete and Annulla for Cancel ... so Cancella and Cancel can be misunderstood very easily.

Also, he noticed that a delete command without any kind ofconfirmation message was not good. These remarks were the starting point of mycontrol extension work. In this article I want to show you what I ve done; you llsee how to customize GridView command link captions and how to add aconfirmation dialog box to the GridView delete command.

Properties & Overrides

To get you started, I want to outline some guidelines you mustfollow when you want to extend base controls by which I mean adding someadvanced capabilities that the base control doesn t provide. For datamanagement controls like GridView or DetailsView, and relative bound controls,you may want to change the command link captions (as you ll see in thisarticle) or you may want to add the ability to configure your GridView via XMLat run time. If you think about bound fields you may want to add somevalidation capabilities to your controls, or maybe you want to build new kindsof bound controls from scratch.

As you ll see, you can summarize the process of buildingnew controls in the Properties & Overrides paradigm. When extending anexisting control to build a special purpose one, you must implement specialbehaviors that the base control doesn t provide. To describe these behaviorsyou normally need to define new control properties. For example, you might needto add an EditLinkButtonText property to carry the custom link command captionfor the GridView Edit command or add an XmlConfigFileUrl property to carry thelocation of the XML document that you ll use to configure the GridView at run time.Another example would be to use a RegularExpressionValidationString property tocarry the regular expression you ll use to check a bound control user input.

Once you ve defined the control behaviors you have toimplement them. To do so you must override lifecycle methods that represent thecontrol building stages from the request to the response. If you want to extenda databound control like GridView you must override methods like OnRowCreated,which handles the RowCreated event and is called every time a row in theGridView control is created. (This allows you to provide code that performs acustom routine, such as adding custom content to a row or overriding baseproperties.)

If you want to extend BoundField controls you mustoverride the InitializeCell method that, as you can read in the MSDN Library,is implemented by BoundField-derived types to add text and controls to aTableCell object of a data control that uses tables to display a userinterface. These data controls create the complete table structure row-by-rowwhen the control s CreateChildControls method is called. The InitializeCellmethod is called by the InitializeRow method of data controls, such asDetailsView and GridView. So, to extend validation-enabled BoundFields, you mustadd in method validation controls bound to the TextBox created by the basemethod (I ll address the implementation of such a control in a future article).

If you want to build a new kind of control, you mustoverride the ExtractValuesFromCell method that is implemented by types derivedfrom DataControlField to associate the current field with a value, ifapplicable. The field/value pair is stored in the dictionary collection that ispassed to the method, which is called by the ExtractRowValues method of datacontrols such as DetailsView and GridView. In other words, this method allowsthe binding container controls, like GridView or DetailsView, to retrieve inputvalues when the control is in edit or insert mode.

The last method override I want to talk about isOnDataBindField, which is a helper method used to bind the value of a field inthe data source to a corresponding cell in the BoundField object. This lets yourepresent data in a custom way, such as showing a custom image derived from thevalue of the corresponding field.

This is only a small list of what you can override;surfing the MSDN Library can give you some ideas of where to implement yourcustom control behaviors. In this article you ll see an example of GridViewcustomization.

The PoweredGridView Class

Let s say you need to implement a GridView control thatdisplays custom link command captions and shows a confirmation dialog box whenyou try to delete a data row. The first thing you need to do is create a classthat inherits from the GridView class (see Figure 1).

C#

using System;

using System.ComponentModel;

using System.Web.UI.WebControls;

namespace Powered03Cs

{

 public classPoweredGridView : GridView

 {

...

 }

}

VB.NET

Imports System.Web.UI.WebControls

Public Class PoweredGridView

   Inherits GridView

...

End Class

Figure 1: Create aclass that inherits from the GridView class to build a PoweredGridView control.

Then, following the Properties & Overrides paradigm,you must define new properties to carry the caption of each link command. Youcan see one of those property implementations in Figure 2, where the property valueis stored in the ViewState to preserve it in the post backs. Note that you candefine a default value for the property that will be used if you don t specifya value in the GridView declaration or elsewhere in code. In addition to theEditLinkButtonText, it would also be a good idea to create one more propertythat maps to the confirm message that will be displayed to the user when theytry to delete a data row.

C#

[Description("Get or Set Link Button text"),

Category("Behavior"), DefaultValue("Modifica")]

public string EditLinkButtonText

{

 get

 {

 object o =ViewState["EditLinkButtonText"];

 return (o != null ?)o.ToString() : "Modifica";

 }

 set {ViewState["EditLinkButtonText"] = value; }

}

VB.NET

Public Property EditLinkButtonText() As String

 Get

 Dim o As Object =ViewState("EditLinkButtonText")

 If (IsNothing(o)) Then

  Return"Modifica"

 Else

  Return CStr(o)

 End If

 End Get

 Set(ByVal value As String)

 ViewState("EditLinkButtonText") = value

 End Set

End Property

Figure 2: The EditLinkButtonTextproperty stores the caption of the Edit command.

Once you ve defined the properties, you have to managethem. Because the link commands are added to every data row, you must overridethe OnRowCreated method. The command links are displayed on the first column ofevery data row, so first you must check if the current row is a data row; then,if the first cell of the current row contains controls and the first control isa LinkButton, you must loop the control collection looking for every LinkButton.Every LinkButton has a command name associated to it, so a simple switchstatement (select-case in VB.NET) can help in selecting which caption tooverride. The final step is to set the LinkButton Text property with therelative custom property value.

To manage the delete confirmation process, add a simpleline of code in the switch delete branch that sets the OnClientClick propertyto specify additional client-side script that executes when the LinkButtoncontrol s Click event is raised. When the user clicks Delete a JavaScriptconfirmation dialog box will prompt them with the custom confirmation messageyou defined in the relative property (or the default value). If the user clicksthe Yes button in the dialog box, the delete process is executed; otherwise thecommand is aborted and the page doesn t post back (see Figure 3).

C#

protected override void OnRowCreated(GridViewRowEventArgs e)

{

 if (e.Row.RowType ==DataControlRowType.DataRow)

 {

 if(e.Row.Cells[0].Controls.Count > 0 &&

     e.Row.Cells[0].Controls[0]is LinkButton)

 {

  for (int i = 0; i   {    if(e.Row.Cells[0].Controls[i] is LinkButton)    {     LinkButton lb;     lb =(LinkButton)e.Row.Cells[0].Controls[i];     switch (lb.CommandName)     {      case"Edit":       lb.Text =EditLinkButtonText;       break;      case"Update":       lb.Text =UpdateLinkButtonText;       break;      case"Cancel":       lb.Text =CancelLinkButtonText;       break;      case"Delete":       lb.Text =DeleteLinkButtonText;         lb.OnClientClick ="return confirm('" +                          ConfirmDeleteMessage + "');";       break;      case"Select":       lb.Text =SelectLinkButtonText;       break;     }    }   }  }  }  base.OnRowCreated(e); }   VB.NETProtected Overrides Sub _ OnRowCreated(ByVal e AsGridViewRowEventArgs)  If (e.Row.RowType =DataControlRowType.DataRow) Then If(e.Row.Cells(0).Controls.Count > 0 And _   TypeOf(e.Row.Cells(0).Controls(0)) Is LinkButton) Then  For i As Integer = 0 Toe.Row.Cells(0).Controls.Count - 1   If TypeOf(e.Row.Cells(0).Controls(i)) _      Is LinkButton Then    Dim lb As LinkButton =_    CType(e.Row.Cells(0).Controls(i), LinkButton)     Select Caselb.CommandName      Case "Edit"       lb.Text =EditLinkButtonText     Case"Update"       lb.Text =UpdateLinkButtonText     Case"Cancel"       lb.Text =CancelLinkButtonText     Case"Delete"       lb.Text =DeleteLinkButtonText      lb.OnClientClick ="return confirm('" + _                          ConfirmDeleteMessage + "');"      Case"Select"       lb.Text =SelectLinkButtonText     End Select    End If   Next  End If End If MyBase.OnRowCreated(e) End SubFigure 3: Overridethe OnRowCreated method to customize link command captions.  PoweredGridView at Work To see the new PoweredGridView in action, first compilethe class in a class library dll, then use it inside an aspx page (you can findthe entire Visual Studio 2005 solution in the accompanying download files; seeend of article for details).   The PoweredGridView control will bind to a table of the AdventureWorkssample database that ships with SQL Server 2005 (to run this example you candownload Microsoft SQL Server 2005 Express Edition at http://www.microsoft.com/downloads/details.aspx?familyid=220549b5-0b07-4448-8848-dcc397514b41&displaylang=enand the AdventureWorks sample database at http://www.microsoft.com/downloads/details.aspx?familyid=9697AAAA-AD4B-416E-87A4-A8B154F92787&displaylang=en).   Remember to add a SQL Server login so the connectionstring you find in web.config file works correctly; otherwise, change theconnection string with a suitable log-in account:  ID=adWorksUser;Password=passguor   To use the new control inside the page, you must registerit at Page level with a Register directive, which creates an associationbetween a tag prefix and the control:  <%@ Register Assembly="Powered01Cs"    Namespace="Powered01Cs" TagPrefix="Powered01Cs"%>  <%@ Register Assembly="Powered01Vb"    Namespace="Powered01Vb" TagPrefix="Powered01Vb" %>   At this point you can use it like any other control thatshows the control declaration, as you can see in Figure 4.   DataSourceID="SqlDataSource1"AutoGenerateColumns="false"    AutoGenerateDeleteButton="true"    AutoGenerateEditButton="true"    AutoGenerateSelectButton="true"DataKeyNames="VendorId"    SelectedRowStyle-CssClass="GRDSelectedItem"    AlternatingRowStyle-CssClass="GRDAlternatingItem"    RowStyle-CssClass="GRDItem"    HeaderStyle-CssClass="GRDHeader"    BorderColor="black" BorderWidth="1"GridLines="Both"    AllowPaging="true" PageSize="20"    SelectLinkButtonText="w hlen"    DeleteLinkButtonText="Delete"    CancelLinkButtonText="suprimir"    UpdateLinkButtonText="p ivitt " >         HeaderText="Id" ReadOnly="true" />         HeaderText="Account Number" />     Figure 4: ThePoweredGridView declaration where you define custom link command captions.   Now that you ve defined all the link command captions,leave the default delete confirmation message. Figure 5 shows the control atwork.  
Figure 5: PoweredGridView at work.  A Multilingual Grid Some of you are probably wondering why it s necessary todefine properties to manage an overwrite process when you can simply hard codenew values on the OnRowCreated method. Well, first of all, it s better never tohard code values. Using properties makes it easier to change the text value ifthe customer wishes or if you need to deploy the application in multiplelanguages.   For large multilingual enterprise applications you shouldthink about globalization, a concept for which the .NET Framework providesextensive support (for more information on globalization point your browser to http://msdn.microsoft.com/library/default.asp?url=/library/en-us/vbcon/html/vxoriGlobalizationLocalizationNamespaces.asp).   For a simpler application you can manage multilingual behaviorwith themes, which are a collection of properties that define the appearance ofpages and controls in your Web site (for more information on themes point yourbrowser to http://msdn2.microsoft.com/en-us/library/wcyt4fxb.aspx).   A theme can include skin files, which define propertysettings for ASP.NET Web server controls; Figure 6 shows a skin file for theEnglish version.  <%@ Register Assembly="Powered03Cs"    Namespace="Powered03Cs"    TagPrefix="Powered03Cs" %>  SelectedRowStyle-CssClass="GRDSelectedItem"  AlternatingRowStyle-CssClass="GRDAlternatingItem"  RowStyle-CssClass="GRDItem"  HeaderStyle-CssClass="GRDHeader"  BorderColor="black"BorderWidth="1" GridLines="Both"  EditLinkButtonText="Edit"CancelLinkButtonText="Cancel"  UpdateLinkButtonText="Update"  SelectLinkButtonText="Select"  DeleteLinkButtonText="Delete"  ConfirmDeleteMessage="Delete data?" >       HeaderText="Id" ReadOnly="true" />     HeaderText="AccountNumber" />     Figure 6: A skin filefor the PoweredGridView control.   Figure 7 shows a sample page where you can choose alanguage to see a localization version of the PoweredGridView control.  
Figure 7: Choose a language andchange the grid captions.  Conclusion A real world problem was the starting point for thisarticle, which demonstrated how to customize the command link caption in aGridView control and how to add a client-side confirmation dialog box to thedelete command. I defined some guidelines for building new controls with the Properties& Overrides paradigm and explained how to define custom control behaviorsand where to implement them. Finally, you saw that customizing the GridViewusing this method is not only a way to display captions in your language but isalso a way to prepare your application for use in a multilingual environment.   The sample codeaccompanying this article is available for download.  Oscar Peli is a.NET Solution Architect and the Mobile Devices chief in Ancona Town Council (Italy).An assistant at Macerata University,he develops Web-based applications to support research projects (http://reti.unimc.it).You can reach him at mailto:[email protected].