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


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <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>

        <telerik:RadGrid ID="grdReservation" EnableViewState="true" ViewStateMode="Enabled" GridLines="None" MasterTableView-GroupLoadMode="Server"
            runat="server" ShowStatusBar="false" AllowSorting="true" ShowGroupPanel="true" ShowFooter="true"
            OnNeedDataSource="RadGrid1_NeedDataSource" OnSortCommand="RadGrid1_SortCommand" OnItemDataBound="RadGrid1_ItemDataBound" OnItemCommand="RadGrid1_ItemCommand">
            <MasterTableView AutoGenerateColumns="false" DataKeyNames="ReservationKey" ItemStyle-Wrap="true" Width="100%" GroupsDefaultExpanded="false"
                ClientDataKeyNames="ReservationKey,Status">
                <Columns>
                    <telerik:GridBoundColumn DataField="Status" HeaderStyle-Width="25px" SortExpression="Status" UniqueName="Status" />
                    <telerik:GridBoundColumn DataField="ReservationType" HeaderStyle-Width="25px" SortExpression="ReservationType" UniqueName="Type" />
                    <telerik:GridBoundColumn DataField="Company" HeaderStyle-Width="160px" HeaderText="Group Name/Company" SortExpression="Company" ItemStyle-Wrap="false" UniqueName="GroupNameCompany" />
                    <telerik:GridBoundColumn DataField="RoomType" HeaderText="RoomType" SortExpression="RoomType" HeaderStyle-Width="80px" UniqueName="RoomType" />
                    <telerik:GridBoundColumn DataField="Balance" HeaderStyle-Width="70px" HeaderText="Balance" SortExpression="Balance" ItemStyle-HorizontalAlign="Right" UniqueName="Balance" />
                </Columns>
                <NoRecordsTemplate>
                    No Records
                </NoRecordsTemplate>
            </MasterTableView>
            <ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true" AllowDragToGroup="true" EnableRowHoverStyle="true" AllowGroupExpandCollapse="false" AllowRowsDragDrop="true">
                <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
                <Resizing AllowColumnResize="True" AllowRowResize="false" ResizeGridOnColumnResize="false" ClipCellContentOnResize="true" EnableRealTimeResize="false" AllowResizeToFit="true" />
                <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="380px" SaveScrollPosition="true" />
                <ClientEvents OnRowDblClick="rowDblClick" OnRowSelected="OnRwSelected" OnRowMouseOver="OnRowMouseOver" OnRowContextMenu="rowContextMenu" />
            </ClientSettings>
        </telerik:RadGrid>

        <telerik:RadContextMenu ID="RadContextMenu1" runat="server" EnableRoundedCorners="true" RenderMode="Lightweight" SkinID="MinimalSetOfTools" CssClass="centered-editor" Width="300px" EnableShadows="true"
            OnClientItemClicking="onContextMenuItemClick"
            OnClientShowing="onClientContextMenuShowing">
            <DefaultGroupSettings ExpandDirection="Auto" Flow="Vertical" />
        </telerik:RadContextMenu>

    </form>
</body>
</html>


<script type="text/javascript">
    var GlobalObjectControls = {};

    Sys.Application.add_load(
        function loadHandler() {
            Sys.Application.remove_load(loadHandler);
            ReloadSelectedRow();
        });


    function ReloadSelectedRow() {
        var grid = $find("<%=grdReservation.ClientID%>");
        var master = grid.get_masterTableView();

        var scrollArea = document.getElementById(grid.get_element().id + "_GridData");
        var row = master.get_selectedItems()[0];
        currentSelectedRowIndex = row.get_itemIndex();
        GlobalObjectControls.ResKey = row.getDataKeyValue("ReservationKey");
        if (row) {
            if ((row.get_element().offsetTop - scrollArea.scrollTop) + row.get_element().offsetHeight + 20 > scrollArea.offsetHeight) {
                //scroll down to selected row                     
                scrollArea.scrollTop = scrollArea.scrollTop + ((row.get_element().offsetTop - scrollArea.scrollTop) +
                    row.get_element().offsetHeight - scrollArea.offsetHeight) + row.get_element().offsetHeight + 150;
            }
            //if the position of the the selected row is above the viewable grid area  
            else if ((row.get_element().offsetTop - scrollArea.scrollTop) < 0) {
                //scroll the selected row to the top                   
                scrollArea.scrollTop = row.get_element().offsetTop;
            }
        }
    }


    function rowContextMenu(sender, eventArgs) {
        currentSelectedRowIndex = eventArgs.get_itemIndexHierarchical();
        eventArgs.get_tableView().selectItem(eventArgs.get_itemIndexHierarchical());
        var menu = GlobalObjectControls.ContextMenu;
        var evt = eventArgs.get_domEvent();
        menu.show(evt);
        evt.cancelBubble = true;
        evt.returnValue = false;
        if (evt.stopPropagation) {
            evt.stopPropagation();
            evt.preventDefault();
        }
    }

    function OnRwSelected(sender, args) {
        GlobalObjectControls.ResKey = args.getDataKeyValue('ReservationKey');
        currentSelectedRowIndex = args.get_itemIndexHierarchical();
    }

    function onClientContextMenuShowing(sender) {
        enabledisableMenuItems();
    }

    function enabledisableMenuItems() {
        var menu = GlobalObjectControls.ContextMenu;
        alert("ok" + currentSelectedRowIndex);    // this is ok, index is showing

        var reservationkey = GlobalObjectControls.GridReservation.get_masterTableView().get_dataItems([currentSelectedRowIndex].getDataKeyValue("ReservationKey"));  // this row is showing error "can't read properties of undefined
        var status = GlobalObjectControls.GridReservation.get_masterTableView().get_dataItems()[currentSelectedRowIndex].getDataKeyValue("Status");
        var reservationType = getReservationType();

        menu.enable();
    }

    function onContextMenuItemClick(sender, args) {

    }

    function onClientContextMenuShowing(sender, args) {

    }

    function rowDblClick(sender, args) {

    }

    function OnRowMouseOver(sender, args) {

    }
</script>
