Hierarchical Grid With SignalR in Both

[kencox]

I'm trying to combine the SignalR live updates example with the Hierarchical grid example.

I want both grids to update via SignalR when there's a change. The Customers grid works great.

Trouble is, I can't even read the  order data when I switch the Order grid to SignalR. The Read method on the child (order) grid is never called.

I wish there were more documentation on the Transport, Promise, and Hub properties.

Any suggestions?

 

@{
    ViewBag.Title = "Home Page";
}
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
@*<link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
    <script src="http://cdn.kendostatic.com/2016.1.112/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2016.1.112/js/kendo.all.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>

    <script src="http://cdn.kendostatic.com/2016.1.112/js/kendo.aspnetmvc.min.js"></script>*@
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>

<script src="@Url.Content("~/signalr/hubs")"></script>
<div id="modalWindow">
    <h2>Delete?</h2>
    <button id="yes" class="k-button">Yes</button>
    <button id="no" class="k-button">No</button>
</div>
<script>
 //   var hub = $.connection.customerHub;
    var customerHub = $.connection.customerHub;
    var orderHub = $.connection.orderHub;
    var hubStart = $.connection.hub.start();
</script>
@(Html.Kendo().Notification()
      .Name("notification")
      .Width("100%")
      .Position(position => position.Top(0).Left(0))
)
@(Html.Kendo().Grid<TelerikMvcCRUDGrid.Models.CustomerViewModel>()
    .Name("Customers")
    .Filterable()
    .Columns(columns =>
    {
        columns.Bound(c => c.CustomerId).Visible(false);
        columns.Bound(c => c.LastName)
                     .ClientTemplate("#:LastName#, #:FirstName#" + "#:MiddleInitial#")
                     .Title("Full Name");
        columns.Bound(c => c.AccountNumber);
        columns.Command(command =>
        {
            command.Edit();
            command.Destroy();
        })
            .Title("Actions")
            .HeaderHtmlAttributes(new { style = "font-weight:600;" });
    })
    .ToolBar(toolbar => toolbar.Create().Text("Add new Customer"))
    .ToolBar(toolbar => toolbar.Excel().Text("Export to Excel"))
    .ToolBar(toolbar => toolbar.Pdf().Text("Export to PDF"))
    .Editable(editable => editable.Mode(GridEditMode.PopUp)
                        .DisplayDeleteConfirmation(false))
    .Events(events => events.DetailExpand("onExpandCustomer"))
    // .Events(e => e.DataBound("onRowBound"))
    .Pageable(pageable => pageable
                        .Refresh(true)
                        .PageSizes(true)
                        .ButtonCount(5))
    .Sortable()
    .Scrollable(s => s.Height("auto"))
    .ClientDetailTemplateId("Orders")

       .DataSource(dataSource => dataSource
        .SignalR()
        //    .AutoSync(true) // Automatically save changed data items by calling the sync method
        @*.Events(events => events.Push(@<text>
                function(e) {
                var notification = $("#notification").data("kendoNotification");
                notification.success(e.type);
                }
            </text>))*@
        .PageSize(10)
        // Transport is the configuration used to load and save the data items
        .Transport(tr => tr

            .Promise("hubStart") // The promise returned by the start method of the SignalR connection. The promise option is mandatory.
            .Hub("customerHub")
            .Client(c => c //transport.signalr.client  Specifies the client-side CRUD methods of the SignalR hub.
                .Read("read") //Specifies the name of the client-side method of the SignalR hub responsible for reading data items.
                .Create("create") //Specifies the name of the client-side method of the SignalR hub responsible for creating data items.
                .Update("update") //Specifies the name of the client-side method of the SignalR hub responsible for updating data items.
                .Destroy("destroy")) //Specifies the name of the client-side method of the SignalR hub responsible for destroying data items.
            .Server(s => s
                .Read("read") //Specifies the name of the server-side method of the SignalR hub responsible for reading data items.
                .Create("create") // Specifies the name of the server-side method of the SignalR hub responsible for creating data items.
                .Update("update") //Specifies the name of the server-side method of the SignalR hub responsible for updating data items.
                .Destroy("destroy") //Specifies the name of the server-side method of the SignalR hub responsible for destroying data items.
                )
         )
        .Schema(schema => schema
            .Model(model =>
            {
                model.Id(m => m.CustomerId);
                model.Field(m => m.CustomerId).Editable(false);
            })
        )
    )
)


<script id="Orders" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<TelerikMvcCRUDGrid.Models.OrderViewModel>()

                        .Name("grid_#=CustomerId#") // template expression, to be evaluated in the master context
                        .Filterable()
                        .ToolBar(toolbar => toolbar.Create().Text("Add new Order"))
                        .ToolBar(toolbar => toolbar.Excel().Text("Export to Excel"))
                        .ToolBar(toolbar => toolbar.Pdf().Text("Export to PDF"))
                        .Editable(editable => editable.Mode(GridEditMode.PopUp))
                        .HtmlAttributes(new { style = "height:100%;width:100%" })
                        .Events(e => e.DataBound("onRowBound"))
                        .Columns(columns =>
                        {
                            columns.Bound(o => o.OrderId).Visible(false);
                            columns.Bound(o => o.OrderTotal).Width(115);
                            columns.Bound(o => o.OrderSubtotal).Width(120);
                            columns.Bound(o => o.OrderTax).Width(80);
                            columns.Bound(o => o.DatePlaced).Width(115);
                            columns.Bound(o => o.DateShipped).Width(110);
                            columns.ForeignKey(f => f.OrderChannelId, (System.Collections.IEnumerable)
                                        ViewData["orderchannels"], "Value", "Text").Title("Channel");
                            columns.Command(command =>
                            {
                                command.Edit();
                                command.Custom("Delete").Click("openWindow");
                            }).Title("Order Actions").HeaderHtmlAttributes(new { style = "font-weight:600;" });
                        })

              .DataSource(dataSource => dataSource
                .SignalR()
                //    .AutoSync(true) // Automatically save changed data items by calling the sync method
                .PageSize(10)

                 // Transport is the configuration used to load and save the data items
                .Transport(tr => tr

                    .Promise("hubStart") // The promise returned by the start method of the SignalR connection. The promise option is mandatory.
                    .Hub("orderHub")
                    .Client(c => c //transport.signalr.client  Specifies the client-side CRUD methods of the SignalR hub.
                        .Read("read") //Specifies the name of the client-side method of the SignalR hub responsible for reading data items.
                        .Create("create") //Specifies the name of the client-side method of the SignalR hub responsible for creating data items.
                        .Update("update") //Specifies the name of the client-side method of the SignalR hub responsible for updating data items.
                        .Destroy("destroy")) //Specifies the name of the client-side method of the SignalR hub responsible for destroying data items.
                    .Server(s => s
                        .Read("read") //Specifies the name of the server-side method of the SignalR hub responsible for reading data items.
                        .Create("create") // Specifies the name of the server-side method of the SignalR hub responsible for creating data items.
                        .Update("update") //Specifies the name of the server-side method of the SignalR hub responsible for updating data items.
                        .Destroy("destroy") //Specifies the name of the server-side method of the SignalR hub responsible for destroying data items.
                        )
                 )
                .Schema(schema => schema
                    .Model(model =>
                    {
                        model.Id(o => o.OrderId);
                        model.Field(o => o.OrderId).Editable(false);
                    })


        )
        ).ToClientTemplate());

</script>

<script>
    var wnd;
    $(document).ready(function () {
        wnd = $("#modalWindow").kendoWindow({
            title: "Delete confirmation",
            modal: true,
            visible: false,
            resizable: false,
            width: 300
        }).data("kendoWindow");
    });

    function openWindow(e) {
        e.preventDefault();
        var grid = this;
        var row = $(e.currentTarget).closest("tr");
        wnd.center().open();
        $("#yes").click(function () {
            grid.removeRow(row);
            wnd.close();
        });
        $("#no").click(function () {
            wnd.close();
        });
    }

    function onRowBound(e) {
        $(".k-grid-Delete").find("span").addClass("k-icon k-delete");
    }

    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }

    function onExpandCustomer() {
        $(".k-detail-cell").css({
            "padding": "10px",
            "background-color": "#f35800"
        });
    }
</script>

<script id="delete-confirmation" type="text/x-kendo-template">
    <p class="delete-message">Are you sure?</p>
    <button class="delete-confirm k-button">Yes</button>
    <a href="#" class="delete-cancel">No</a>
</script>

<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>
<script>
    function onExpandProduct() {
        $(".k-detail-cell").css({
            "padding": "10px",
            "background-color": "white"
        });
    }
</script>
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>

[Maria Ilieva]

Hello Ken,

In this case I would suggest you to handle the parent Grid DataBound event and manually call Read() for the child grid.
Give this a try and see if it works in your case.


Regards,
Maria Ilieva
Telerik