[Solved] RadAjaxManager and DropDownLists in ListView

[Michael]

I am having trouble trying to implement an ajaxified cascading DropDownList inside a ListView using the RadAjaxManager.  I have tried following the example here, but it doesn't seem to work with a ListView.  The page doesn't post back when the first DropDownList changes and the SelectedIndexChanged event never fires.  Below is some sample code.  Any idea what I'm doing wrong?

<asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
<telerik:RadAjaxManager runat="server" ID="am1">
</telerik:RadAjaxManager>
<asp:ListView runat="server" ID="ListView1" InsertItemPosition="FirstItem" SelectMethod="ListView1_GetData" OnItemCreated="ListView1_ItemCreated">
    <LayoutTemplate>
        <asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
    </LayoutTemplate>
    <InsertItemTemplate>
        <asp:DropDownList runat="server" ID="DropDownList1" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
            <asp:ListItem Text="" Value=""></asp:ListItem>
            <asp:ListItem Text="1" Value="1"></asp:ListItem>
            <asp:ListItem Text="2" Value="2"></asp:ListItem>
            <asp:ListItem Text="3" Value="3"></asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList runat="server" ID="DropDownList2" OnDataBinding="DropDownList2_DataBinding"></asp:DropDownList>
    </InsertItemTemplate>
</asp:ListView>

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    ((DropDownList)ListView1.InsertItem.FindControl("DropDownList2")).DataBind();
}
public IQueryable ListView1_GetData()
{
    return null;
}

protected void DropDownList2_DataBinding(object sender, EventArgs e)
{
    ((DropDownList)sender).Items.Clear();
    if (((DropDownList)ListView1.InsertItem.FindControl("DropDownList1")).SelectedValue != "")
    {
        ((DropDownList)sender).Items.Add(((DropDownList)ListView1.InsertItem.FindControl("DropDownList1")).SelectedValue);
        ((DropDownList)sender).Items.Add(((DropDownList)ListView1.InsertItem.FindControl("DropDownList1")).SelectedValue);
    }
}

protected void ListView1_ItemCreated(object sender, ListViewItemEventArgs e)
{
    if (e.Item.ItemType == ListViewItemType.InsertItem)
        e.Item.PreRender += new System.EventHandler(ListView1_ItemPreRender);

}

protected void ListView1_ItemPreRender(object sender, System.EventArgs e)
{
    am1.AjaxSettings.AddAjaxSetting(((DropDownList)(((Control)(sender)).FindControl("DropDownList1"))), ((DropDownList)(((Control)(sender)).FindControl("DropDownList2"))));
}

[Eyup]

Hello Michael,

Could you temporarily remove the ListView1_ItemCreated method and disable any other AJAX on the page if present (RadAjaxManager, RadAjaxPanel, UpdatePanel, etc.) to see whether the logic will work, and enable your script debugger (FireBug or F12) to see whether there are any script or server errors interfering.

Regards,
Eyup
Telerik

[Michael]

I have nothing else on my test page except for the code in my original post. 

No script errors without the ItemCreated method.  With the ItemCreated method, I do get a script error, "Unable to get property 'id' of undefined or null reference" for the statement "if(Array.contains(f,a.get_postBackElement().id))".  a.get_postBackElement() is undefined.

[Eyup]

Hello Michael,

Put the dropdowns in a Panel container:

<InsertItemTemplate>
    <asp:Panel ID="Panel1" runat="server" OnPreRender="Panel1_PreRender">
        <asp:DropDownList runat="server" ID="DropDownList1" AutoPostBack="true"
            OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
            <asp:ListItem Text="" Value=""></asp:ListItem>
            <asp:ListItem Text="1" Value="1"></asp:ListItem>
            <asp:ListItem Text="2" Value="2"></asp:ListItem>
            <asp:ListItem Text="3" Value="3"></asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList runat="server" ID="DropDownList2"
            OnDataBinding="DropDownList2_DataBinding">
        </asp:DropDownList>
    </asp:Panel>
</InsertItemTemplate>

And ajaxify the Panel instead:

protected void Panel1_PreRender(object sender, EventArgs e)
{
    Panel panel = (Panel)sender;
    am1.AjaxSettings.AddAjaxSetting(panel, panel);
}

That should do the trick.

Regards,
Eyup
Telerik