ODataDataSource - 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
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="C#"  CodeFile="DefaultCS.aspx.cs" Inherits="ODataDataSource.Examples.Functionality.FilteringPaging.DefaultCS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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:GridBoundColumn DataField="OrderID" HeaderText="OrderID" SortExpression="OrderID"
                        UniqueName="OrderID" CurrentFilterFunction="EqualTo" 
                        FilterDelay="4000" ShowFilterIcon="false">
                    </telerik:GridBoundColumn>
                    <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:GridBoundColumn HeaderStyle-Width="90px" DataField="Freight" AutoPostBackOnFilter="true" CurrentFilterFunction="LessThan"
                        DataType="System.Decimal" HeaderText="Freight" SortExpression="Freight" UniqueName="Freight">
                    </telerik:GridBoundColumn>
                </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 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

Help Us Improve

Was this example helpful?