DropDownList inside nested gridview and updatepanel - SelectedIndexChanged Not Firing

[srjinc]

I have nested gridviews with the child inside an update panel. I have loaded a DropDownList in the first row of the child gridview and have loaded checklists in all other rows of the child gridview (I hid the checklists in the first row and the dropdownlist in all other rows). When the User changes the dropdownlist, the SelectedIndexChanged is not firing for that dropdownlist. Aslo, if I use the button, a post-back occurs and resets the DropDownList (I don't know how this is occuring). Any help will be well appreciated. Following is my code.
Thank you in advance for your help.

<asp:Button ID="btnApplyFilter" runat="server" Text="Apply Filter" ViewStateMode="Enabled"
OnClick="btnApplyfilter_Click" />


<asp:GridView ID="gvFilterParent" runat="server" ShowFooter="True" AutoGenerateColumns="false" CssClass="Grid" ShowHeader="False"
DataKeyNames="filID" AlternatingRowStyle-BackColor="silver"
EnableViewState="true" OnRowDataBound="gvFilterParent_OnRowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img alt = "" style="cursor: pointer" src="images/plus.png" />
<asp:UpdatePanel ID="pnFilter"
ChildrenAsTriggers="true"
EnableViewState="true"
runat="server"
Style="display: none">
<ContentTemplate>
<asp:GridView ID="gvFilter" ShowHeader="False" runat="server"
AlternatingRowStyle-BackColor="silver" EnableViewState="true"
AutoGenerateColumns="false" CssClass = "ChildGrid">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:UpdatePanel ID="ddlUpdate" runat="server" >
<ContentTemplate>
<aspropDownList ID="ddlFunCat" runat="server"
DataTextField="Filter"
DataValueField="FiltersId"
OnSelectedIndexChanged="ddlFunCat_SelectedIndexChanged
visible="false" AutoPostBack="true"
EnableViewState="true"></aspropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlFunCat"
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>



<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkselect" runat="server" />
</ItemTemplate>
</asp:TemplateField>

<asp:BoundField visible="false" DataField="FiltersId" />
<asp:BoundField ItemStyle-Width="150px" DataField="Filter" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="filId" visible="false" />
<asp:BoundField ItemStyle-Width="150px" DataField="filname" />
</Columns>
</asp:GridView>


CODE BEHIND

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
Using conn As New OleDbConnection(ConfigurationManager.ConnectionStrings("TestCases").ToString())
conn.Open()

'Load Gridview
gvFilterParent.DataSource = GetData("Select * from Filters where filParentID = " & 0)
gvFilterParent.DataBind()

conn.Close()
End Using
End If
End Sub




Private Shared Function GetData(query As String) As DataTable
Dim strConnString As String = ConfigurationManager.ConnectionStrings
("TestCases").ConnectionString
Using con As New OleDbConnection(strConnString)
Using cmd As New OleDbCommand()
cmd.CommandText = query
Using sda As New OleDbDataAdapter()
cmd.Connection = con
sda.SelectCommand = cmd
Using ds As New DataSet()
Dim dt As New DataTable()
sda.Fill(dt)
Return dt
End Using
End Using
End Using
End Using
End Function



Protected Sub gvFilterParent_OnRowDataBound(sender As Object, e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
'Bind Filters
Dim gvChild As GridView = TryCast(e.Row.FindControl("gvFilter"), GridView)
Dim filId As String = gvFilterParent.DataKeys(e.Row.RowIndex).Value.ToString()
If gvChild IsNot Nothing Then
gvChild.DataSource = GetData(String.Format("Select * from qFilters where filters_1.filId={0}", filId))
gvChild.DataBind()
If filId = "1" Then
For Each childrow As GridViewRow In gvChild.Rows
If childrow.RowType = DataControlRowType.DataRow Then
Dim drplist As DropDownList = DirectCast(childrow.FindControl("ddlFunCat"), DropDownList)
If drplist IsNot Nothing Then
Dim ds As DataSet = New DataSet()
ds = ViewState("ds")
drplist.DataSource = GetData(String.Format("SELECT FiltersId, Filter FROM qFilterFunCat", filId))
drplist.DataTextField = "Filter"
drplist.DataValueField = "FiltersId"
drplist.Visible = "True"
drplist.DataBind()
End If
childrow.Cells(1).Visible = "False"
childrow.Cells(2).Visible = "False"
childrow.Cells(3).Visible = "False"
End If
Next
End If
End If
End If
End Sub

Public Sub btnApplyfilter_Click(sender As Object, e As System.EventArgs)
'I Tried using the button but a postback occurs and the SelectedIndexChanged is reset

Dim SQLCmd As String = "Select * FROM qTestCases "
Dim childrow As GridViewRow
For Each row As GridViewRow In gvFilterParent.Rows
If row.RowType = DataControlRowType.DataRow Then
Dim gvChild As GridView = DirectCast(row.FindControl("gvFilter"), GridView)
Dim filId As String = gvFilterParent.DataKeys(row.RowIndex).Value.ToString()
If gvChild IsNot Nothing Then
For Each childrow In gvChild.Rows
If childrow.RowType = DataControlRowType.DataRow Then
If filId = "1" Then
Dim drplist As DropDownList = DirectCast(childrow.FindControl("ddlFunCat"), DropDownList)
If drplist ISNOT Nothing then
‘do something with drplist – THIS IS ALWAYS NOTHING!!!!!
End if
Else
Dim chk As CheckBox = DirectCast(childrow.FindControl("chkselect"), CheckBox)
If chk.Checked Then
‘Do Something with chk – This works!
End If
End If
End If
Next
End If
End If
Next
End Sub

Public Sub ddlFunCat_SelectedIndexChanged(sender As Object, e As System.EventArgs)

'Do something - The DropDownList doesn't see this
End Sub

 

[MarkSweetland]

Welcome to Tek-Tips

It's always easier to read your code on this forum if you enclose it with the TGML tags [ignore]

[/ignore] which formats it as such:

Dim someVariable as Integer

But, back to your issue. Try setting the UpdateMode property on ddlUpdate to "Always." If the UpdateMode property is set to Always, the UpdatePanel control's content is updated on every postback that originates from anywhere on the page





Mark

"You guys pair up in groups of three, then line up in a circle."
- Bill Peterson, a Florida State football coach

 

[srjinc]

Mark,

Thanks for the suggestion about the UpdateMode, but it didn't work. I also tried using "WithEvents" to see if that would help the program to recoginize the code behind for SelectedIndexChanged, but it didn't work either.

Also, thanks for the tip on using TGML tags

- I'll use them next time or I can resumit my code if that would help.

Hoping you might have some more suggestions (fingers are crossed!) Thanks

 

[MarkSweetland]

I created a page using your code and it seemed to work for me. I'd try removing the update panels and see what's going on. You can always put them back in...


Mark

"You guys pair up in groups of three, then line up in a circle."
- Bill Peterson, a Florida State football coach

 

[srjinc]

As you implied, I also copied the code I provided, but I'm getting the same result. If I remove the outer updatepanel, the dropdownlist moves up to the parent grid and then the code reconizes the SelectedIndexChanged code. However, my expand/collaspe code do longer works. Removing the inner updatedpanel makes no difference except it closes the dropdownlist once selected. Do you think that the java code for expanding/collasping the grids would have anything to do with my problem? I'm not a java coder. I've included it below....

Thanks again - you don't know how much I appreciate your help.

<script type="text/javascript">

    $("[src*=plus]").live("click", function () {

        $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")

        $(this).attr("src", "images/minus.png");

    });

    $("[src*=minus]").live("click", function () {

        $(this).attr("src", "images/plus.png");

        $(this).closest("tr").next().remove();

    });

</script>

 

[MarkSweetland]

I'm not a jQuery expert by any means, but I would think that .remove() would remove the matched elements from the DOM completely. Maybe try .hide() instead?


Mark

"You guys pair up in groups of three, then line up in a circle."
- Bill Peterson, a Florida State football coach

 

[srjinc]

Mark,

Really discouraged. I changed the java script and played around with the update panels but can't resolve the problem. I slowly eliminated code and changed various propery settings. I have no idea what to try next.

Do you make any changed to my code whn you copied it? If so, can I get a copy of your code to see where it differs?

Thanks again for trying to help,
Janet

 

[jbenson001]

Honestly, I would get rid of the update panels. I know that the page doesn't "flicker" when you use them, but they really save you noting. You still make a round trip to the server.

I would use JQuery. It is pretty simple to get up and running. You can easily make asynchronous DB calls which is what you want to do anyway. With that, there will be no "page flicker

 

[srjinc]

Thanks for the suggestion. When I remove the updatepanels, the SelectedIndexChanged event triggers correctly. However, the JQuery code I have will no longer expand/collaspe the grids and I don't know JQUERY.

Thanks in advance for the help.
Janet

 

[jbenson001]

Honestly it's not that hard to get started with JQuery. And it is very powerful. Also, they have great documentation to help you with syntax etc. Also, there are many posts online that will help you. I think this would be the best thing for you. It will be a bit confusing at first, but once you get used to it, you will see the benefits.

 

[srjinc]

jbenson001,

I agree - can't go far in web development without understanding it. I've already grabbed a book and am on Chapter 4 but am not profiencent enough to write the code I need for this. I'll surf the web forums and try someother java code to collasp/expand the gridview.

thanks for the advice!

 

[jbenson001]

Its javascript, not java. But anyway, there are many examples online. Remember Google is your friend. Here is a nicely laid out example. It describes to to collaps/expand a div. You would simply place your gridview inside of a div and use the code. With some minor tweaks of course.

http://designgala.com/how-to-expand-collapse-toggle-div-layer-using-jquery/

Good luck.

 

[srjinc]

Thanks for the link - I'll give it a try!

 

[jbenson001]

Cool, good luck

 

[srjinc]

Just wanted to thank those that helped me. I stripped the code and got rid of the update panels. It is working like a charm.

Again, thanks so much for giving me direction on how to solve the problem.

 

[jbenson001]

Glad you got it.. did you use JQuery?

 

[srjinc]

Yes - thanks again

 

[jbenson001]

Excellent.. you are welcome