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 throught the RadODataDataSource control.

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 expresion 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" FilterControlWidth="40px" CurrentFilterFunction="EqualTo"
                        FilterDelay="4000" ShowFilterIcon="false">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn FilterControlWidth="105px" DataField="ShipName" HeaderText="ShipName"
                        SortExpression="ShipName" UniqueName="ShipName" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"
                        ShowFilterIcon="false">
                    </telerik:GridBoundColumn>
                    <telerik:GridDateTimeColumn FilterControlWidth="50px" DataField="OrderDate" HeaderText="OrderDate"
                        AllowFiltering="false" SortExpression="OrderDate" UniqueName="OrderDate" PickerType="None"
                        AllowSorting="false" DataFormatString="{0:d}">
                    </telerik:GridDateTimeColumn>
                    <telerik:GridDateTimeColumn FilterControlWidth="120px" 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="50px" DataField="ShipCountry" HeaderText="ShipCountry"
                        AutoPostBackOnFilter="true" SortExpression="ShipCountry" UniqueName="ShipCountry"
                        AllowFiltering="true" CurrentFilterFunction="StartsWith" ShowFilterIcon="false">
                    </telerik:GridBoundColumn>
                    <telerik:GridMaskedColumn FilterControlWidth="50px" DataField="ShipPostalCode" HeaderText="ShipPostalCode"
                        SortExpression="ShipPostalCode" UniqueName="ShipPostalCode" Mask="#####" AllowFiltering="false"
                        AllowSorting="false">
                        <FooterStyle Font-Bold="true" />
                    </telerik:GridMaskedColumn>
                    <telerik:GridBoundColumn HeaderStyle-Width="90px" FilterControlWidth="50px" DataField="Freight"
                        DataType="System.Decimal" HeaderText="Freight" SortExpression="Freight" UniqueName="Freight">
                        <FooterStyle Font-Bold="true" />
                    </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" />
    </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?