Extending C1GridView Editing-EditForm

The C1GridView provides multiple options to edit data, be it client side or server side. It also enhances the editing experience by allowing editing controls. The server side editing now supports default C1Input controls, you can also bind to any other editing control of your choice. However applications may sometime require to show an edit form while editing,best if it is shown inside the grid. Though this functionality is not present out of the box but the C1GridView does allow you to create one by extending it through a few lines of reusable code. Let me walk you through extending C1GridView to implement a editable form like the image below.

Extending C1GridView

1. Lets create a class which inherits from C1GridView. Lets name it C1GridViewExt. 2. Next we need to create a IBindableTemplate property and a Boolean EnableFormTemplate property.

namespace C1GridViewExt  
{  
 /// <summary>  
 /// Extending C1GridView for form Editing  
 /// </summary>  
 public class C1GridViewExt : C1GridView  
 {  

 private IBindableTemplate editItemTemplate;  
 private bool enableFormEditing;  
public bool EnableFormEditing  
 {  
 get { return enableFormEditing; }  
 set { enableFormEditing = value; }  
 }  
[PersistenceMode(PersistenceMode.InnerProperty), TemplateContainer(typeof(C1GridViewRow), System.ComponentModel.BindingDirection.TwoWay)]  
 public IBindableTemplate EditItemTemplate  
 {  
 set { editItemTemplate = value; }  
 get { return editItemTemplate; }  
 }  
}  
}

2. We need to override four methods, "ExtractRowValues" to get the values from editable row cells.

protected override void ExtractRowValues(System.Collections.Specialized.IOrderedDictionary fieldValues, C1GridViewRow row, bool includeReadOnlyFields, bool includePrimaryKey)  
 {  
if (enableFormEditing)  
 {  
 IOrderedDictionary dict = editItemTemplate.ExtractValues(row.Cells[0]);  
 foreach (string s in dict.Keys)  
 fieldValues.Add(s, dict[s]);  
 }  
 else  
 base.ExtractRowValues(fieldValues, row, includeReadOnlyFields, includePrimaryKey);  
 }

"InitializeRow", to instantiate our editable form within.

protected override void InitializeRow(C1GridViewRow row, List<C1BaseField> fields)  
 {  
 C1GridViewRowState state = row.RowState & C1GridViewRowState.Edit;  
 if (row.RowType == C1GridViewRowType.DataRow && state != C1GridViewRowState.Normal && enableFormEditing == true)  
 {  
 int ColSpan = fields.Count;  
 row.Cells.Clear();  
C1GridViewCell cell = new C1GridViewCell(fields[0]);  
 cell.ColumnSpan = ColSpan;  
 editItemTemplate.InstantiateIn(cell);  
 row.Cells.Add(cell);  

 }  
 else  
base.InitializeRow(row, fields);  

 }

"OnInit", to initiliaze.

protected override void OnInit(EventArgs e)  
 {  
 if (enableFormEditing && editItemTemplate == null)  
 throw new Exception("EditTemplate Missing.");  
 base.OnInit(e);  
}

"OnPreRender" to register scripts for our extended gridview.

protected override void OnPreRender(EventArgs e)  
 {  
 base.OnPreRender(e);  
 RegisterScript();  
 }  
private void RegisterScript()  
 {  
 this.Page.ClientScript.RegisterStartupScript(this.GetType(), this.ID + "_script", "<script>$.fn.c1gridviewext = $.fn.c1gridview</script>");  
}

Here is the complete code for the class. using System; using System.Collections.Generic; using System.Web; using C1.Web.Wijmo.Controls.C1GridView; using System.Web.UI; using System.Collections.Specialized; using System.Collections; using System.ComponentModel; using System.Web.UI.WebControls; namespace C1GridViewExt { ///

<%@ Register Namespace="C1GridViewExt" TagPrefix="c1grid"%>  
<%@ Register assembly="C1.Web.Wijmo.Controls.4" namespace="C1.Web.Wijmo.Controls.C1GridView" tagprefix="wijmo" %>

<c1grid:C1GridViewExtControl runat="server" ID="grid" OnRowUpdating="grid_RowUpdating" DataSourceID="SqlDataSource1" EnableFormEditing="True" AutogenerateColumns="False" AllowPaging="True" DataKeyNames="CustomerID" EnableTheming="True" style="top: 0px; left: 0px; ">  
 <EditItemTemplate>  
 <table style="width:100%; background-color:lightsteelblue">  
 <tr>  
 <td>Company ID</td>  
 <td>  
 <asp:TextBox runat="server" ID="CustomerIDTextBox" ReadOnly="true" Text='<%# Bind("CustomerID") %>'></asp:TextBox>  
 </td>  
 <td>Contact Name</td>  
 <td>  
 <asp:TextBox runat="server" ID="CompanyNameTextBox" Text='<%# Bind("CompanyName") %>' Width="204px"></asp:TextBox>  
 </td>  
 </tr>  
 <tr>  
 <td>Contact Name</td>  
 <td>  
 <asp:TextBox runat="server" ID="ContactNameTextBox" Text='<%# Bind("ContactName") %>'></asp:TextBox>  
 </td>  
 </tr>  
 <tr>  
 <td>City</td>  
 <td>  
 <asp:TextBox runat="server" ID="CityTextBox" Text='<%# Bind("City") %>'></asp:TextBox>  
 </td>  
 </tr>  
 <tr>  
 <td>Region</td>  
 <td>  
 <asp:TextBox runat="server" ID="RegionTextBox" Text='<%# Bind("Region") %>'></asp:TextBox>  
 </td>  
 </tr>  
 </table>  
 <asp:Button runat="server" ID="btnUpdate" CommandName="Update" Text="Update" />  
 <asp:Button runat="server" ID="btnCancel" CommandName="Cancel" Text="Cancel" />  
 </EditItemTemplate>  
 <Columns>  
 <wijmo:C1BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID">  
 </wijmo:C1BoundField>  
 <wijmo:C1BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName">  
 </wijmo:C1BoundField>  
 <wijmo:C1BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName">  
 </wijmo:C1BoundField>  
 <wijmo:C1BoundField DataField="City" HeaderText="City" SortExpression="City">  
 </wijmo:C1BoundField>  
 <wijmo:C1BoundField DataField="Region" HeaderText="Region" SortExpression="Region">  
 </wijmo:C1BoundField>  
 <wijmo:C1CommandField ShowEditButton="True">  
 </wijmo:C1CommandField>  
 </Columns>  
 </c1grid:C1GridViewExtControl>