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

<%@ 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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" EnableAJAX="true" DefaultLoadingPanelID="RadAjaxLoadingPanel1"
            runat="server" RequestQueueSize="20">
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
        </telerik:RadAjaxLoadingPanel>
        <div style="border-color: Black; width: 1000px;">
            <telerik:RadGrid ID="RadGrid1" Width="100%" runat="server" ShowGroupPanel="True"
                AllowPaging="True" AllowMultiRowSelection="false" AllowFilteringByColumn="true"
                PageSize="50" DataSourceID="SqlDataSource1" PagerStyle-AlwaysVisible="true" AllowAutomaticUpdates="true"
                AutoGenerateEditColumn="true" EnableLinqExpressions="false">
                <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
                <MasterTableView AutoGenerateColumns="False" Name="Requirements" EditMode="EditForms"
                    GridLines="None" DataKeyNames="CategoryID" AllowSorting="true" DataSourceID="SqlDataSource1"
                    CommandItemDisplay="TopAndBottom">
                    <Columns>
                        <telerik:GridBoundColumn DataField="CategoryID" DataType="System.Int32" DefaultInsertValue=""
                            HeaderText="CategoryID" ReadOnly="True" SortExpression="CategoryID" UniqueName="CategoryID">
                            <HeaderStyle Width="20%" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn UniqueName="CategoryName" DataField="CategoryName" HeaderText="Category"
                            HeaderStyle-Width="250px">
                            <FilterTemplate>
                                <telerik:RadComboBox ID="RadComboBoxCategory" Width="250" DataSourceID="SqlDataSource2"
                                    DataTextField="CategoryName" DataValueField="CategoryName" Height="400px" AppendDataBoundItems="true"
                                    SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("CategoryName").CurrentFilterValue %>'
                                    runat="server" OnClientSelectedIndexChanged="CategoryIndexChanged">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="All" />
                                    </Items>
                                </telerik:RadComboBox>
                                <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">

                                    <script type="text/javascript">
                                        function CategoryIndexChanged(sender, args) {
                                            var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            tableView.filter("CategoryName", args.get_item().get_value(), "EqualTo");
                                        }
                                    </script>

                                </telerik:RadScriptBlock>
                            </FilterTemplate>
                            <HeaderStyle Width="250px"></HeaderStyle>
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings>
                    <Resizing AllowColumnResize="true" ClipCellContentOnResize="false" EnableRealTimeResize="true"
                        ResizeGridOnColumnResize="true" />
                </ClientSettings>
            </telerik:RadGrid>
        </div>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            DeleteCommand="DELETE FROM [Categories] WHERE [CategoryID] = @CategoryID" 
            InsertCommand="INSERT INTO [Category] ([CategoryName]) VALUES (@CategoryName)"
            SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]"
            UpdateCommand="UPDATE [Categories] SET [CategoryName] = @CategoryName WHERE [CategoryID] = @CategoryID">
            <DeleteParameters>
                <asp:Parameter Name="CategoryID" Type="Int32" />
            </DeleteParameters>
            <UpdateParameters>
                <asp:Parameter Name="CategoryName" Type="String" />
                <asp:Parameter Name="CategoryID" Type="Int32" />
            </UpdateParameters>
            <InsertParameters>
                <asp:Parameter Name="CategoryName" Type="String" />
            </InsertParameters>
        </asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]">
        </asp:SqlDataSource>
    </div>
    </form>
</body>
</html>
