<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ClientInsertUpdateDelete.aspx.cs"
    Inherits="pages_AspGrid_ClientInsertUpdateDeleteDataKeyValue" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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>Untitled Page</title>
    <telerik:radcodeblock id="RadCodeBlock1" runat="server">

        <script type="text/javascript">
            var employeeID, currentEmployee, currentRowIndex = 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 getDataItemKeyValue(radGrid, item)
            {
                return parseInt(radGrid.get_masterTableView().getCellByColumnUniqueName(item,"EmployeeID").innerHTML);
            }
            
            function pageLoad(sender, args)
            {
                //employeeID = $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_dataItems()[0].getDataKeyValue("EmployeeID");
                employeeID = getDataItemKeyValue($find("<%= RadGrid1.ClientID %>"),$find("<%= RadGrid1.ClientID %>").get_masterTableView().get_dataItems()[0]);
                //debugger;
                $find("<%= LastName.ClientID %>").style = "none";
            }
            
            function rowSelected(sender, args)
            {
                //employeeID = args.getDataKeyValue("EmployeeID");
                employeeID = getDataItemKeyValue(sender,args.get_gridDataItem());
                
                currentRowIndex = args.get_gridDataItem().get_element().rowIndex;

                $find("<%= RadTabStrip1.ClientID %>").set_selectedIndex(0);
                
                MyWebService.GetEmployeeByEmployeeID(employeeID, setValues)
                alert(args.getDataKeyValue("LastName"));
                
            }
            
            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 = parseInt(gridItems[gridItems.length - 1].getDataKeyValue("EmployeeID")) + 1;
                        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);
            }
            
            function RadGrid1_RowDataBound(sender, args)
            {
                //debugger;
                var grid = $find("<%=RadGrid1.ClientID %>");
                var len = grid.MasterTableView.get_columns().length;
                for (i=0; i < len; i++)
                {
                    if (grid.MasterTableView.get_columns()[i].get_uniqueName() == "BirthDate" )
                    {
                        grid.MasterTableView.hideColumn(i);
                    }
                }
            }
                        
        </script>

    </telerik:radcodeblock>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <telerik:radscriptmanager id="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/MyWebService.asmx" />
            </Services>
        </telerik:radscriptmanager>
            <telerik:radgrid id="RadGrid1" cssclass="grid" datasourceid="SqlDataSource1" runat="server"
                skin="Hay" gridlines="None" ondatabound="RadGrid1_DataBound" oncolumncreated="RadGrid1_ColumnCreated"
                height="300px">
            <MasterTableView TableLayout="Fixed" ClientDataKeyNames="LastName" />
            <ClientSettings>
                <Selecting AllowRowSelect="true" />
                <ClientEvents OnRowSelected="rowSelected" OnRowDataBound="RadGrid1_RowDataBound"/>
                <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" skin="Hay">
            <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" skin="Hay" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            First name:
                        </td>
                        <td>
                            <telerik:radtextbox id="FirstName" runat="server" skin="Hay" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Title:
                        </td>
                        <td>
                            <telerik:radtextbox id="Title" runat="server" skin="Hay" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Title of courtesy:
                        </td>
                        <td>
                            <telerik:radcombobox id="TitleOfCourtesy" runat="server" skin="Hay">
                            <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" skin="Hay" />
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top;">
                            Notes:
                        </td>
                        <td style="height: 500px">
                            <telerik:radeditor id="Notes" skinid="BasicSetOfTools" skin="Hay" width="100%" runat="server"
                                height="400px">
                        </telerik:radeditor>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </form>
</body>
</html>
