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
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
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
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) _
e.Command.Parameters("@CustomerType").Value = "S"
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
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.
- 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.