Hierarchical Grid With SignalR in Both

2 posts, 0 answers
  1. Ken Cox
    Ken Cox avatar
    100 posts
    Member since:
    Oct 2002

    Posted 01 May Link to this post

    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="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.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>

  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 04 May Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top