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

Filtering, Sorting and Paging with RadGrid

OrderIDShipNameOrderDateShippedDateShipCountryShipPostalCodeFreight
   
       
Page size:
 21 items in 2 pages
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
  • NoFilter
  • Contains
  • DoesNotContain
  • StartsWith
  • EndsWith
  • EqualTo
  • NotEqualTo
  • GreaterThan
  • LessThan
  • GreaterThanOrEqualTo
  • LessThanOrEqualTo
  • Between
  • NotBetween
  • IsEmpty
  • NotIsEmpty
  • IsNull
  • NotIsNull
  • Custom

ODataSource is a client data source component that allows querying local and remote services that expose OData feed. It features design-time wizard for visual configuration of the data model for the data, which should be obtained from the service.

The following demo implements filtering, sorting and paging entirely on the client through the RadODataDataSource control.

You can also consume an OData service codelessly through a Kendo Grid.

The Filtering and Sorting functionality is implemented for the following grid columns

  • OrderID - the filter expression for this column is of type EqualTo and it's statically defined.
  • ShipName - the filter expression for this column is of type Contains and it's again statically defined.
  • ShipCountry - for this column the filter expression is of type StartsWith.
  • Freight - for this column the filter expression could be chosen from the filter control.

The sorting functionality is enabled by clicking on the column header. There are two sorting options available : ascending and descending.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
<%@ Page Language="VB"  CodeFile="DefaultVB.aspx.vb" Inherits="ODataDataSource.Examples.Functionality.FilteringPaging.DefaultVB"%>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <script type="text/javascript" src="scripts.js"></script>

    <telerik:RadAjaxLoadingPanel ID="RadLoadingPanel1" runat="server" />

      <div class="demo-container no-bg">
        <telerik:RadGrid RenderMode="Lightweight" AutoGenerateColumns="false" ID="RadGrid1" AllowSorting="true"
            PageSize="20" ShowFooter="True" AllowPaging="True" runat="server" GridLines="None">
            <PagerStyle Mode="NextPrevAndNumeric" />
            <GroupingSettings CaseSensitive="false" />
            <MasterTableView AutoGenerateColumns="false" AllowFilteringByColumn="true" ShowFooter="True"
                TableLayout="Auto">
                <Columns>
                    <telerik:GridNumericColumn DataField="OrderID" HeaderText="OrderID" SortExpression="OrderID"
                        UniqueName="OrderID" CurrentFilterFunction="EqualTo"  DataType="System.Int32"
                        FilterDelay="4000" ShowFilterIcon="false">
                    </telerik:GridNumericColumn>
                    <telerik:GridBoundColumn FilterControlWidth="220px" DataField="ShipName" HeaderText="ShipName"
                        SortExpression="ShipName" UniqueName="ShipName" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"
                        ShowFilterIcon="false">
                    </telerik:GridBoundColumn>
                    <telerik:GridDateTimeColumn DataField="OrderDate" HeaderText="OrderDate"
                        AllowFiltering="false" SortExpression="OrderDate" UniqueName="OrderDate" PickerType="None"
                        AllowSorting="false" DataFormatString="{0:d}">
                    </telerik:GridDateTimeColumn>
                    <telerik:GridDateTimeColumn DataField="ShippedDate" HeaderText="ShippedDate"
                        SortExpression="ShippedDate" UniqueName="ShippedDate" PickerType="DatePicker"
                        AllowSorting="false" AllowFiltering="false" DataFormatString="{0:D}">
                        <HeaderStyle Width="160px" />
                    </telerik:GridDateTimeColumn>
                    <telerik:GridBoundColumn FilterControlWidth="100px" DataField="ShipCountry" HeaderText="ShipCountry"
                        AutoPostBackOnFilter="true" SortExpression="ShipCountry" UniqueName="ShipCountry"
                        AllowFiltering="true" CurrentFilterFunction="StartsWith" ShowFilterIcon="false">
                    </telerik:GridBoundColumn>
                    <telerik:GridMaskedColumn DataField="ShipPostalCode" HeaderText="ShipPostalCode"
                        SortExpression="ShipPostalCode" UniqueName="ShipPostalCode" Mask="#####" AllowFiltering="false"
                        AllowSorting="false">
                    </telerik:GridMaskedColumn>
                    <telerik:GridNumericColumn HeaderStyle-Width="90px" DataField="Freight" AutoPostBackOnFilter="true" CurrentFilterFunction="LessThan"
                        DataType="System.Decimal" HeaderText="Freight" SortExpression="Freight" UniqueName="Freight">
                    </telerik:GridNumericColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <Scrolling AllowScroll="false" />
                <ClientEvents OnCommand="OnCommand" />
            </ClientSettings>
        </telerik:RadGrid>
    </div>

    <telerik:RadODataDataSource ID="RadODataDataSource1" runat="server">
        <Schema>
            <telerik:DataModel ModelID="Order" Set="Orders" PageSize="20" />
        </Schema>
        <ClientEvents RequestSucceeded="requestSucceeded" Requesting="requesting" RequestFailed="requestFailed" />
    </telerik:RadODataDataSource>

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            Sys.Application.add_load(function () {
                demo.dataSource = $find("<%=RadODataDataSource1.ClientID%>");
                demo.grid = $find("<%=RadGrid1.ClientID%>");
                demo.loadingPanel = $find("<%=RadLoadingPanel1.ClientID%>");
                demo.dataSource.fetch("Order");
            });
        </script>
    </telerik:RadScriptBlock>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance