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.

EDITING

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 { ///

/// Summary description for C1GridViewExt /// 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; } } 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); } protected override void InitializeRow(C1GridViewRow row, List 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); } protected override void OnPreRender(EventArgs e) { base.OnPreRender(e); RegisterScript(); } private void RegisterScript() { this.Page.ClientScript.RegisterStartupScript(this.GetType(), this.ID + "_script", ""); } protected override void OnInit(EventArgs e) { if (enableFormEditing && editItemTemplate == null) throw new Exception("EditTemplate Missing."); base.OnInit(e); } } }

Using the above control

To use the control, first we need to register it on our page along with C1GridView.

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

Next we can create and bind the control as below, notice the settings for EnableFormEditing property and EditItemTemplate.

<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>

When you run the sample you should see a edit-form displayed when the edit button is clicked. A sample implementing the above can be downloaded from here C1GridViewEditing. Thank you for reading.