Skip to main content Skip to footer

C1GridView: Binding Dropdown Column

We can create different types of columns in C1GridView. Following documentation link provides detailed information on the available column types for C1GridView. In these different types of columns, C1TemplateField is very popular as it can be customized to meet various user requirements. We can include controls in the ItemTemplate P**roperty of C1TemplateField and bind it with data that will be shown when the grid loads. We can also include controls in EditItemTemplate P**roperty of C1TemplateField and these controls can be used as an editor for the grid. See the documentation topic "Adding Controls to a column" for details on how you can create a C1Templatefield, include them in C1GridView and add controls to this column. In this blog we are focused on how to bind a DropDownList control inside a TemplateField, to a lookup table when the C1GridView itself is bound to a Master Table. For this blog purpose, a 'Customer' table is used as datasource for C1GridView. When we bind the C1GridView to the 'Customer' table, a new field Country is added to the Grid's column collection. In this Country field, we will include a DropDownList which is bound to a table Countries for users to choose a particular country. Following code implements shows how to bind a Template Column at design time.

 <wijmo:C1GridView ID="C1GridView1" runat="server" AutogenerateColumns="False" DataKeyNames="CustomerID"  
 DataSourceID="AccessDataSource1" OnRowUpdating="C1GridView1_RowUpdating"  
 onrowdatabound="C1GridView1_RowDataBound">  
 <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>  
      <asp:DropDownList ID="dlCountry" runat="server" DataSourceID="AccessDataSource2"  
      DataTextField="Country" DataValueField="Country" SelectedValue='<%# Bind("Country")%>'>  
      </asp:DropDownList>  
      <asp:AccessDataSource ID="AccessDataSource2" runat="server" DataFile="~/App_Data/C1NWind1.mdb"  
      SelectCommand="SELECT * FROM [Countries]"></asp:AccessDataSource>  
    </EditItemTemplate>  
  </wijmo:C1TemplateField>  
  <wijmo:C1CommandField ShowEditButton="True">  
  </wijmo:C1CommandField>  
</Columns>  
</wijmo:C1GridView>  
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/C1NWind1.mdb"  
 SelectCommand="SELECT * FROM [Customers]" >  
</asp:AccessDataSource>  

Attached screenshot shows how the grid looks when the Page loads. Field 'Country' contains the existing values from the datasource. Now, select a row and click "Edit" command button to put the grid in editing mode. This will make the DropDownList visible, wherein you can select any country listed in the dropdown. See the screenshot. After the country is selected, and "Update" command button is clicked, RowUpdating event of C1GridView is raised. At this point of time, it is important to specify an UpdateCommand for AccessDataSource in order for the datasource to be updated. Values of the Grid's row is passed in the UpdateParameters collection to update the particular row. It can be done as follows:


protected void C1GridView1_RowUpdating(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewUpdateEventArgs e)  
{  
    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();  
}  

Now that was easy, wasn't it..!! Refer to the attached sample for complete implementation. Download Sample.

MESCIUS inc.

comments powered by Disqus