Skip to main content Skip to footer

C1GridView: Runtime DataBinding of Template Field

In my previous blog we discussed how to bind a Template Field containing DropDownList using a lookup table. Binding was done at design time using the DataSourceID property of C1GridView. You can refer to the blog here. Now, in this blog, we discuss how to bind a Template Field at runtime. For a change, C1ComboBox has been used in this blog unlike DropDownList used in the previous one. C1GridView is bound to Customers table and the field Country is attached to a C1TemplateField containing a C1ComboBox. Following code implementation shows how grid appears with a Template Column at design time.


<wijmo:C1GridView ID="C1GridView1" runat="server" AutogenerateColumns="False" DataKeyNames="CustomerID"  
DataSourceID="AccessDataSource1" OnRowUpdating="C1GridView1_RowUpdating"  
onrowdatabound="C1GridView1_RowDataBound" Width="800px">  
<Columns>  
  <wijmo:C1BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True"  
   SortExpression="CustomerID">  
  </wijmo:C1BoundField>  
  <wijmo:C1BoundField DataField="CustomerName" HeaderText="CustomerName" SortExpression="CustomerName">  
  </wijmo:C1BoundField>  
  <wijmo:C1TemplateField HeaderText="Country">  
   <ItemTemplate>  
      <span><%# Eval("Country") %></span>  
   </ItemTemplate>  
   <EditItemTemplate>  
     <wijmo:C1ComboBox ID="dlCountry" runat="server"></wijmo:C1ComboBox>  
   </EditItemTemplate>  
  </wijmo:C1TemplateField>  
  <wijmo:C1CommandField ShowEditButton="True">  
  </wijmo:C1CommandField>  
</Columns>  
</wijmo:C1GridView>

Now as you can see from the above HTML code, C1ComboBox dlCountry, is not bound to any datasource at design time. We will bind C1ComboBox in each row using the RowDataBound event of C1GridView. SelectedValue property is set to make the C1ComboBox show the value for that particular row from datasource. Following code shows the implementation of RowDataBound event.


protected void C1GridView1_RowDataBound(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewRowEventArgs e)  
{  
  if ((e.Row.RowState & C1GridViewRowState.Edit)>0) {  
   // Retrieve the underlying data item. In this example  
   // the underlying data item is a DataRowView object.  
   DataRowView rowView = (DataRowView)e.Row.DataItem;  

   // Retrieve the country value for the current row.  
   String country = rowView["Country"].ToString();  

   // Retrieve the DropDownList control from the current row and DataBind it.  
   C1ComboBox dlCountry = (C1ComboBox)e.Row.FindControl("dlCountry");  
   dlCountry.DataSource = GetData();  
   dlCountry.DataTextField = "Country";  
   dlCountry.DataValueField = "Country";  
   dlCountry.DataBind();  
   //Retrieve item from dropdown and set it as selected.  
   foreach (C1ComboBoxItem item in dlCountry.Items) {  
     if (item.Text == country) {  
       dlCountry.SelectedValue = item.Text;  
       }  
     }  
  }  
}  
DataTable GetData() {  
   OleDbConnection con = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data Source="+Server.MapPath("~/App_Data/C1NWind1.mdb"));  
   OleDbCommand cmd = new OleDbCommand("Select Country from Countries",con);  
   OleDbDataAdapter da = new OleDbDataAdapter(cmd);  
   DataTable dt = new DataTable();  
   da.Fill(dt);  
   return dt;  
}

When the user selects a new value from C1ComboBox and update command button is clicked, RowUpdating event is raised. In this event, we have to add the SelectedValue of C1ComboBox in the newValues collection of the eventargs. The newValues collection of the eventargs is then used to add parameters in the UpdateParameter collection of UpdateCommand for AccessDataSource to which C1GridView is bound. See the code implementation for RowUpdating event.

 protected void C1GridView1_RowUpdating(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewUpdateEventArgs e)  
{  
  // Retrieve the row being edited.  
  C1GridViewRow row = C1GridView1.Rows[C1GridView1.EditIndex];  

  // Retrieve the DropDownList control from the row.  
  C1ComboBox combo = (C1ComboBox)row.FindControl("dlCountry");  
  //Add the selected value of the DropDownList control to  
  //the NewValues collection. The NewValues collection is  
  //passed to the data source control, which then updates the  
  //data source.  

  e.NewValues["Country"] = combo.SelectedValue;  

  AccessDataSource1.UpdateCommand = "Update Customers Set CustomerName=@CustomerName, Country=@Country where CustomerID=@CustomerID";  
  AccessDataSource1.UpdateParameters.Add("CustomerID", e.Keys["CustomerID"].ToString());  
  AccessDataSource1.UpdateParameters.Add("CustomerName", e.NewValues["CustomerName"].ToString());  
  AccessDataSource1.UpdateParameters.Add("Country", e.NewValues["Country"].ToString());  
  AccessDataSource1.Update();  
}

Thats it..!! We have now covered both DesignTime and RunTime binding of Controls, particulary for Dropdown control inside a C1TemplateField. Download the attached sample for complete implementation. Download Sample

MESCIUS inc.

comments powered by Disqus