C1GridViewでは、AllowClientEditingをtrueに設定することで、テンプレート列を定義しなくても、クライアント側でグリッドのセルを編集できるようになります。

デザイナの場合

C1GridViewコントロールを右クリックし、コンテキストメニューから［スマートタグの表示］選択して、コントロールをC1Nwind.mdbデータベースに連結します。このデータベースは、デフォルトではsamplesディレクトリに置かれています。詳細な手順については、「手順１/３：データソースへのC1GridViewの連結」を参照してください。

ソースビューの場合

1. DataKeyNamesと列を定義し、C1GridViewで編集できるようにCallbackSettingsを設定するために、<cc1:C1GridView ></cc1:C1GridView >タグを次のように変更します。

   <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. "Update"という名前のボタンを追加するために、次のコードを追加します。

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

3. 次のjQuery関数を使用して、update()メソッドを呼び出します。

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


コードの場合

1. Updateコマンドを設定し、Update()メソッドを呼び出すために、次のコードを追加します。

   Visual Basicでコードを書く場合

   Visual Basic

   コードのコピー

   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

   C#でコードを書く場合

   C#

   コードのコピー

   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. 変更されたデータで行を更新するために、次のコードを追加してRowUpdatingイベントを処理します。

   Visual Basicでコードを書く場合

   Visual Basic

   コードのコピー

   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

   C#でコードを書く場合

   C#

   コードのコピー

   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. グリッドを再連結するために、次のコードを追加してEndRowUpdatedイベントを処理します。

   Visual Basicでコードを書く場合

   Visual Basic	コードのコピー
   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

   C#でコードを書く場合

   C#	コードのコピー
   protected void C1GridView1_EndRowUpdated(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewEndRowUpdatedEventArgs e) { C1GridView1.DataSource = GetDataTable(); C1GridView1.DataBind(); }

選択範囲を他の行に変更し、値を編集して、更新した値を保存することができます。セルをダブルクリックすると編集可能になります。