New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Adding Sort and Filter Expressions with Client-side Binding

This help topic illustrates how you can add sort and filter expressions for the grid when it is bound client-side.

Add sort expressions

RadGrid does not have public API for adding sort expressions on the client. However one can use the below methods to add a sort expression or multiple sort expressions.

<script type="text/javascript">
    function AddSortExpression(grid, fieldName, sortOrder) {
        var sortExpression = new Telerik.Web.UI.GridSortExpression();
        sortExpression.set_sortOrder(sortOrder);//integer: 1 - ascending, 2 - descending
        grid.get_masterTableView()._showSortIconForField(fieldName, sortOrder);

Add filter expressions

To add a new filter expression to your client-side bound grid, one should call the following grid methods.

<script type="text/javascript">
    function AddFilterExpression(grid, columnUniqueName, dataField, filterFunction, filterValue) {
        /* Some of the FilterControls such as a DatePicker, may have not finished rendering, as a result the Object is not available 
        and getting/setting their values cannot be done.
        For that reason, applying a little delay using setTimeout() function. 
        This will put the script execution in order, and ensures that the Filter Controls are rendered before applying new Expressions. */
        setTimeout(function () {
            var filterExpression = new Telerik.Web.UI.GridFilterExpression();
            var column = grid.get_masterTableView().getColumnByUniqueName(columnUniqueName);
            grid.get_masterTableView()._updateFilterControlValue(filterValue, columnUniqueName, filterFunction);
        }, 15);

Add default sort and filter expressions

Then if you want to have your client-side bound grid sorted and filtered by default, handle its OnGridCreated client-side event and there call the above functions.

<script type="text/javascript">
    function GridCreated(sender, args) {
        var grid = $find("<%=RadGrid1.ClientID %>");

        var fieldName = "Name";
        var sortOrder = Telerik.Web.UI.GridSortOrder.Descending;
        AddSortExpression(grid, fieldName, sortOrder);

        fieldName = "ID";
        sortOrder = Telerik.Web.UI.GridSortOrder.Descending;
        AddSortExpression(grid, fieldName, sortOrder);

        var columnUniqueName = "Name";
        var dataField = "Name";
        var filterFunction = Telerik.Web.UI.GridFilterFunction.Contains;
        var filterValue = "Ma";
        AddFilterExpression(grid, columnUniqueName, dataField, filterFunction, filterValue);
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" AllowSorting="true" AllowPaging="true" AllowFilteringByColumn="true"
    AutoGenerateColumns="false" runat="server">
            <telerik:GridBoundColumn DataField="ID" HeaderText="ID" DataType="System.Int32" />
            <telerik:GridBoundColumn DataField="Name" HeaderText="Name" />
            <telerik:GridNumericColumn DataField="UnitPrice" HeaderText="Unit price" DataType="System.Decimal" />
            <telerik:GridBoundColumn DataField="Date" DataFormatString="{0:d}" HeaderText="Date"
                DataType="System.DateTime" />
            <telerik:GridCheckBoxColumn DataField="Discontinued" HeaderText="Discontinued" DataType="System.Boolean" />
    <PagerStyle AlwaysVisible="true" />
        <ClientEvents OnGridCreated="GridCreated" />
        <DataBinding Location="WebService.asmx" SelectMethod="GetDataAndCount" />
In this article