RadAjaxManager and DropDownLists in ListView

4 posts, 0 answers
  1. Michael
    Michael avatar
    13 posts
    Member since:
    Sep 2014

    Posted 02 Feb Link to this post

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

  2. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 05 Feb Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael
    Michael avatar
    13 posts
    Member since:
    Sep 2014

    Posted 05 Feb in reply to Eyup Link to this post

    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.

  5. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 10 Feb Link to this post

    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
Back to Top