How to place a DropDownList in DataGrid and fire SelectedIndexChanged for each row

• Download DDLGridSample_VB.zip - 34.6 KB

Introduction

In this example i place two DropDownList in two coulmn in a DataGrid and change the content of second column's DDL according to the selection of first column's DDL for every row

Background

(Optional) Is there any background to this article that may be useful such as an introduction to the basic ideas presented?

Using the code

How to place a control in DataGrid

1. Place DataGrid
2. rightclick select "Propery Builder"
3. select "Columns" from lift panel
4. select "Temlate Column" in "Available Columns"
5. click on ">" (so that "Template Column" Appear in "Selected Column")
6. change the "Header Text", "Footer Text" etc.. as your wish
7. Click "OK"
8. rightClick on the grid and select "Edit Template" ---> "Columns[0]" (you have to select the column where you want to place the control)
9. place the control in one of the section
a. Item Template or
b. EditItem Template etc.. according to your requirement

Note: in our sample i place a dropdowlist in Item Template

Placeing a control in a DataGrid is very simple. If you place a Check box or Radio button and handling this control is very easy even DropDownList also. but when we face the dificulty? if you place a control (like check box, raido button, or DropDownList) then want to hanlding the control's event it give some difficulty. how to overcome this?

How to Handle the Event of that Control

To handle the event of that control, you have to write a procedure which going to fire when the event is fire. in our sample the procedure is "ddlGroup_SelectedIndexChanged"

In our sample code i have table called "DDLSample" and i have some datas, the script to generate the table and insert the data is

create table DDLSample (GroupName varchar(15), Items varchar(15))

insert into DDLSample values ('Fruit', 'Mango')
insert into DDLSample values ('Fruit', 'Orange')
insert into DDLSample values ('Fruit', 'Grape')

insert into DDLSample values ('Color', 'Red')
insert into DDLSample values ('Color', 'Green')
insert into DDLSample values ('Color', 'Blue')
insert into DDLSample values ('Color', 'Yellow')

insert into DDLSample values ('Animal', 'Dog')
insert into DDLSample values ('Animal', 'Cat')
insert into DDLSample values ('Animal', 'Lion')

open a vb.net ASP.Net web Application

place a Grid and AutoGenerateColumns to false

place two DropDownList in two columns and set the column Heading as "Group" and "Item" repectively

change dropdownlist's ID to "ddlGroup" and "ddlItem" respectively

in webform1's HTML editor in ddlGroup's propertiy add the following line
OnSelectedIndexChanged="ddlGroup_SelectedIndexChanged"

so that the ddlGroup's code should be like

<code>
<ItemTemplate>
<asp:DropDownList id="ddlGroup" runat="server" OnSelectedIndexChanged="ddlGroup_SelectedIndexChanged"
AutoPostBack="True"> </asp:DropDownList>
</ItemTemplate>
</code>

Declare the vriables as
<code>
Dim sqlConnection As sqlConnection
Dim sqlCommand As sqlCommand
Dim dsGroup As DataSet = New DataSet
Dim dsItem As DataSet = New DataSet
Dim daGroup As SqlDataAdapter
Dim daItem As SqlDataAdapter = New SqlDataAdapter
</code>

In page load
<code>
If Not IsPostBack Then
sqlConnection = New SqlConnection("initial catalog=[DBName];user id=sa;password=;server=(local)")
sqlConnection.Open()
sqlCommand = New SqlCommand("select distinct GroupName from ddlsample", sqlConnection)
sqlCommand.CommandType = CommandType.Text
daGroup = New SqlDataAdapter(sqlCommand)
daGroup.Fill(dsGroup, "dtGroup")
DataGrid1.DataSource = dsGroup
DataGrid1.DataBind()
End If
</code>

In DataGrid1_ItemDataBound
<code>
Dim dr As DataRowView = CType(e.Item.DataItem, DataRowView)
If ((e.Item.ItemType = ListItemType.Item) _ OrElse (e.Item.ItemType = ListItemType.AlternatingItem)) Then
Dim listGroup As DropDownList = CType(e.Item.FindControl("ddlGroup"), DropDownList)
listGroup.DataSource = dsGroup
listGroup.DataValueField = "GroupName"
listGroup.DataTextField = "GroupName"
listGroup.DataBind()
listGroup.Items.Insert(0, New ListItem("Select One", "Select One")) End If
</code>

Our Own Procedure to fire the event
<code>
Protected Sub ddlGroup_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
Dim ddllist As DropDownList = CType(sender, DropDownList)
Dim cell As TableCell = CType(ddllist.Parent, TableCell)
Dim item As DataGridItem = CType(cell.Parent, DataGridItem)
Dim content As String = item.Cells(0).Text
Dim ddlType As DropDownList = CType(item.Cells(0).FindControl("ddlGroup"), DropDownList)
sqlConnection = New SqlConnection("initial catalog=SathyaSample;user id=sa;password=sa;server=(local)")
sqlConnection.Open()
sqlCommand = New SqlCommand(("select Items from ddlsample where GroupName = '"+ (ddlType.SelectedItem.Text + "'")), sqlConnection) sqlCommand.CommandType = CommandType.Text
daItem = New SqlDataAdapter(sqlCommand)
daItem.Fill(dsItem, "dtItem")
Dim ddlItem As DropDownList = CType(item.Cells(1).FindControl("ddlItem"), DropDownList)
If (ddlType.SelectedItem.Text = "Select One") Then ddlItem.Items.Clear()
Else
ddlItem.Items.Clear()
ddlItem.DataSource = dsItem
ddlItem.DataValueField = "Items"
ddlItem.DataTextField = "Items"
ddlItem.DataBind()
ddlItem.Items.Insert(0, New ListItem("Select One", "Select One"))
End If
End Sub
</Code>

Summary

Now handling of controls in a datagrid makes very easy.