<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ClientSideFilter.aspx.cs" Inherits="ClientSideFilter" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .alphabetLetter
        {
            text-decoration: underline;
            cursor: pointer;
        }
    </style>

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script>
            function alhabetClick(value) {
                var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                masterTable.filter("Name", value, Telerik.Web.UI.GridFilterFunction.StartsWith, true);
            }
        </script>
    </telerik:RadScriptBlock>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadGrid ID="RadGrid1" runat="server" 
            onneeddatasource="RadGrid1_NeedDataSource" AllowFilteringByColumn="true">
        </telerik:RadGrid>
        <div id="alphabet">
            <span class="alphabetLetter" onclick="alhabetClick('A')">A</span>
            <span class="alphabetLetter" onclick="alhabetClick('B')">B</span>
            <span class="alphabetLetter" onclick="alhabetClick('C')">C</span>
        </div>
    </div>
    </form>
</body>
</html>
