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

<%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>
<%@ 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">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" EnableAJAX="true" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMenu1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadMenu1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMenu1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">

        <script type="text/javascript">
            var gridItemIndex = null;

            function MenuItemClicked(sender, eventArgs) {
                if (gridItemIndex) {
                    //retrieve the clicked menu item value and perform the necessary operation using RadGrid's client API methods
                    var clickedItemValue = eventArgs.get_item().get_text();
                    var grid = $find("<%=RadGrid1.ClientID %>");

                    switch (clickedItemValue) {
                        case "Edit":
                            grid.get_masterTableView().editItem(gridItemIndex);
                            break;
                        case "Add":
                            grid.get_masterTableView().showInsertItem();
                            break;
                        case "Delete":
                            grid.get_masterTableView().deleteItem(gridItemIndex);
                            break;
                        default:
                            break;
                    }
                }
            }
            function ShowContextMenu(index, evt) {
                //store the clicked grid item index
                if (index) {
                    gridItemIndex = index;
                }

                //display the context menu over non-input or anchor DOM elements
                var menu = $find("<%=RadMenu1.ClientID %>");
                var targetElement = evt.srcElement || evt.target;


                if (targetElement.tagName == "INPUT" || targetElement.tagName == "A" || targetElement.tagName == "BUTTON") {
                    return;
                }

                menu.show(evt);

                //prevent the default browser context menu appearance
                evt.cancelBubble = true;
                evt.returnValue = false;

                if (evt.stopPropagation) {
                    evt.stopPropagation();
                    evt.preventDefault();
                }
            }

            function RowContextMenu(sender, eventArgs) {
                var menu = $find("<%=RadMenu1.ClientID %>");
                var evt = eventArgs.get_domEvent();

                if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
                    return;
                }

                gridItemIndex = eventArgs.get_itemIndexHierarchical();

                sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[gridItemIndex].get_element(), true);

                menu.show(evt);

                evt.cancelBubble = true;
                evt.returnValue = false;

                if (evt.stopPropagation) {
                    evt.stopPropagation();
                    evt.preventDefault();
                }
            }
        </script>

    </telerik:RadCodeBlock>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Skin="Default" runat="server" />
    <telerik:RadGrid ID="RadGrid1" OnPreRender="RadGrid1_PreRender" DataSourceID="SqlDataSource1"
        runat="server" AutoGenerateColumns="False" AllowSorting="True" AllowMultiRowSelection="False"
        AllowPaging="True" PageSize="5" GridLines="None" ShowGroupPanel="true" OnItemCreated="RadGrid1_ItemCreated"
        OnItemCommand="RadGrid1_ItemCommand">
        <PagerStyle Mode="NumericPages"></PagerStyle>
        <MasterTableView DataSourceID="SqlDataSource1" DataKeyNames="EmployeeID" AllowMultiColumnSorting="True"
            GroupLoadMode="Server">
            <NestedViewTemplate>
                <asp:Panel runat="server" ID="InnerContainer" CssClass="viewWrap" Visible="true">
                    <fieldset oncontextmenu="ShowContextMenu('<%# ((GridDataItem)(((Telerik.Web.UI.GridNestedViewItem)(Container)).ParentItem)).ItemIndexHierarchical %>', event);">
                        <asp:Label ID="Label1" Font-Bold="true" Font-Italic="true" Text='<%# Eval("EmployeeID") %>'
                            Visible="false" runat="server" />
                        <asp:DetailsView ID="DetailsView1" AllowPaging="true" GridLines="None" Width="100%"
                            DataSourceID="SqlDataSource4" runat="server" Font-Italic="true" AutoGenerateRows="false">
                            <Fields>
                                <asp:BoundField DataFormatString="{0:MM/dd/yyyy}" HeaderText="BirthDate:" HtmlEncode="false"
                                    DataField="BirthDate" HeaderStyle-Font-Italic="false" HeaderStyle-Font-Bold="true" />
                                <asp:BoundField HeaderStyle-Font-Italic="false" HeaderStyle-Font-Bold="true" HeaderText="Country:"
                                    DataField="Country" />
                                <asp:BoundField HeaderText="City:" DataField="City" HeaderStyle-Font-Italic="false"
                                    HeaderStyle-Font-Bold="true" />
                                <asp:BoundField HeaderText="Address:" DataField="Address" HeaderStyle-Font-Italic="false"
                                    HeaderStyle-Font-Bold="true" />
                                <asp:BoundField HeaderText="HomePhone:" DataField="HomePhone" HeaderStyle-Font-Italic="false"
                                    HeaderStyle-Font-Bold="true" />
                            </Fields>
                        </asp:DetailsView>
                        <asp:SqlDataSource ID="SqlDataSource4" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                            ProviderName="System.Data.SqlClient" SelectCommand="SELECT BirthDate, Country, City, Address, HomePhone FROM Employees Where EmployeeID = @EmployeeID"
                            runat="server">
                            <SelectParameters>
                                <asp:ControlParameter ControlID="Label1" PropertyName="Text" Type="String" Name="EmployeeID" />
                            </SelectParameters>
                        </asp:SqlDataSource>
                    </fieldset>
                </asp:Panel>
            </NestedViewTemplate>
            <Columns>
                <telerik:GridBoundColumn SortExpression="FirstName" HeaderText="First Name" HeaderButtonType="TextButton"
                    DataField="FirstName" UniqueName="FirstName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn SortExpression="LastName" HeaderText="Last Name" HeaderButtonType="TextButton"
                    DataField="LastName" UniqueName="LastName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn SortExpression="Title" HeaderText="Title" HeaderButtonType="TextButton"
                    DataField="Title" UniqueName="Title">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn SortExpression="BirthDate" DataFormatString="{0:MM/dd/yyyy}"
                    HeaderText="Birth Date" HeaderButtonType="TextButton" DataField="BirthDate" UniqueName="BirthDate">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn SortExpression="City" HeaderText="City" HeaderButtonType="TextButton"
                    DataField="City" UniqueName="City">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn SortExpression="Country" HeaderText="Country" HeaderButtonType="TextButton"
                    DataField="Country" UniqueName="Country">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <ClientEvents OnRowContextMenu="RowContextMenu"></ClientEvents>
            <Selecting AllowRowSelect="true" />
        </ClientSettings>
    </telerik:RadGrid>
    <telerik:RadContextMenu ID="RadMenu1" runat="server" OnClientItemClicked="MenuItemClicked"
        EnableRoundedCorners="true" EnableShadows="true">
        <Items>
            <telerik:RadMenuItem Text="Add" />
            <telerik:RadMenuItem Text="Edit" />
            <telerik:RadMenuItem Text="Delete" />
        </Items>
    </telerik:RadContextMenu>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Employees"
        runat="server"></asp:SqlDataSource>
    </form>
</body>
</html>
