Sorting radcombobox in client side

[saravanan k]

Hi All,

              Is it possible to sort the radcombobox through client side script. I browsed regarding this, but not getting much information. Please help with few code snippets.

Regards,
Saravanan K

[Shinu]

Hello Saravanan,

One suggestion is calling ajaxRequest to sort the items and call the SortItems() method of the combobox from server.

aspx:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadComboBox1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadComboBox Sort="Ascending" HighlightTemplatedItems="True" ID="RadComboBox1"
    runat="server" DataSourceID="SqlDataSource1" DataTextField="EmployeeName" DataValueField="EmployeeID">
</telerik:RadComboBox>

<input id="Button2" type="button" value="Sort client-side" onclick="sortCombo();" />

javascript:

<script type="text/javascript">
    function sortCombo() {
        $find("<%=RadAjaxManager1.ClientID%>").ajaxRequest('sortCombo');
    }
</script>

cs:

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
    RadComboBox1.SortItems();
}

-Shinu.

[Leif]

Hi Telerik Fans,
I have a project where I am re-writing one RadComboBox2, based on the value of another RadComboBox1. In addition, the list of values for the RadComboBox2 are from a web service, and so they are not sorted alphabetically. Also all of this must be accomplished without a post back.

So, though it is 6 months late, I thought I might post my solution here, so some future wayward dev, may find their way here and find this useful. If there is a better way than this, I couldn't find it, so I wrote my own.
This is a completely client side RadComboBox sort using the Telerik Client Side API.

function sortRcb(rcb) {
    rcb.trackChanges();
    var rcbItems = rcb.get_items();

    var tempArray = new Array();
    for (var i = 0; i < rcbItems.get_count(); i++) {
        tempArray[i] = new Array();
        tempArray[i][0] = rcbItems.getItem(i).get_text();
        tempArray[i][1] = rcbItems.getItem(i).get_value();
    }
    tempArray.sort();
    rcbItems.clear();
    for (var i = 0; i < tempArray.length; i++) {
        var comboItem = new Telerik.Web.UI.RadComboBoxItem();
        comboItem.set_text(tempArray[i][0]);
        comboItem.set_value(tempArray[i][1]);
        rcbItems.insert(i, comboItem);
    }
    rcb.commitChanges();
    return;
}

Usage:

var rcb = $find("<%= RadComboBox1.ClientID %>");
sortRcb(rcb);

Enjoy

[Shiva]

Hi Leif,

Than you very much for your solution, I needed to implement custom sorting on client side and your solution was the best one; i did same thing removed all items and then added by order i wanted.

Thank you,
Jay

[SUNIL]

I found the client-side sorting method in one of the answers to not work as expected. So I changed it and came up with following method, that I found worked perfectly.  The second parameter of sortOrder can be either 'asc' or 'desc'.

 

function sortByItemText(comboBox, sortOrder) {

    comboBox.trackChanges();

    var items = comboBox.get_items();

    var tempArray = items._array;

    if (sortOrder === "asc") {
        tempArray.sort(function(a, b) {
            if (a && b && a.get_text() > b.get_text()) return 1;
            if (a && b && a.get_text() === b.get_text()) return 0;
            if (a && b && a.get_text() < b.get_text()) return -1;
        });
    } else {
        tempArray.sort(function(a, b) {
            if (a && b && a.get_text() > b.get_text()) return -1;
            if (a && b && a.get_text() === b.get_text()) return 0;
            if (a && b && a.get_text() < b.get_text()) return 1;
        });

    }

    items.clear();

    for (var i = 0; i < tempArray.length; i++) {
        var comboItem = new Telerik.Web.UI.RadComboBoxItem();
        comboItem.set_text(tempArray[i].get_text());
        comboItem.set_value(tempArray[i].get_value());
        items.insert(i, comboItem);
    }
    comboBox.commitChanges();
    return;
}

[Ivan Danchev]

Hello,

Thank you for sharing your sorting method with the community.

Regards,
Ivan Danchev
Telerik

[Kushan Shah]

Hi,

Our requirement below : 
When user selects multiple checkbox it will appear in Combo Box itself. When we select options in Radcombobox and close the drop down and open it again, the selected items should be on top position in display order (Change position) and once it is deselected, it should set at same position as it was earlier. The requirement behind this is when there is long drop down, user does not have to scroll till bottom, they can see what he has selected once they open the drop down.

My code RadComboBox here :

<telerik:RadComboBox ID="RadComboBox2" runat="server"
                                                            OnClientDropDownOpened="OnClientDropDownOpening"
                                                            OnClientItemChecked="OnClientItemChecked"
                                                            AutoPostBack="true"
                                                            CheckBoxes="true"
                                                            EnableCheckAllItemsCheckBox="true"
                                                            Height="70px">
                                                            <Items>
                                                                <telerik:RadComboBoxItem Text="test1" Value="1" />
                                                                <telerik:RadComboBoxItem Text="test2" Value="2" />
                                                                <telerik:RadComboBoxItem Text="test3" Value="3" />
                                                                <telerik:RadComboBoxItem Text="test4" Value="4" />
                                                                <telerik:RadComboBoxItem Text="test5" Value="5" />
                                                                <telerik:RadComboBoxItem Text="test6" Value="6" />
                                                                <telerik:RadComboBoxItem Text="test7" Value="7" />
                                                                <telerik:RadComboBoxItem Text="test8" Value="8" />
                                                                <telerik:RadComboBoxItem Text="test9" Value="9" />
                                                                <telerik:RadComboBoxItem Text="test10" Value="10" />
                                                                <telerik:RadComboBoxItem Text="test11" Value="11" />
                                                            </Items>
                                                        </telerik:RadComboBox>

 

Thank you for your help.

[Ivan Danchev]

Hello Kushan Shah,

The sorting you describe will require custom implementation, since it defers from the sorting supported by the ComboBox by default: ascending and descending. You will have to implement your own logic in order to achieve the desired behavior. You can see the following documentation article, which shows and example of custom sorting implementation. 

Regards,
Ivan Danchev
Telerik by Progress