C1GridView enables editing the  cells of the grid at client side, without defining Template columns, by setting the AllowClientEditing to true.

In the Designer

Right-click the C1GridView control and select Show Smart Tag from the context menu to bind it to the C1Nwind.mdb database, which is located by default in the samples directory. For detailed steps go to Step 1 of 3: Binding C1GridView to a DataSource.

In Source View

1. To define the DataKeyNames and the columns, and to set the CallbackSettings for editing in C1GridView, modify the <cc1:C1GridView ></cc1:C1GridView > tag as shown below:

   <cc1:C1GridView ID="C1GridView1" runat="server" OnRowUpdating="C1GridView1_RowUpdating"
AutogenerateColumns="false" DataKeyNames="CustomerID" ClientSelectionMode="SingleRow"
AllowClientEditing="true" ShowFilter="true" OnFiltering="C1GridView1_Filtering"
OnEndRowUpdated="C1GridView1_EndRowUpdated">
    <CallbackSettings Action="Editing, Filtering" />
    <Columns>
        <cc1:C1BoundField DataField="CustomerID" HeaderText="CustomerID" SortExpression="CustomerID">
        </cc1:C1BoundField>
        <cc1:C1BoundField DataField="CompanyName" HeaderText="Company Name" SortExpression="CompanyName">
        </cc1:C1BoundField>
        <cc1:C1BoundField DataField="ContactName" HeaderText="Contact Name" SortExpression="ContactName">
        </cc1:C1BoundField>
        <cc1:C1BoundField DataField="City" HeaderText="City" SortExpression="City">
        </cc1:C1BoundField>
        <cc1:C1BoundField DataField="Country" HeaderText="Country" SortExpression="Country">
        </cc1:C1BoundField>
    </Columns>
</cc1:C1GridView>

2. To add a button named "Update", add the following code:

   <asp:Button ID="btn1" runat="server" Text="Update C1GridView"
            OnClientClick="btn_ClientClick(); return false;" />

3. Use the following jQuery function to call the update() method:

   function btn_ClientClick(sender, args) {
            var grid = $("#C1GridView1");
            grid.c1gridview("endEdit");
            grid.c1gridview("update");
        }


In Code

1. To set the Update command and to call the Update() method, add the following code :

   To write the code in Visual Basic

   Visual Basic

   Copy Code

   Public Function GetDataTable() As DataTable         Dim dt As DataTable = TryCast(Page.Session("Customers"), DataTable)         Dim con As New OleDbConnection("provider=Microsoft.Jet.Oledb.4.0; Data Source=" + Server.MapPath("~/App_Data/C1NWind.mdb"))         Dim da As New OleDbDataAdapter()         da.SelectCommand = New OleDbCommand("SELECT * FROM [Customers] Order By [CustomerID]", con)         da.UpdateCommand = New OleDbCommand("Update [Customers] set [CompanyName]=?, [ContactName]=?, [City]=?, [Country]=? where CustomerID = ?", con)         da.UpdateCommand.Parameters.Add("@CompanyName", OleDbType.VarChar, 50, "CompanyName")         da.UpdateCommand.Parameters.Add("@ContactName", OleDbType.VarChar, 50, "ContactName")         da.UpdateCommand.Parameters.Add("@City", OleDbType.VarChar, 50, "City")         da.UpdateCommand.Parameters.Add("@Country", OleDbType.VarChar, 50, "Country")         da.UpdateCommand.Parameters.Add("@CustomerID", OleDbType.VarChar, 50, "CustomerID")         If dt Is Nothing Then             dt = New DataTable()             da.Fill(dt)             dt.PrimaryKey = New DataColumn() {dt.Columns("CustomerID")}             Page.Session("Customers") = dt         End If         da.Update(dt)         Return dt     End Function

   To write the code in C#

   C#

   Copy Code

   public DataTable GetDataTable()     {         DataTable dt = Page.Session["Customers"] as DataTable;         OleDbConnection con = new OleDbConnection("provider=Microsoft.Jet.Oledb.4.0; Data Source=" + Server.MapPath("~/App_Data/C1NWind.mdb"));         OleDbDataAdapter da = new OleDbDataAdapter();         da.SelectCommand = new OleDbCommand("SELECT * FROM [Customers] Order By [CustomerID]", con);                 da.UpdateCommand = new OleDbCommand("Update [Customers] set [CompanyName]=?, [ContactName]=?, [City]=?, [Country]=? where CustomerID = ?", con);         da.UpdateCommand.Parameters.Add("@CompanyName", OleDbType.VarChar, 50, "CompanyName");         da.UpdateCommand.Parameters.Add("@ContactName", OleDbType.VarChar, 50, "ContactName");         da.UpdateCommand.Parameters.Add("@City", OleDbType.VarChar, 50, "City");         da.UpdateCommand.Parameters.Add("@Country", OleDbType.VarChar, 50, "Country");         da.UpdateCommand.Parameters.Add("@CustomerID", OleDbType.VarChar, 50, "CustomerID");         if (dt == null)         {                        dt = new DataTable();             da.Fill(dt);                        dt.PrimaryKey = new DataColumn[] { dt.Columns["CustomerID"] };                       Page.Session["Customers"] = dt;         }         da.Update(dt);         return dt;     }

2. To update the row with the modified data, add the following code to handle the RowUpdating event:

   To write the code in Visual Basic

   Visual Basic

   Copy Code

   Protected Sub C1GridView1_RowUpdating(sender As Object, e As C1.Web.Wijmo.Controls.C1GridView.C1GridViewUpdateEventArgs) Handles C1GridView1.RowUpdating         Dim customers As DataTable = GetDataTable()         Dim row As DataRow = customers.Rows.Find(C1GridView1.DataKeys(e.RowIndex).Value)         If row IsNot Nothing Then             For Each entry As DictionaryEntry In e.NewValues                 row(DirectCast(entry.Key, String)) = entry.Value             Next         Else             Throw New RowNotInTableException()         End If     End Sub

   To write the code in C#

   C#

   Copy Code

   protected void C1GridView1_RowUpdating(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewUpdateEventArgs e)     {         DataTable customers = GetDataTable();         DataRow row = customers.Rows.Find(C1GridView1.DataKeys[e.RowIndex].Value);         if (row != null)         {             foreach (DictionaryEntry entry in e.NewValues)             {                 row[(string)entry.Key] = entry.Value;             }         }         else         {             throw new RowNotInTableException();         }         Page.Session["Customers"] = customers;     }

3. To rebind the grid, add the following code to handle the EndRowUpdated event:

   To write the code in Visual Basic

   Visual Basic	Copy Code
   Protected Sub C1GridView1_EndRowUpdated(sender As Object, e As C1.Web.Wijmo.Controls.C1GridView.C1GridViewEndRowUpdatedEventArgs) Handles C1GridView1.EndRowUpdated         C1GridView1.DataSource = GetDataTable()         C1GridView1.DataBind()     End Sub

   To write the code in C#

   C#	Copy Code
   protected void C1GridView1_EndRowUpdated(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewEndRowUpdatedEventArgs e)     {         C1GridView1.DataSource = GetDataTable();         C1GridView1.DataBind();     }

You can change the selection to some other row and edit the values to save the updated values. Double-click the cells to make them editable.