I wrote this bit of code today and I thought it was neat so I figured I'd post it here.
Lets say you have a datagrid filled with addresses which are editable in-grid. In addition you have a footer with an add button that displays the same style of edit boxes as the line items. This is all well and good and fairly well documented in the community so let's add a twist: When a user types in a zip code, grab a list of cities in that zip code and display them as a dropdownlist and populate the city and county for that zipcode.
Here's a screenshot of the grid as it comes out of the gate:
Here's what it looks like in add mode. Edit mode would be the same except the data items would be filled in.
Now, let's talk code.
- We need to set the autopostback property on the zip code textboxes (add and edit) to True.
- We need to wire up the TextChanged event for the zipcode controls
- We need to be able to parse the datagrid editindex row or the footer row depending on which onchanged event was fired.
Wiring up the onchanged event is fairly simple, we do it in the ItemCreated() event of the datagrid.
Private Sub Grid1_ItemCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles Grid1.ItemCreated
If e.Item.ItemType = ListItemType.EditItem Then
AddHandler CType(e.Item.FindControl("ZipCode"), TextBox).TextChanged, AddressOf ZipCode_TextChanged
End If
If e.Item.ItemType = ListItemType.Footer Then
AddHandler CType(e.Item.FindControl("AddZipCode"), TextBox).TextChanged, AddressOf AddZipCode_TextChanged
End If
End Sub
Notice I have two sub routines to handle the TextChanged for the zipcode boxes. Here's the code for them. You will see a difference between how to manipulate controls in the footer versus how to manipulate controls in the current edititemindex. The FooterIndex is always the last record in the controls(0) collection found as such:
Dim
FooterIndex As Integer = Grid1.Controls(0).Controls.Count - 1
Note that I have stripped out the code populating myZipCodes, just accept that myZipCodes is a collection of ZipCode objects that have the properties necessary to populate the grid. =)
Private Sub ZipCode_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs)
Dim myZipCodes As New UltraCareBLL.ZipCodes
If myZipCodes.Count >= 1 Then
CType(Grid1.Items(Grid1.EditItemIndex).FindControl("City"), TextBox).Visible = False
Dim myDDL As DropDownList = CType(Grid1.Items(Grid1.EditItemIndex).FindControl("ddlCity"), DropDownList)
myDDL.DataSource = myZipCodes
myDDL.DataTextField = "City"
myDDL.DataBind()
myDDL.Visible = True
CType(Grid1.Items(Grid1.EditItemIndex).FindControl("State"), TextBox).Text = myZipCodes(0).State
CType(Grid1.Items(Grid1.EditItemIndex).FindControl("County"), TextBox).Text = myZipCodes(0).District
Else
CType(Grid1.Items(Grid1.EditItemIndex).FindControl("ddlCity"), DropDownList).Visible = False
CType(Grid1.Items(Grid1.EditItemIndex).FindControl("City"), TextBox).Visible = True
End If
End Sub
Private Sub AddZipCode_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs)
If myZipCodes.Count >= 1 Then
CType(Grid1.Controls(0).Controls(FooterIndex).FindControl("AddCity"), TextBox).Visible = False
Dim myDDL As DropDownList = CType(Grid1.Controls(0).Controls(FooterIndex).FindControl("ddlAddCity"), DropDownList)
myDDL.DataSource = myZipCodes
myDDL.DataTextField = "City"
myDDL.DataBind()
myDDL.Visible = True
CType(Grid1.Controls(0).Controls(FooterIndex).FindControl("AddState"), TextBox).Text = myZipCodes(0).State
CType(Grid1.Controls(0).Controls(FooterIndex).FindControl("AddCounty"), TextBox).Text = myZipCodes(0).District
Else
CType(Grid1.Controls(0).Controls(FooterIndex).FindControl("ddlAddCity"), DropDownList).Visible = False
CType(Grid1.Controls(0).Controls(FooterIndex).FindControl("AddCity"), TextBox).Visible = True
End If
End Sub
So the final result is that if the zipcode collection has 1 or more records, it will hide the edit textbox and present the user with a dropdownlist of choices for city and auto populate the county and state. If the zipcode is not found in the collection (empty collection) it leaves edit textbox there and hides the dropdown list so the user can type in a city manually.