Number sorting for Telerik's RadComboBox

Introduction

If you still haven't found a way to sort numbers in a RadComboBox, this article should help you implement custom sorting on number values.

Background

Telerik's RadComboBox sorts items using the 'Text' field. This is the default and any other kind of sorting should be handled by implementing a custom sort.

It works for most applications until you start displaying numbers.

With no custom sorting implemented, numbers sorted as text will look something like this:

0, 1, 10, 11, 2, 20, 21, 3, 4, 41

Using the code

Telerik already provides us a sample of how to sort using the 'Value' field of the RadComboBox item. We are using the same sample source code but for this implementation, we are capturing the 'Text' field converted as number.

Let's create a class named NumberComparer.cs implementing interface IComparer.

Note that for this code to work, we have to reference Telerik in our using statement with System and System.Collections.

using System;
using System.Collections;
using Telerik.Web.UI;

public class NumberComparer : IComparer
{
	public int Compare(object x, object y)
	{
		RadComboBoxItem p1 = new RadComboBoxItem();
		RadComboBoxItem p2 = new RadComboBoxItem();

		if (x is RadComboBoxItem)
			p1 = x as RadComboBoxItem;
		else
			throw new ArgumentException("Object is not of type RadComboBoxItem.");

		if (y is RadComboBoxItem)
			p2 = y as RadComboBoxItem;
		else
			throw new ArgumentException("Object is not of type RadComboBoxItem.");

		int cmp = 0;
		float fp1;
		float fp2;
		float.TryParse(p1.Text, out fp1);
		float.TryParse(p2.Text, out fp2);

		if (p1.ComboBoxParent.Sort == RadComboBoxSort.Ascending)
		{
			if (fp1 == fp2)
				cmp = 0;
			else if (fp1 < fp2)
				cmp = -1;
			else
				cmp = 1;
		}

		if (p1.ComboBoxParent.Sort == RadComboBoxSort.Descending)
		{
			if (fp2 == fp1)
				cmp = 0;
			else if (fp2 < fp1)
				cmp = -1;
			else
				cmp = 1;
		}
			
		return cmp;
	}
}

IComparer only has one method we need to implement - Compare. In this case, we are comparing RadComboBoxItems. If the two parameters to compare are not RadComboBoxItems, we throw an ArgumentException.

We now create cmp of type int for holding our comparison result value.

Less than zero : x is less than y

Zero: x equals y

Greater than zero: x is greater than y

Next, we need to consider how we can convert the number texts as numbers.

For my application, I'm using float data type since I have both whole and decimal numbers with maximum two digits. If your application considers more significant values (i.e, currency, scientific numbers etc), check out other number data types.

Using float's TryParse method, now I can get the number values for each RadComboBoxItem.

		float fp1;
		float fp2;
		float.TryParse(p1.Text, out fp1);
		float.TryParse(p2.Text, out fp2);

We can now compare the values as numbers when the sort is in either ascending or descending order.

Ascending order requires us to compare x to y and return any of -1, 0 and 1.

		if (p1.ComboBoxParent.Sort == RadComboBoxSort.Ascending)
		{
			if (fp1 == fp2)
				cmp = 0;
			else if (fp1 < fp2)
				cmp = -1;
			else
				cmp = 1;
		}

Descending order compares y to x and returns any of -1, 0 and 1.

		if (p1.ComboBoxParent.Sort == RadComboBoxSort.Descending)
		{
			if (fp2 == fp1)
				cmp = 0;
			else if (fp2 < fp1)
				cmp = -1;
			else
				cmp = 1;
		}

Assuming we already have a data source numberDataSource with members number_value as the display text and number_primarykey as the data value.

Let's bind our RadComboBox to numberDataSource, set the text and value field, call DataBind() and finally, SortItems() passing our custom comparer as an argument.

	RadComboBox numberList = new RadComboBox();
	numberList.DataSource = numberDataSource;
	numberList.DataTextField = "number_value";
	numberList.DataValueField = "number_primarykey";
	numberList.DataBind();

    //Call our custom number comparer
	numberList.SortItems(new NumberComparer());