Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

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

0.00/5 (No votes)
3 Apr 2007 1  
This Example explain how to place DropDownList in DataGrid and fire the DropDownList's SelectedIndexChanged event for every row according to selected item in DropDownList
Screenshot - ScreenShot.jpg

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here