Dynamic DropDownList

7 posts, 1 answers
  1. Baris
    Baris avatar
    34 posts
    Member since:
    Jul 2013

    Posted 29 Jan 2014 Link to this post

    Hi,

    I want to add and remove items at runtime like that picture.



    In dropdownlist Can I add item or delete item by clicking trash icon at runtime.
  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 30 Jan 2014 Link to this post

    Hello, Baris.

    Can you re-attach the picture? It seems there was a problem when you submitted your post and the picture is not displaying.

    Regards,
    Ivan Zhekov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 30 Jan 2014 in reply to Baris Link to this post

    Hi Baris,

    Please have a look into the sample code snippet to delete a DropDownListItem dynamically.

    ASPX:
    <telerik:RadDropDownList ID="RadDropDownList1" runat="server" DefaultMessage="select">
        <Items>
            <telerik:DropDownListItem Text="Item1" />
            <telerik:DropDownListItem Text="Item2" />
        </Items>
        <ItemTemplate>
            <asp:Label ID="Label1" runat="server">
            </asp:Label>
            <telerik:RadButton ID="RadButton1" runat="server" Text="Delete" AutoPostBack="false">
            </telerik:RadButton>
        </ItemTemplate>
    </telerik:RadDropDownList>

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        foreach (DropDownListItem item in RadDropDownList1.Items)
        {
            Label label1 = (Label)item.FindControl("Label1");
            label1.Text= item.Text;
            RadButton Button = (RadButton)item.FindControl("RadButton1");
            Button.Attributes.Add("onclick", "clickEvent(" + item.Index + ")");
        }
    }

    JavaScript:
    <script type="text/javascript">
        function clickEvent(index) {
            alert(index);
            var list = $find("<%=RadDropDownList1.ClientID %>");
            list.trackChanges();
            var item = list.get_items().removeAt(index);
            list.commitChanges();
            __doPostBack();
        }
    </script>

    Let me know if you have any concern.
    Thanks,
    Shinu.
  5. Baris
    Baris avatar
    34 posts
    Member since:
    Jul 2013

    Posted 07 Feb 2014 in reply to Shinu Link to this post

    Can we do that server side ? using c# at aspx.cs not using js?
  6. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 09 Feb 2014 in reply to Baris Link to this post

    Hi Baris,

    Please  have a look into the sample code snippet which works fine at my end.

    ASPX:
    <telerik:RadDropDownList ID="RadDropDownList1" runat="server" DefaultMessage="select">
        <Items>
            <telerik:DropDownListItem Text="Item1" />
            <telerik:DropDownListItem Text="Item2" />
        </Items>
        <ItemTemplate>
            <asp:Label ID="Label1" runat="server">
            </asp:Label>
            <telerik:RadButton ID="RadButton1" runat="server" Text="delete" OnClick="RadButton1_Click">
            </telerik:RadButton>
        </ItemTemplate>
    </telerik:RadDropDownList>

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        foreach (DropDownListItem item in RadDropDownList1.Items)
        {
            Label l1 = (Label)item.FindControl("Label1");
            l1.Text = item.Text;
        }
    }
    protected void RadButton1_Click(object sender, EventArgs e)
    {
        DropDownListItem item = (DropDownListItem)RadDropDownList1.SelectedItem;
        RadDropDownList1.Items.Remove(item);
        RadDropDownList1.ClearSelection();
    }

    Thanks,
    Shinu.
  7. Baris
    Baris avatar
    34 posts
    Member since:
    Jul 2013

    Posted 10 Feb 2014 in reply to Shinu Link to this post

    hi shinu.
    Your code works perfect. But button does autopostback. I put the radajaxpanel ouf the your code but it doesn't work. why?

                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px" Width="300px">
                    <telerik:RadDropDownList ID="RadDropDownList1" runat="server" DefaultMessage="select">
                        <Items>
                            <telerik:DropDownListItem Text="Item1" />
                            <telerik:DropDownListItem Text="Item2" />
                            <telerik:DropDownListItem Text="Item2" />
                            <telerik:DropDownListItem Text="Item2" />
                            <telerik:DropDownListItem Text="Item2" />
                            <telerik:DropDownListItem Text="Item2" />
                            <telerik:DropDownListItem Text="Item2" />
                        </Items>
                        <ItemTemplate>
                            <asp:Label ID="Label1" runat="server">
                            </asp:Label>
                            <telerik:RadButton AutoPostBack="true" ID="RadButton1" runat="server" Text="delete" OnClick="RadButton1_Click">
                            </telerik:RadButton>
                        </ItemTemplate>
                    </telerik:RadDropDownList>
                </telerik:RadAjaxPanel>
  8. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 12 Feb 2014 Link to this post

    Hello,

    In order to achieve this scenario I would suggest using the RadAjaxManager control. Please refer to the code snippet below for the implementation:
    //markup code
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" UpdatePanelsRenderMode="Inline">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadDropDownList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadDropDownList1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
     
    <telerik:RadDropDownList ID="RadDropDownList1" runat="server" DefaultMessage="select">
        <Items>
            <telerik:DropDownListItem Text="Item1" />
            <telerik:DropDownListItem Text="Item2" />
            <telerik:DropDownListItem Text="Item2" />
            <telerik:DropDownListItem Text="Item2" />
            <telerik:DropDownListItem Text="Item2" />
            <telerik:DropDownListItem Text="Item2" />
            <telerik:DropDownListItem Text="Item2" />
        </Items>
        <ItemTemplate>
            <asp:Label ID="Label1" runat="server">
            </asp:Label>
            <telerik:RadButton ID="RadButton1" runat="server" Text="delete" OnClick="RadButton1_Click" OnPreRender="RadButton1_PreRender">
            </telerik:RadButton>
        </ItemTemplate>
    </telerik:RadDropDownList>
    //code behind
    protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                foreach (DropDownListItem item in RadDropDownList1.Items)
                {
                    Label l1 = (Label)item.FindControl("Label1");
                    l1.Text = item.Text;
                }
            }
             
        }
     
        protected void RadButton1_Click(object sender, EventArgs e)
        {
            DropDownListItem item = (DropDownListItem)RadDropDownList1.SelectedItem;
            RadDropDownList1.Items.Remove(item);
            RadDropDownList1.ClearSelection();
        }
     
     
     
        protected void RadButton1_PreRender(object sender, EventArgs e)
        {
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(sender as RadButton, sender as RadButton);
        }


    Regards,
    Boyan Dimitrov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017