<%@ Page Language="c#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.Client.InsertUpdateDelete.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <style type="text/css">
        .body
        {
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
            background-color: #FFFFE0;
        }
        .grid td
        {
            cursor: pointer;
        }
        .grid
        {
            height: 300px;
        }
        .button
        {
            background: transparent url(http://www.telerik.com/DEMOS/ASPNET/Prometheus/TabStrip/Examples/ApplicationScenarios/Wizard/images/button.gif) no-repeat scroll left top;
            border: medium none;
            height: 28px;
            width: 90px;
        }
    </style>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var employeeID, currentEmployee, currentRowIndex, grid = null;

            var employee =
            {
                EmployeeID: null,
                FirstName: null,
                LastName: null,
                Title: null,
                TitleOfCourtesy: null,
                BirthDate: null,
                Notes: null,

                create: function ()
                {
                    var obj = new Object();

                    obj.EmployeeID = "";
                    obj.FirstName = "";
                    obj.LastName = "";
                    obj.Title = "";
                    obj.TitleOfCourtesy = "";
                    obj.BirthDate = "";
                    obj.Notes = "";

                    return obj;
                }
            };
            function gridCreated(sender, args)
            {
                grid = sender;
            }
            function rowDataBound(sender, args)
            {
                if (currentEmployee != null && currentEmployee.EmployeeID == getDataItemKeyValue(grid, args.get_item()))
                {
                    var cell = grid.get_masterTableView().getCellByColumnUniqueName(args.get_item(), "EmployeeID");
                    var tooltipManager = $find("<%= RadToolTipManager1.ClientID %>");
                    tooltipManager.createToolTip(cell);
                }
            }
            function getDataItemKeyValue(radGrid, item)
            {
                return parseInt(radGrid.get_masterTableView().getCellByColumnUniqueName(item, "EmployeeID").innerHTML);
            }

            function pageLoad(sender, args)
            {
                employeeID = getDataItemKeyValue($find("<%= RadGrid1.ClientID %>"), $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_dataItems()[0]);
                $find("<%= LastName.ClientID %>").focus();
                currentRowIndex = 0;
            }

            function rowSelected(sender, args)
            {
                employeeID = getDataItemKeyValue(sender, args.get_gridDataItem());

                currentRowIndex = args.get_gridDataItem().get_element().rowIndex;

                $find("<%= RadTabStrip1.ClientID %>").set_selectedIndex(0);

                MyWebService.GetEmployeeByEmployeeID(employeeID, setValues)
            }

            function setValues(employee)
            {
                $get("<%= EmployeeID.ClientID %>").innerHTML = employee.EmployeeID;

                $find("<%= LastName.ClientID %>").set_value(employee.LastName);
                $find("<%= FirstName.ClientID %>").set_value(employee.FirstName);
                $find("<%= Title.ClientID %>").set_value(employee.Title);
                $find("<%= TitleOfCourtesy.ClientID %>").findItemByText(employee.TitleOfCourtesy).select();
                $find("<%= BirthDate.ClientID %>").set_selectedDate(employee.BirthDate);
                $find("<%= Notes.ClientID %>").set_html(employee.Notes);

                $find("<%= LastName.ClientID %>").focus();
            }

            function getValues()
            {
                employee.EmployeeID = $get("<%= EmployeeID.ClientID %>").innerHTML;

                employee.LastName = $find("<%= LastName.ClientID %>").get_value();
                employee.FirstName = $find("<%= FirstName.ClientID %>").get_value();
                employee.Title = $find("<%= Title.ClientID %>").get_value();
                employee.TitleOfCourtesy = $find("<%= TitleOfCourtesy.ClientID %>").get_value();
                employee.BirthDate = $find("<%= BirthDate.ClientID %>").get_selectedDate();
                employee.Notes = $find("<%= Notes.ClientID %>").get_html();

                return employee;
            }

            function updateChanges()
            {
                MyWebService.UpdateEmployeeByEmployee(getValues(), updateGrid);
            }

            function updateGrid(result)
            {
                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                tableView.set_dataSource(result);
                tableView.dataBind();

                var grid = $find("<%= RadGrid1.ClientID %>");
                grid.repaint();
            }

            function tabSelected(sender, args)
            {
                if (currentEmployee == null)
                {
                    currentEmployee = getValues();
                }

                switch (args.get_tab().get_index())
                {
                    case 1:
                        {
                            var gridItems = $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_dataItems();
                            var newID = getDataItemKeyValue($find("<%= RadGrid1.ClientID %>"), gridItems[gridItems.length - 1]) + 1;

                            var newEmployee = employee.create();
                            newEmployee.EmployeeID = newID;
                            setValues(newEmployee);

                            $get("<%= SaveChanges.ClientID %>").value = "Add";
                            $get("<%= Delete.ClientID %>").style.display = "none";

                            break;
                        }
                    default:
                        {
                            setValues(currentEmployee);
                            currentEmployee = null;

                            $get("<%= SaveChanges.ClientID %>").value = "Save";
                            $get("<%= Delete.ClientID %>").style.display = "";

                            break;
                        }
                }
            }

            function deleteCurrent()
            {
                var table = $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_element();
                var row = table.rows[currentRowIndex];
                table.deleteRow(currentRowIndex);

                var dataItem = $find(row.id);
                if (dataItem)
                {
                    dataItem.dispose();
                    Array.remove($find("<%= RadGrid1.ClientID %>").get_masterTableView()._dataItems, dataItem);
                }

                var gridItems = $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_dataItems();

                MyWebService.DeleteEmployeeByEmployeeID(employeeID, updateGrid);

                gridItems[gridItems.length - 1].set_selected(true);
            }

           
        </script>
    </telerik:RadCodeBlock>
</head>
<body class="BODY">
    <form runat="server" id="mainForm" method="post">
    <telerik:RadScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="MyWebService.asmx" />
        </Services>
    </telerik:RadScriptManager>
    <div style="height: 100%; padding: 10px">
        <telerik:RadGrid ID="RadGrid1" CssClass="grid" DataSourceID="SqlDataSource1" runat="server"
            GridLines="None" OnDataBound="RadGrid1_DataBound" OnColumnCreated="RadGrid1_ColumnCreated"
            Height="300px" OnItemDataBound="RadGrid1_ItemDataBound">
            <MasterTableView TableLayout="Fixed" ClientDataKeyNames="EmployeeID" />
            <ClientSettings>
                <Selecting AllowRowSelect="true" />
                <ClientEvents OnRowSelected="rowSelected" OnRowDataBound="rowDataBound" OnGridCreated="gridCreated" />
                <Scrolling AllowScroll="true" UseStaticHeaders="true" />
            </ClientSettings>
        </telerik:RadGrid>
        <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConflictDetection="CompareAllValues"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title], [TitleOfCourtesy], [BirthDate], [Notes] FROM [Employees]">
        </asp:SqlDataSource>
        <telerik:RadTabStrip ID="RadTabStrip1" OnClientTabSelected="tabSelected" Style="margin-top: 10px;"
            SelectedIndex="0" runat="server">
            <Tabs>
                <telerik:RadTab Text="Edit employee" />
                <telerik:RadTab Text="Add new employee" />
            </Tabs>
        </telerik:RadTabStrip>
        <div style="border: 1px solid threedshadow;">
            <table border="0" style="margin-top: 20px; width: 100%;">
                <tr>
                    <td>
                        Employee ID:
                    </td>
                    <td>
                        <asp:Label ID="EmployeeID" Style="float: left; font-weight: bold;" runat="server" />
                        <asp:Button ID="SaveChanges" CssClass="button" Style="float: right; color: black;
                            font-weight: bold;" OnClientClick="updateChanges(); return false;" Text="Save"
                            runat="server" />
                        <asp:Button ID="Delete" CssClass="button" Style="float: right; margin-right: 10px;
                            color: black; font-weight: bold;" OnClientClick="if(!confirm('Are you sure you want to delete this employee?'))return false; deleteCurrent(); return false;"
                            Text="Delete" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Last name:
                    </td>
                    <td>
                        <telerik:RadTextBox ID="LastName" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        First name:
                    </td>
                    <td>
                        <telerik:RadTextBox ID="FirstName" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Title:
                    </td>
                    <td>
                        <telerik:RadTextBox ID="Title" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Title of courtesy:
                    </td>
                    <td>
                        <telerik:RadComboBox ID="TitleOfCourtesy" runat="server">
                            <Items>
                                <telerik:RadComboBoxItem Text="" Value="" />
                                <telerik:RadComboBoxItem Text="Dr." Value="Dr." />
                                <telerik:RadComboBoxItem Text="Mr." Value="Mr." />
                                <telerik:RadComboBoxItem Text="Mrs." Value="Mrs." />
                                <telerik:RadComboBoxItem Text="Ms." Value="Ms." />
                            </Items>
                        </telerik:RadComboBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        Birth date:
                    </td>
                    <td>
                        <telerik:RadDatePicker ID="BirthDate" MinDate="01/01/1900" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td style="vertical-align: top;">
                        Notes:
                    </td>
                    <td style="height: 500px">
                        <telerik:RadEditor ID="Notes" SkinID="BasicSetOfTools" Width="100%" runat="server"
                            Height="400px">
                        </telerik:RadEditor>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" EnableShadow="true"
        Position="BottomCenter" Animation="Fade" Width="415px" Height="250px" Style="font-size: 18px;
        text-align: center; font-family: Arial;" RelativeTo="Element">
        <WebServiceSettings Method="GetCurrentTime" Path="MyWCFService.svc" />
    </telerik:RadToolTipManager>
    </form>
</body>
</html>
