Telerik UI for Windows 8 HTML

RadGrid supports both single-column and multi-column sorting. On top of that, you can choose whether the sort modes will include switching back to unsorted mode. This is controlled by a single property - sortable which is explained below. Furthermore, you can pre-define sort expressions that will be applied to the grid on inital load.

Sort Modes

The sortable property will recognize the values listed in the table below, representing different sort modes:

Value

Meaning

none

Sorting is disabled. This is the default value.

single

Single column sorting—the grid records can be ordered in ascending or descending order based only on a single column. This is done by clicking/tapping its header. On clicking/tapping another column's header, sorting in the first column is cleared and the new one is applied.

multiple

Multi-column sorting—the grid records can be ordered in ascending or descending order based on one or more fields. This is done by clicking/tapping one column header until the desired order is achieved and then clicking/tapping another one to do even more specific sorting—usually when there can be multiple records with identical values for their fields.

single, allowUnsort

Same as single, with the difference that you can also unsort the sorted column by clicking/tapping its header.

multiple, allowUnsort

Same as multiple, but you can also unsort columns.

Tip

You can set the sortable property to a Boolean value. When set to true, the mode used will be "single, allowUnsort".

Sort Modes Copy imageCopy
var grid1Ctrl = new Telerik.UI.RadGrid(document.getElementById("grid1"), {
    sortable: "multiple, allowUnsort",
    dataSource: {
        data: [
            { Product: "Southwestern Twisted Chips", Price: 6.99 },
            { Product: "Top Shelf Combo Appetizer", Price: 9.49 },
            { Product: "Blue Cheese and Hazelnut Shortbread", Price: 10.69 },
            { Product: "Avocado Feta Salsa", Price: 6.99 },
            { Product: "Red Cherry Boost", Price: 6.99 },
        ],
        schema: {
            model: {
                fields: {
                    Product: { type: "string" },
                    Price: { type: "number" }
                }
            }
        }
    },
    columns: [
        { field: "Product" },
        { field: "Price", format: "{0:C}" }
    ]
});

The following image displays the above-defined grid sorted first by price ascending and then by product descending.

grid-sorting
Note

If you have not specified the data type of the data source fields, they are all considered as strings, meaning that they will be sorted alphabetically by default. If you have numeric or date fields, make sure you specify a model for your data. An example is available in this article: Data Binding Overview (see the Using different data types section).

Tip

If you want to disallow sorting for certain columns, make sure you set sortable to false in these columns' options object. For an example see the Columns article.

Performing Server Sorting

If you are binding RadChart to data that is coming from a remote endpoint that supports such data operations, you can push sorting to the server. This is done via the dataSource itself and setting the serverSorting option on the data source to true. When you delegate sorting to the server, you need to be prepared to receive the default parameter, which is orderBy. This field will contain the field name of the column to sort by in the dataset.