<%@ 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" />
                <asp:ScriptReference Path="Scripts/jquery.signalR-2.4.1.min.js" />
            </Scripts>
        </telerik:RadScriptManager>

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>

        <telerik:RadWindowManager ID="RadWindowManager1" runat="server"></telerik:RadWindowManager>

        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" ClientDataSourceID="RadClientDataSource1" AllowPaging="true">
            <MasterTableView ClientDataKeyNames="CustomerID" EditMode="Batch" CommandItemDisplay="Top" BatchEditingSettings-HighlightDeletedRows="true">
                <Columns>
                    <telerik:GridBoundColumn DataField="CustomerID" HeaderText="Customer ID" ReadOnly="true">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="CompanyName" HeaderText="Company Name" ColumnEditorID="GridTextBoxEditor">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ContactName" HeaderText="Contact Name" ColumnEditorID="GridTextBoxEditor">
                    </telerik:GridBoundColumn>
                    <telerik:GridClientDeleteColumn HeaderText="Delete">
                        <HeaderStyle Width="70px" />
                    </telerik:GridClientDeleteColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings AllowKeyboardNavigation="true">
                <KeyboardNavigationSettings />
                <ClientEvents OnGridCreated="OnGridCreated" />
            </ClientSettings>
        </telerik:RadGrid>
        <telerik:GridTextBoxColumnEditor ID="GridTextBoxEditor" runat="server" TextBoxStyle-Width="230px"></telerik:GridTextBoxColumnEditor>
        <telerik:RadClientDataSource ID="RadClientDataSource1" runat="server" AllowBatchOperations="true">
            <ClientEvents OnCustomParameter="ParameterMap" OnDataParse="Parse" />
            <DataSource>
                <WebServiceDataSourceSettings BaseUrl="EditingWcfService.svc/">
                    <Select Url="GetCustomers" DataType="JSON" />
                    <Update Url="UpdateCustomers" DataType="JSON" />
                    <Insert Url="InsertCustomers" DataType="JSON" />
                    <Delete Url="DeleteCustomers" DataType="JSON" />
                </WebServiceDataSourceSettings>
            </DataSource>
            <Schema>
                <Model ID="CustomerID">
                    <telerik:ClientDataSourceModelField FieldName="CustomerID" DataType="Number" />
                    <telerik:ClientDataSourceModelField FieldName="CompanyName" DataType="String" />
                    <telerik:ClientDataSourceModelField FieldName="ContactName" DataType="String" />
                    <telerik:ClientDataSourceModelField FieldName="ContactTitle" DataType="String" />
                </Model>
            </Schema>
        </telerik:RadClientDataSource>
    </form>
</body>
</html>


<script type="text/javascript">
    function ParameterMap(sender, args) {
        //If you want to send a parameter to the select call you can modify the if 
        //statement to check whether the request type is 'read':
        //if (args.get_type() == "read" && args.get_data()) {

        if (args.get_type() != "read" && args.get_data()) {
            args.set_parameterFormat({ customersJSON: kendo.stringify(args.get_data().models) });
        }
    }

    function Parse(sender, args) {
        var response = args.get_response().d;

        if (response) {
            args.set_parsedData(response.Data);
            if (response.Action != "Read") {
                alertHub.invoke("notifyOthers", JSON.stringify(response));
            }
        }
    }

    function IsJsonString(str) {
        try {
            JSON.parse(str);
        } catch (e) {
            return false;
        }
        return true;
    }

    function OnGridCreated(sender, args) {
        initializeChatHub(sender);
    }

    function initializeChatHub(grid) {
        window.alertHub = startHub(function (hub) { });

        alertHub.on("broadcast", function (message) {
            var broadcastData = JSON.parse(message);
            var updatedRecords = broadcastData.data;
            var boradcastMessage = broadcastData.message;

            var confirmText;

            switch (broadcastData.Action) {
                case "Create":
                    confirmText = "New records have been added.";
                    break;
                case "Update":
                    confirmText = "Records have been modified.";
                    break;
                case "Delete":
                    confirmText = "Records have been deleted.";
                    break;
                default:
            }
            radconfirm(confirmText + " Would you like to rebind the Grid now?", function (isConfirmed) {
                if (isConfirmed) {
                    grid.get_masterTableView().rebind();
                }
            });
        });

        alertHub.on("NotifyMe", function (message) {
            alert(message);
        });

        $.support.cors = true;
    }

    function confirmCallBackFn(sender, args) {
        $find("<%= RadGrid1.ClientID %>").get_batchEditingManager().saveAllChanges();
        radconfirm(message);
    }

    function startHub(startCallback) {
        var host = window.location.origin;
        var con = $.hubConnection(host);
        var hub = con.createHubProxy("dataHub");

        con.start({ jsonp: true, transport: ['webSockets', 'longPolling'] }).done(function () {
            startCallback(hub)
        });

        return hub;
    }
</script>