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

<!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>
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    <telerik:RadCodeBlock runat="server">

        <script type="text/javascript">
            function OnDateSelected(sender, eventArgs)
            {
                $find("<%= RadGrid2.ClientID %>").get_masterTableView().fireCommand("MyCommand");
            }
        </script>

    </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>

    <script type="text/javascript">
        //Put your Java Script code here.
    </script>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div>
        <telerik:RadGrid ID="RadGrid2" DataSourceID="SqlDataSource1" AllowPaging="True"
            ShowFooter="true" runat="server" AutoGenerateColumns="False" AllowSorting="True"
            PageSize="3" GridLines="None" CellPadding="0" AllowAutomaticInserts="true" AllowAutomaticUpdates="true">
            <MasterTableView DataKeyNames="EmployeeID" AutoGenerateColumns="false" CommandItemDisplay="Top">
                <Columns>
                    <telerik:GridEditCommandColumn UniqueName="EditCommandColumn" HeaderText="Edit column">
                        <ItemStyle Width="50px" />
                    </telerik:GridEditCommandColumn>
                    <telerik:GridHTMLEditorColumn UniqueName="Notes" SortExpression="Notes" HeaderText="HTMLEditorColumn"
                        DataField="Notes" FooterText="HTMLEditorColumn footer" HeaderStyle-Width="200px">
                    </telerik:GridHTMLEditorColumn>
                    <telerik:GridDropDownColumn DataSourceID="SqlDataSource2" ListTextField="TitleOfCourtesy"
                        ListValueField="TitleOfCourtesy" UniqueName="GridDropDownColumn" SortExpression="TitleOfCourtesy"
                        HeaderText="DropDown Column" DropDownControlType="DropDownList" DataField="TitleOfCourtesy"
                        FooterText="DropDown column footer">
                    </telerik:GridDropDownColumn>
                    <telerik:GridDropDownColumn DataSourceID="SqlDataSource3" ListTextField="City" ListValueField="City"
                        UniqueName="City" SortExpression="City" HeaderText="RadComboBox Column" DataField="City"
                        DropDownControlType="RadComboBox" FooterText="RadComboBox column footer">
                    </telerik:GridDropDownColumn>
                    <telerik:GridMaskedColumn Mask="(###) ###-####" UniqueName="HomePhone" SortExpression="HomePhone"
                        HeaderText="Masked Column" DataField="HomePhone" FooterText="MaskedColumn footer">
                        <ItemStyle Width="100px" />
                    </telerik:GridMaskedColumn>
                    <telerik:GridNumericColumn UniqueName="Extension" SortExpression="Extension" HeaderText="Numeric Column"
                        DataField="Extension" ColumnEditorID="GridNumericColumnEditor1" FooterText="NumericColumn footer">
                    </telerik:GridNumericColumn>
                    <telerik:GridDateTimeColumn UniqueName="HireDate" PickerType="DateTimePicker" HeaderText="DateTime Column"
                        DataField="HireDate" FooterText="DateTimeColumn footer" DataFormatString="{0:MM/dd/yyyy}">
                        <ItemStyle Width="120px" />
                    </telerik:GridDateTimeColumn>
                    <telerik:GridCalculatedColumn UniqueName="Name" SortExpression="LastName" HeaderText="Calculated Column"
                        DataFields="FirstName, LastName" Expression='{0} + "&nbsp;" + {1}' FooterText="CalculatedColumn footer">
                    </telerik:GridCalculatedColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <Resizing AllowColumnResize="true" />
            </ClientSettings>
        </telerik:RadGrid>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT * FROM [Employees]"></asp:SqlDataSource>
             <asp:SqlDataSource runat="server" ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT DISTINCT [TitleOfCourtesy] FROM [Employees]"></asp:SqlDataSource>
         <asp:SqlDataSource runat="server" ID="SqlDataSource3" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT DISTINCT [City] FROM [Employees]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>
