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

Filter and Sort

  • Filter and Sort
  • Sort range A to Z
    • Sort range A to Z
    • Sort range Z to A
  • Filter
  • Cut
  • Copy
  • Paste
  • Hide
  • Unhide
  • Delete
  • Hide
  • Unhide
  • Delete

The demo exhibits the default Filter and Sort functionalities that the RadSpredsheet control provides. You have the ability to either sort ascending, descending or to clear the sort. As for the filter - you can choose between filtering by value, or condition. If the Filter by condition option is chosen from the Filter menu, you will be able to select from a large list of conditions that suit best your scenario.

In this specific demo, the Filtering is enabled by default, using the Client API of the control. For this purpose the set_filter() function of the Range object is used, passing a true value. 

        Sys.Application.add_load(function () {
            var spreadsheet = $find("<%= RadSpreadsheet1.ClientID %>");
            var activeSheet = spreadsheet.get_activeSheet();
            var range = activeSheet.get_range("A2:F11");
            range.set_filter(true);
        });

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"  Inherits="Spreadsheet.Examples.FilterAndSort.DefaultCS" %>

<!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" />
    <telerik:RadScriptBlock runat="Server" ID="RadScriptBlock1">
        <script type="text/javascript">
            /* <![CDATA[ */
            Sys.Application.add_load(function () {
                var spreadsheet = $find("<%= RadSpreadsheet1.ClientID %>");
                var activeSheet = spreadsheet.get_activeSheet();
                var range = activeSheet.get_range("A2:F11");
                range.set_filter(true);
            });
            /* ]]> */
        </script>
    </telerik:RadScriptBlock>

    <div class="demo-container no-bg">
        <telerik:RadSpreadsheet runat="server" ID="RadSpreadsheet1">
            <Toolbar>
                <telerik:SpreadsheetToolbarTab Text="Filter and Sort">
                    <telerik:SpreadsheetToolbarGroup>
                        <telerik:SpreadsheetTool Name="Sort" ShowLabel="true" />
                        <telerik:SpreadsheetTool Name="Filter" ShowLabel="true" />
                    </telerik:SpreadsheetToolbarGroup>
                </telerik:SpreadsheetToolbarTab>
            </Toolbar>
        </telerik:RadSpreadsheet>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance