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

[Dan]

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

[Daniel]

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

 

 

[Dan]

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);
                })
            )
    )

[Daniel]

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

 

 

[Dan]

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