The Asp.Net GridView control is a versatile control when a web based application requires tabular data that can be manipulated with. It enables not just presentation of data but also extended functionality to perform selecting, editing, deleting and paging to name a few.
ASP.NET Gridview Limitaions
I recently came across a requirement which required providing functionality to edit multiple rows in the GridView. The GridView by default provides the ability to edit a single row at a given instance which was not sufficient. Upon my research I came across few examples on the web that suggested the use of a page wide variable which could be combined with the Visible property of controls added within the ItemTemplate of the GridView control similar to the following,
<ItemTemplate>
<asp:Label ID="lblProductName" Visible='<%# !(bool) IsEditMode %>' runat="server" Text='<%# Eval("ProductName") %>' />
<asp:TextBox ID="txtProductName" Visible='<%# IsEditMode %>' runat="server" Text='<%# Eval("ProductName") %>' />
</ItemTemplate>
The
IsEditMode property in the above code segment is a page wide variable which will be set to true upon the user requesting to edit rows. This method has several drawbacks as follows,
- Changes all rows to edit mode. Cannot selectively specify which rows to edit.
- All controls are placed within the ItemTemplate tag of the GridView thus making it difficult to clearly differentiate between item and edit controls.
- If many GridViews are available the developer is required to take responsibility of managing global properties that enable the edit mode of each grid.
Enabling ASP.NET Gridview Mulitiple Row Edit
In order to rectify this I spent some time trying to extend the GridView control which mitigates the above mentioned drawbacks and enable multiple edit. I will go thru the most important code with you that enable these features in order to help you understand. You can
download the code from here.
Step 1: Adding the check box column for row selection
In order to provide the user with the ability to select the rows to be edited it was evident that a checkbox column was required. This is achieved by adding a TemplateField to the GridView control where the TemplateField instances ItemTemplate and HeaderTemplate properties to an implementation that contains a CheckBox control for header and row selection, thereby adding the constructed TemplateFiled to the GridViews column collection. In essence what we are required to do is create a class that implements the ITemplate interface in the System.Web.UI namespace which will provide the method stubs for our custom implementation of the TemplateField instances ItemTemplate and HeaderTemplate. Listed in the below code block is the implementation of the custom CheckBoxTemplate,
///<summary>
/// The selector check box template colum class.
/// </summary>
public class CheckBoxTemplate : ITemplate
{
private ListItemType Type { get; set; }
///<summary>
/// Initializes a new instance of the class.
/// </summary>
///The item type.
public CheckBoxTemplate(ListItemType type)
{
this.Type = type;
}
public void InstantiateIn(Control container)
{
switch (Type)
{
case ListItemType.Header: goto default;
case ListItemType.Item: goto default;
default:
CheckBox chkSelector = new CheckBox();
chkSelector.Checked = false;
// The selector attribute is used by the JS code in MultiEditGridView.js file.
chkSelector.InputAttributes.Add("selector", Type == ListItemType.Header ? "headerCheckBox" : "rowCheckBox");
// Call the appropriate function in the MultiEditGridView.js file based on the checkbox style.
chkSelector.InputAttributes.Add("onClick", Type == ListItemType.Header ? "MultiEditHeaderCheckBoxSelect(this)" : "MultiEditRowCheckBoxSelect(this)");
container.Controls.Add(chkSelector);
break;
}
}
}
Note the constructor of the class that requests a ListItemType type in System.Web.UI.WebControls namespace to differentiate between the types of templates being created. The reason for this is because I required different client side behavior via JavaScript for the header checkbox and row level checkboxes such that when the header checkbox is checked all corresponding row level check boxes are checked and when all row level checkboxes are selected the header checkbox is checked. This implementation is performed in the InstatiateIn method at line 17. Last but not least to add the checkbox column to the grid we are required to create a TemplateField instance that has its ItemTemplate and HeaderTemplate set to an implementation of the custom CheckBoxTemplate class. This is performed in the overridden CreateColumns(…., ….) method of the MultiEditGridView class. When adding the customized TemplateField we need to verify that the check box column is always the first column in the grid. The following code block lists the code in achieving this aspect,
Note the highlighted rows in the code block above. Since we need to make sure the customized checkbox TemplateField is added as the first column we first request the base.GridView base.CreateColumns(…., ….) in creating the default columns fields (line 3) and finally insert the customized TemplateField at the first position (line 11).
Step 2: Switching the selected rows to edit mode
Upon the user selecting several/all checkboxes we need to toggle the stated of each row likewise. This is accoumplished in the overridden CreateRow(…., …., …., ….) method. The following code block details this,
protected override ICollection CreateColumns(PagedDataSource dataSource, bool useDataSource)
{
ArrayList columnCollection = (ArrayList)base.CreateColumns(dataSource, useDataSource);
// Appends an additional column to the beginining of the grid if multi edit is enabled.
if (EnableMultiEdit)
{
SelectorTemplateFiled.HeaderTemplate = new CheckBoxTemplate(ListItemType.Header);
SelectorTemplateFiled.ItemTemplate = new CheckBoxTemplate(ListItemType.Item);
columnCollection.Insert(0, SelectorTemplateFiled);
}
return columnCollection;
}
Note the if condition (Line 4). It verifies if the grid is currently in edit mode and if the current row index is contained in the EditIndexes collection, effectively toggling the ItemTemplate or EditTemplate of the grid row (line 6 and line 9).
Step 3: Providing an overloaded DataBind() method
The GridView controls DataBind() method will not provide an indication if the grid is required to toggle edit mode on/off. Hence we need to overload the DataBind() by providing a DataBind(….) method to provide support for the developer to if required toggle the edit mode on/off. Listed below is the code block that achieves this,
protected override GridViewRow CreateRow(int rowIndex, int dataSourceIndex, DataControlRowType rowType, DataControlRowState rowState)
{
// Enbles the edit template if any of the checkbox indexes are selected.
if (EditFlag && EditIndexes.Contains(rowIndex))
{
return base.CreateRow(rowIndex, dataSourceIndex, rowType, DataControlRowState.Edit);
}
else
return base.CreateRow(rowIndex, dataSourceIndex, rowType, rowState);
}
Based on the isEtidEnabled parameter of the DataBind(….) method the MultiEditGridView will toggle edit mode as specified in the earlier section. This method initializes the properties that will be used on by the overridden CreateRow(…., …., …., ….) method. Note the foreach loop where the EditIndexes are populated based on the selection of the custom checkbox TemplateField. Finally we call the GridView controls DataBind() method to perform the usual binding which will call the overridden methods in sequence.
Step 4: Additional Information
The custom checkbox TemplateField column related JavaScript is located in the MultiEditGridView.js file and in order to render the script when the control it is require that we register the script on the page. Listed below is code block that achieves this.
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
// Register the JS on page.
Page.ClientScript.RegisterClientScriptResource(typeof(CustomControls.MultiEditGridView), "CustomControls.MultiEditGridView.js");
}
Note the RegisterClientScriptResouce(…., ….) method which specifies which type of control will register the script (MultiEditGridView in this case) and the name of the resource to be registered. When using this method it is important that the MultiEditGridView.js is set to be an Embedded Resource under the properties window. Additionally it is also important that the following code is added in the AssemblyInfo.cs file for the required functionality,
// Add the MultiEditGridView.js as a web resource.
[assembly: WebResource("CustomControls.MultiEditGridView.js", "text/javascript")]
Step 5: Using the MultiEditGridView control
In order to use the MultiEditGridView control add the CustomControls project to the web solution you are working on and add a reference to the CustomControls project. Rebuild the whole solution. Go ahead and drag the MultiEditGridView to your page. Create the required template fields based on datasource.
NOTE: The embeded JavaScript of the MultiEditGridView is based on JQuery. Hence you will need to have a refference to the JQuery API from your web application.
Summary
Listed below is an example of a sample implementation (Click to expand the code section), Products.aspx page
Products.aspx page
<script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script></pre>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Products.aspx.cs" Inherits="MultiEditGridViewDemo.Products" %>
<%@ Register Assembly="CustomControls" Namespace="CustomControls" TagPrefix="cc" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Multi Edit Grid View Demo</title>
<script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<cc:MultiEditGridView ID="MultiEditGridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="Product Name">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtName" runat="server" Text='<%# Eval("Name") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Product Category">
<ItemTemplate>
<asp:Label ID="lblCategory" runat="server" Text='<%# Eval("Category") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtCategory" runat="server" Text='<%# Eval("Category") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Product Description">
<ItemTemplate>
<asp:Label ID="lblDescription" runat="server" Text='<%# Eval("Description") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtDescription" runat="server" Text='<%# Eval("Name") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Is Available">
<ItemTemplate>
<asp:CheckBox ID="chkIsAvailable" runat="server" Checked='<%# Eval("IsAvailable") %>' Enabled="false">
</asp:CheckBox>
</ItemTemplate>
<EditItemTemplate>
<asp:CheckBox ID="chkIsAvailable" runat="server" Checked='<%# Eval("IsAvailable") %>'>
</asp:CheckBox>
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</cc:MultiEditGridView>
<br />
<asp:Button ID="btnEdit" runat="server" OnClick="btnEdit_Click" Text="Edit" />
<asp:Button ID="btnUpdate" runat="server" OnClick="btnUpdate_Click" Text="Update" />
</form>
</body>
</html>
Products.aspx.cs page
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace MultiEditGridViewDemo
{
public partial class Products : System.Web.UI.Page
{
public bool IsEdit { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridData(false);
}
}
private void BindGridData(bool isEnableEdit)
{
List productList = new List {
new Product{ ID=1, Name="Product 1", Category="Category 1", Description="Product 1 - Category 1", IsAvailable=false },
new Product{ ID=1, Name="Product 2", Category="Category 4", Description="Product 2 - Category 4", IsAvailable=true },
new Product{ ID=1, Name="Product 3", Category="Category 3", Description="Product 3 - Category 3", IsAvailable=true },
new Product{ ID=1, Name="Product 4", Category="Category 1", Description="Product 4 - Category 1", IsAvailable=false },
new Product{ ID=1, Name="Product 5", Category="Category 5", Description="Product 5 - Category 5", IsAvailable=true },
new Product{ ID=1, Name="Product 6", Category="Category 6", Description="Product 6 - Category 6", IsAvailable=true },
new Product{ ID=1, Name="Product 7", Category="Category 2", Description="Product 7 - Category 2", IsAvailable=false },
new Product{ ID=1, Name="Product 8", Category="Category 5", Description="Product 8 - Category 5", IsAvailable=true },
new Product{ ID=1, Name="Product 9", Category="Category 3", Description="Product 9 - Category 3", IsAvailable=true },
new Product{ ID=1, Name="Product 10", Category="Category 3", Description="Product 10 - Category 3" , IsAvailable=false }
};
MultiEditGridView1.DataSource = productList;
MultiEditGridView1.DataBind(isEnableEdit);
}
protected void btnEdit_Click(object sender, EventArgs e)
{
BindGridData(true);
}
protected void btnUpdate_Click(object sender, EventArgs e)
{
BindGridData(false);
}
}
public class Product
{
public int ID { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public string Description { get; set; }
public bool IsAvailable { get; set; }
}
}
I encourage you to
download the attached solution which consists of the extended GridView control
MultiEditGridView and a sample web application demonstrating its features, thereby providing me your feedback on further improvements I could incorporate.
