[Solved] Dynamic DropDownList

[Baris]

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.

[Ivan Zhekov]

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

[Shinu]

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.

[Baris]

Can we do that server side ? using c# at aspx.cs not using js?

[Shinu]

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.

[Baris]

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>

[Boyan Dimitrov]

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