Adding Items to RadDropDownList on ClientSide

[Timothy]

Hello,

I'm trying to manipulate the items in my raddropdownlist via jquery.

I found this page with documentation:
http://www.telerik.com/help/aspnet-ajax/dropdownlistitemcollection-client-object-api.html

the Add() method requires a DropDownListItem parameter.
But I can't find any documentation on how to declare a var of that type.
Is it in a namespace somewhere that I haven't found?

Please advise.
Thank you.

[Plamen]

Hi Timothy,

Here is a sample code that worked correctly at my side:

var ddl = $find("<%=DropDownListItem1.ClientID %>");
               var newItem = new Telerik.Web.UI.DropDownListItem();
               newItem.set_text("new");

               ddl.get_items().add(newItem);

Hope this will help you solve the issue.

Regards,
Plamen
Telerik

 

 

[Software]

This adds the item to the bottom of the dropdownlist, is there anyway CLIENT SIDE to sort all the items ?

[Vasko]

Hello,

To sort the items in the DropDownList on the client-side, you can use JavaScript. Below is a function that sorts the items alphabetically based on their Text property:

 

<telerik:RadDropDownList ID="RadDropDownList1" runat="server" OnClientDropDownOpening="onClientDropDownOpening">
    <Items>
        <telerik:DropDownListItem Text="BBBBB" />
        <telerik:DropDownListItem Text="AAAAA" />
        <telerik:DropDownListItem Text="DDDDD" />
        <telerik:DropDownListItem Text="CCCCC" />
    </Items>
</telerik:RadDropDownList>

function onClientDropDownOpening(dropdown, args) {
    var itemsArray = [];  // Create an array to hold the items for sorting
    var items = dropdown.get_items();  // Get the items of the dropdown

    for (var i = 0; i < items.get_count(); i++) {         // Push each item into the array
        itemsArray.push(items.getItem(i));
    }

    itemsArray.sort(function (a, b) { // Sort the array based on the Text property
        return a.get_text().localeCompare(b.get_text());
    });

    dropdown.get_items().clear();  // Clear the existing items in the dropdown

    for (var i = 0; i < itemsArray.length; i++) { // Add the sorted items back to the dropdown
        dropdown.get_items().add(itemsArray[i]);
    }

    if (itemsArray.length > 0) { // Optionally, select the first item after sorting
        dropdown.get_items().getItem(0).select();
    }
}

This will sort the items while the drop down is opening, but the same logic can be used in other events (load of the page for example).

Regards,
Vasko
Progress Telerik

[Software]

that worked! I had to make a little change for we put in a "SELECT" item to tell the user to select one of the options, So I remove it before the sort, add the items, then add in the SELECT first before I put back in the sorted items. AND I have multiple dropdown lists, so I pass them in as an object to the routine.

            function DoSort(ddl) {
                var itemsArray = [];
                var items = ddl.get_items();

                for (var i = 0; i < items.get_count(); i++) {
                    if (items.getItem(i).get_value() != "0") //don't want to sort with the SELECT item, so remove it
                        itemsArray.push(items.getItem(i));
                }

                itemsArray.sort(function (a, b) {
                    return a.get_text().localeCompare(b.get_text());
                })

                ddl.get_items().clear();
                var selectItem = new Telerik.Web.UI.DropDownListItem();
                selectItem.set_text("-- SELECT --");
                selectItem.set_value("0");
                ddl.get_items().add(selectItem);

                for (var i = 0; i < itemsArray.length; i++) {
                    ddl.get_items().add(itemsArray[i]);
                }
            }

[Timothy]

That worked.
Thank you.

Merry Christmas.