Question

We have been implementing a web site with following technologies.

Client: Html5, KendoUI, WebSync(Publish, Subscriber)

Server: ASP.net MVC 3.0

Grid has particular operations for each row. For example, we need to update the status of each row by clicking the operation menu after selecting the check boxes in particular rows.

When we do this operation on menu, we send ajax request to MVC Controller to update the record in database and it will simply return true to client.Here, we have used WebSync publisher- subscriber model to actually notify client when this request complete, because these operations need sometime to process.

When we get the callback from Web Sync, we update the kendo data grid as follows.

onMoveActionMessageReceived = function (data) {

     $("#resultGrid").data("kendoGrid").dataSource.read();
     WebSyncClient.UnsubscribeToMoveTransactionActions($('#moveTransactionIdTxt').val());
 }

As we have over 400k records in database for the grid data and we use paging, this solution is a time consuming solution and it affects on the user experience.

Is there anyway to refresh the kendo datasource with given dataitems(ie.not total datasource).(Grid range update) ?
or Are there any other solutions ?

Answer 1

I’ve found a solution for range update in the Kendo + WebSync. After finishing the process in server, webSync notifies to refreshSearchData function which is responsible for updating the client datasource. getSearchResultViewItem function returns the dataitem from the database and I’ve updated the datasource from client side.

 refreshSearchData = function (entityId, entityType) {

    getSearchResultViewItem(entityId, entityType, function (data) {

        var kendoGrid = $("#resultGrid").data("kendoGrid");

        if (kendoGrid) {
            if ($('#SelectedTypeId')[0].value == entityType) {
               var items = kendoGrid.dataSource.data().toJSON();

                for (var i = 0; i < items.length; i++) {
                    if (items[i].Id == data.Id) {
                        items[i] = data;
                        break;
                    }
                }
                kendoGrid.dataSource.data(items);
            }
        }
    });

};

getSearchResultViewItem = function (entityId, entityType, callback) {
    $.get(baseUrl + 'Search/GetSearchViewDtoById', { id: entityId, searchTypeId: entityId }, function (data) {
        callback(data);
    });
};