Enabling Server Filtering, Sorting, Paging breaks SignalR Client Updates for MVC Kendo UI Grid

5 posts, 1 answers
  1. Dan
    Dan avatar
    3 posts
    Member since:
    Oct 2014

    Posted 31 Oct 2014 Link to this post

    I created an application using the Teleirk MVC wrapper for Kendo UI grid with a SignalR datasouce.

    An update of the grid was transmitted and reflected on all clients running the application perfectly (with client side filtering, sorting, paging). The datasource I was using was rather large (which caused some performance issues with the filtering, sorting, paging operations). So I then re-configured my grid to use server filtering, sorting, paging which did fixed my performance issue and drastically improved the usability of the application. 

    After I reconfigured to move those actions server-side I noticed a change I was making was not being reflected on all the client machines. I then switched back and forth between client-side and server-side filtering, sorting, and paging to verify that that change was the cause of my issue to be sure.

    Has anyone experiences this before themselves? And can you provide me with steps/advice on how to fix this?

    Thank you
  2. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 04 Nov 2014 Link to this post

    Hello Dan,

    Could you provide the code for the hub? A possible reason for the described problem is that the update method does not send the data in the expected expected format - in a field with the same name as specified with the schema data option.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Dan
    Dan avatar
    3 posts
    Member since:
    Oct 2014

    Posted 05 Nov 2014 in reply to Daniel Link to this post

    Sure - here is the code in the hub:

        public class ProductTitlePartsBySkuHub : Hub
        {
            private readonly DataService<ProductTitlePartsBySkus, ProductTitlePartsBySku> _dataService;

            public ProductTitlePartsBySkuHub()
            {
                _dataService = new DataService<ProductTitlePartsBySkus, ProductTitlePartsBySku>();
            }

            public DataSourceResult Read(DataSourceRequest request)
            {
                var result = _dataService.Read().AsQueryable().ToDataSourceResult(request);
                return result;
            }

            public void Update(ProductTitlePartsBySku item)
            {
                _dataService.Update(item);
                Clients.Others.update(item);
            }

            public void Destroy(ProductTitlePartsBySku item)
            {
                _dataService.Destroy(item);
                Clients.Others.destroy(item);
            }

            public ProductTitlePartsBySku Create(ProductTitlePartsBySku item)
            {
                _dataService.Create(item);
                Clients.Others.create(item);
                return item;
            }
        }

    To reiterate - the data updates fine in the database - the object that is passed to Clients.Other.update() has the correct value - and the obj passed to the received JS method on the other clients through SignalR has the updated value - but the row does not update.

    The class ProductTitlePartsBySku has an int (Id) and a bunch of properties that are strings.

    Here is the code in the cshtml file for the grid:

    @(Html.Kendo().Grid<ProductTitlePartsBySku>()
        .Name("PartsGrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.Category).HtmlAttributes(new { @class = "readonlyCol" });
            columns.Template(@<item></item>).ClientTemplate("<span>#= ProductId #</span><br /><br />#= AvailableOnWeb ? GetProdImageTag(ProductId) : '' #<span>#= Description != null ? Description : '' #</span>").HeaderTemplate("<span class='header'>Sku</span>").Width(150);
            columns.Bound(p => p.ParentGroup).Title("Parent<br />Group");
            columns.Bound(p => p.Collection);
            columns.Bound(p => p.Outdoor);
            columns.Bound(p => p.Sectional_Modular).Title("Sectional<br />Modular");
            columns.Bound(p => p.Slipcovered_Fitted).Title("Slipcovered<br />Fitted");
            columns.Bound(p => p.Dimensions);
            columns.Bound(p => p.Material);
            columns.Bound(p => p.ProductClass).Title("Product<br />Class");
            columns.Bound(p => p.WithOptions).Title("With<br />Options");
            columns.Bound(p => p.Fabric);
            columns.Bound(p => p.Finish);
            columns.Bound(p => p.Color);
            columns.Bound(p => p.NumOfPieces).Title("Num<br />Of<br />Pieces");
            columns.Bound(p => p.FiberContent).Title("Fiber<br />Content");
            columns.Bound(p => p.ProductMask).Title("Product<br />Mask").HtmlAttributes(new { @class = "readonlyCol" });
            columns.Bound(p => p.GeneratedFullProductTitle).Title("Generated<br />Product<br />Title").HtmlAttributes(new { @class = "generatedTitle" });
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Navigatable()
        .Sortable(sortable => sortable
            .AllowUnsort(true)
            .SortMode(GridSortMode.MultipleColumn))
        .Groupable()
        .Filterable()
        .Scrollable()
        .Pageable()
        .Selectable()
        .ColumnResizeHandleWidth(100)
        .Events(e => e
            .DataBinding("gridDataBinding")
            .DataBound("gridDataBound")
            .Save("rowChanged"))
        .DataSource(dataSource => dataSource
            .SignalR()
            .AutoSync(true)
            .ServerFiltering(true)
            .ServerPaging(true)
            .ServerSorting(true)
            .PageSize(1000)
            .Transport(tr => tr
                .Promise("answerHubStart")
                .Hub("answerHub")
                .Client(c => c
                    .Read("read")
                    .Create("create")
                    .Update("update")
                    .Destroy("destroy"))
                .Server(s => s
                    .Read("read")
                    .Create("create")
                    .Update("update")
                    .Destroy("destroy")))
                .Schema(schema => schema
                    .Data("Data")
                    .Total("Total")
                    .Aggregates("Aggregates")
                    .Model(model =>
                    {
                        model.Id("Id");
                        model.Field("Id", typeof(int)).Editable(false);
                        model.Field("ProductId", typeof(string)).Editable(false);
                        model.Field("Category", typeof(string)).Editable(false);
                        model.Field("GeneratedFullProductTitle", typeof(string)).Editable(false);
                        model.Field("ProductMask", typeof(string)).Editable(false);
                        model.Field("ParentGroup", typeof(string)).Editable(true);
                        model.Field("Collection", typeof(string)).Editable(true);
                        model.Field("Outdoor", typeof(string)).Editable(true);
                        model.Field("Sectional_Modular", typeof(string)).Editable(true);
                        model.Field("Slipcovered_Fitted", typeof(string)).Editable(true);
                        model.Field("Dimensions", typeof(string)).Editable(true);
                        model.Field("Material", typeof(string)).Editable(true);
                        model.Field("ProductClass", typeof(string)).Editable(true);
                        model.Field("WithOptions", typeof(string)).Editable(true);
                        model.Field("Fabric", typeof(string)).Editable(true);
                        model.Field("Finish", typeof(string)).Editable(true);
                        model.Field("Color", typeof(string)).Editable(true);
                        model.Field("NumOfPieces", typeof(string)).Editable(true);
                        model.Field("FiberContent", typeof(string)).Editable(true);
                    })
                )
        )



  4. Answer
    Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 07 Nov 2014 Link to this post

    Hello again Dan,

    As suspected the format used for update, create and destroy is not the same and so the dataSource is not able to read the data. You should send a DataSourceResult from the Update, Create and Destroy methods as well e.g.
    public void Update(ProductTitlePartsBySku item)
    {
        _dataService.Update(item);
        Clients.Others.update(new DataSourceResult
        {
            Data = new[] { item }
        });
    }
    in order to avoid the problem.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Dan
    Dan avatar
    3 posts
    Member since:
    Oct 2014

    Posted 10 Nov 2014 in reply to Daniel Link to this post

    Great! That worked perfectly. Thanks for taking the time to help me out.
Back to Top