This is a migrated thread and some comments may be shown as answers.

Sorting radcombobox in client side

7 Answers 192 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
saravanan k
Top achievements
Rank 1
saravanan k asked on 20 Jul 2010, 05:52 AM
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

7 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 20 Jul 2010, 10:44 AM
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.
0
Leif
Top achievements
Rank 1
answered on 05 Dec 2011, 04:28 PM
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
0
Shiva
Top achievements
Rank 1
answered on 22 Oct 2014, 08:34 PM
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
0
SUNIL
Top achievements
Rank 2
answered on 31 Oct 2015, 05:05 AM

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

0
Ivan Danchev
Telerik team
answered on 04 Nov 2015, 01:39 PM
Hello,

Thank you for sharing your sorting method with the community.

Regards,
Ivan Danchev
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
0
Kushan Shah
Top achievements
Rank 1
answered on 03 Jan 2017, 07:05 AM

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.

0
Ivan Danchev
Telerik team
answered on 04 Jan 2017, 02:15 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ComboBox
Asked by
saravanan k
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Leif
Top achievements
Rank 1
Shiva
Top achievements
Rank 1
SUNIL
Top achievements
Rank 2
Ivan Danchev
Telerik team
Kushan Shah
Top achievements
Rank 1
Share this question
or