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

Sorting radcombobox in client side

7 Answers 637 Views

ComboBox

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

7 Answers, 1 is accepted

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.

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

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;

}

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.