This is a migrated thread and some comments may be shown as answers.

RadAjaxManager and DropDownLists in ListView

3 Answers 116 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 03 Feb 2016, 04:04 AM

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"))));
}

3 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 05 Feb 2016, 06:57 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Michael
Top achievements
Rank 1
answered on 05 Feb 2016, 02:17 PM

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.

0
Eyup
Telerik team
answered on 10 Feb 2016, 02:36 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Ajax
Asked by
Michael
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Michael
Top achievements
Rank 1
Share this question
or