An extended GridView that allows inserting rows

• Download demo project - 21 Kb
• Download source - 25.1 Kb

Introduction

This article describes (yet another) insertable GridView. You probably know that the GridView control is the preferred control in ASP.NET v.2 to display and edit tabular data. Although GridView is improved over the previous DataGrid control, it still lacks the capability of inserting new rows. Microsoft says that you can use the FormView or DetailsView components to insert a new row. However, often it is convenient to add a new row in-place. The modified web server GridView control I present makes this possible by adding a 'plus' image in the footer row. When pressed, a new row is added to the database with default values, and the grid shows the new row in editing mode, at the bottom of the last grid page (see image below). If you press the Cancel button, the new row is deleted from the database. The sorting of the GridView is restored after editing the new row.

Besides the insert functionality, the code automatically adds button images in the first column of the grid for Select, Edit, and Delete operations.

Using the code

The modified control is implemented as a custom server control that inherits the GridView control. To use it, add a reference to the PSControls.dll file or the PSControls project. If you use the project, you can further customize the control, and also localize the control messages by creating a Messages.XX.resx where XX is your language.

Then, drop a PSGridView control on your .aspx form and configure it using the smart tag menu. The first field (column) must be an empty TemplateField because the code creates the Add, Select, Edit, Delete, Update, and Cancel buttons there. An example of configuring the fields using Visual Studio 2005 is shown below:

You can determine whether the Add, Select, Edit, and Delete buttons are created, by setting the boolean CanAdd, CanSelect, CanEdit, and CanDelete custom properties of the control, respectively. Additionally, you can disable all editing buttons by setting the IsEditable property to False. By default, all these properties are set to True.

The control adds a new row to the database when the Add button is pressed. So, if the table where you are inserting has 'not null' column(s), an exception will be thrown, unless you put default values for these columns in the Inserting event of the data source control. An example is shown below:

Protected Sub sqlCustomers_Inserting(ByVal sender As Object, _
      ByVal e As System.Web.UI.WebControls.SqlDataSourceCommandEventArgs) _
      Handles sqlCustomers.Inserting
    e.Command.Parameters("@CustomerType").Value = "S"
End Sub

To have the images appear as in the examples, copy the images folder of the demo at the root of your Web application. Alternatively, specify your own images by means of the AddImageUrl, EditImageUrl, DelImageUrl, SelImageUrl, UpdateImageUrl, and CancelImageUrl properties.

Update: I realized after the initial publication that the insert functionality works correctly only if the primary key of the new row is always incremented. This can be easily implemented by defining an identity (auto-increment) primary key column, e.g., ID int NOT NULL IDENTITY(1,1) PRIMARY KEY, .... Additionally, you must create an empty template for the plus icon to appear when the table has no rows. You can do it with Visual Studio, or by inserting a <EmptyDataTemplate></EmptyDataTemplate> tag into the controls declaration.

History

• Version 1.0 - Basic insertable row functionality. Editing controls.
• Version 1.01 - Updates so that changes of the CanXXX properties on the PreRender event handler takes effect on the control.