<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Culture="auto" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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>Untitled Page</title>
    <style type="text/css">

.RadGrid .rfdRoundedWrapper{width:75%}

    </style>
</head>
<body>
    <form id="form1" runat="server">
    
    <asp:ScriptManager runat="server" ID="Manager1">
    </asp:ScriptManager>
    

        
       <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" GridLines="None" OnItemCommand="RadGrid1_ItemCommand">   
        <MasterTableView AutoGenerateColumns="False" CellSpacing="-1" DataSourceID="SqlDataSource1"  
            DataKeyNames="EmployeeID" AllowFilteringByColumn="true">   
            <RowIndicatorColumn>  
                <HeaderStyle Width="20px"></HeaderStyle>  
            </RowIndicatorColumn>  
            <ExpandCollapseColumn>  
                <HeaderStyle Width="20px"></HeaderStyle>  
            </ExpandCollapseColumn>  
            <Columns>  
            <telerik:GridEditCommandColumn EditText="Edit"></telerik:GridEditCommandColumn>  
                <telerik:GridBoundColumn DataField="EmployeeID" DataType="System.Int32" HeaderText="EmployeeID"  
                    ReadOnly="True" SortExpression="EmployeeID" UniqueName="EmployeeID" AllowFiltering="false">   
                </telerik:GridBoundColumn>  
                <telerik:GridBoundColumn DataField="LastName" HeaderText="LastName" SortExpression="LastName"  
                    UniqueName="LastName" AllowFiltering="false">   
                </telerik:GridBoundColumn>  
                <telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName"  
                    UniqueName="FirstName" AllowFiltering="false">   
                </telerik:GridBoundColumn>  
                <telerik:GridBoundColumn DataField="TitleOfCourtesy" HeaderText="TitleOfCourtesy"  
                    SortExpression="TitleOfCourtesy" UniqueName="TitleOfCourtesy">   
                    <FilterTemplate>  
                        <telerik:RadComboBox runat="server" ID="ddlFilter" OnClientSelectedIndexChanged="OnFilterByTitle"  
                            SelectedValue='<%#  ((GridItem)Container).OwnerTableView.GetColumn("TitleOfCourtesy").CurrentFilterValue  %>'>   
                            <Items>  
                                <telerik:RadComboBoxItem Text="All" Value="All" />  
                                <telerik:RadComboBoxItem Text="Dr." Value="Dr." />  
                                <telerik:RadComboBoxItem Text="Mr." Value="Mr." />  
                                <telerik:RadComboBoxItem Text="Ms." Value="Ms." />  
                                <telerik:RadComboBoxItem Text="Mrs." Value="Mrs." />  
                            </Items>  
                        </telerik:RadComboBox>  
                        <telerik:RadScriptBlock ID="ScriptBlock1" runat="server">   
                            <script type="text/javascript">   
                                function OnFilterByTitle(sender, args) {   
                                    var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");   
                                    var selectedValue = args.get_item().get_value();   
  
                                    if (selectedValue == "All") {   
                                        tableView.filter("TitleOfCourtesy", "", Telerik.Web.UI.GridFilterFunction.NoFilter);   
                                    }   
                                    else {   
                                        tableView.filter("TitleOfCourtesy", selectedValue, Telerik.Web.UI.GridFilterFunction.EqualTo);   
                                    }   
                                }   
                            </script>  
                        </telerik:RadScriptBlock>  
                    </FilterTemplate>  
                </telerik:GridBoundColumn>  
            </Columns>  
            <EditFormSettings EditFormType="WebUserControl" UserControlName="EditForm.ascx">   
                <EditColumn UniqueName="EditCommandColumn1">   
                </EditColumn>  
            </EditFormSettings>  
        </MasterTableView>  
    </telerik:RadGrid>    
    
       <asp:AccessDataSource ID="SqlDataSource1" runat="server" DataFile="~/App_Data/Nwind.mdb"
           SelectCommand="select EmployeeID, LastName, FirstName, TitleOfCourtesy from Employees">
       </asp:AccessDataSource>
    </form>
</body>
</html>
