Prevent datasource read request to server

[Muthu]

Hi,

How do I prevent dataSource from making request to server?
I have a costly set of data and so stored the JSON in client cache (local storage), so that even after the user navigate away from the page and back, already read data from server would be available rather than making another call to receive same data back again.

I am using local cache to store the data once read from server and want to prevent dataSource from making subsequent request when found in cache.

I tried the following, but it did not work, is there anyway to achieve this?

    var ds = new kendo.data.DataSource({
        transport: {
            read: {
                url: 'url to get data',
                dataType: "json"
            }
        },
        change: OnDataChange,
        requestStart: OnDataRequestStart
    });

 

function OnDataChange(e) {
    if (IsDataRequested) {
        // save it to cache
        $.jStorage.set("LargeData", e.sender.data());
        IsDataExists = true;
        IsDataRequested = false;
    }
}
 
function OnDataRequestStart(e) {
    if (IsDataExists) {
        e.preventDefault();
    }
    else {
        // Check if "key" exists in the storage
        var value = $.jStorage.get("LargeData");
        if (value) {
            IsDataExists = true;
            e.preventDefault();
            e.sender.data(value);
        }
        else {
           // Read data from server
            IsDataRequested = true;
        }
    }
}

Thanks
Muthu

[Alexander Valchev]

Hi Muthu,

It is not possible to prevent the Ajax request to the server. As a workaround I can suggest to use a custom transport functions instead of the build-in ones. As an example:

dataSource = new kendo.data.DataSource({
    transport: {
        read:  function(operation) {
            //put your logic here
            //example of read request
            $.ajax({
                url: crudServiceBaseUrl + "/Products/",
                dataType: "jsonp",
                success: function(response) {
                    operation.success(response); //mark the operation as successful
                }
            });
        },
        update: function(operation) { ... },
        create: function(operation) { ... },
        destroy: function(operation) { ... }
   }
})

The function will be executed every time when dataSource.read() is called. You could check for cashed data and issue an Ajax request only if there is no such data.

Kind regards,
Alexander Valchev
the Telerik team

[Ivica]

Hello.

I am trying to use the custom read function as per your suggestion, and I'm having some problems. Here is my setup: a Kendo grid with 'autoBind' set to false, connected to a datasouce defined below. Datasource is fetching different things from the database, based on user input. With a button click, I am calling dataSource.read() to update the grid. The problem is, it works only once, ie. when first clicking the button. One the subsequent calls, nothing happens, the read function doesn't get called. I see the the log from my 'updateGrid' function, but not the one from the read function. There are no errors in the console.

Any ideas what I'm doing wrong?

dbDataSource = new kendo.data.DataSource({                    

read:
function(options) {           
                                          console.log('reading with ' + options.data.s + " - " + options.data.d);
                                            $.ajax({
                                                   url: "ajax/test_grid.cgi", data: options.data,
                                                   success: function(response) {
                                                   options.success(response); //mark the operation as successful
                                                   }
                                                });
                                            }
                                        },...



 

function updateGrid(src,dest) {

 console.log('trying to update');

 dbDataSource.read({s: src, d:dest});

 dbDataSource.page(1);

}

[Alexander Valchev]

Hello Ivica,

The read method should be part of the DataSource transport object.

new kendo.data.DataSource({
    transport: {
         read: function(o) {
              //do stuff
              o.success(data);
         }
    }
});

Regards,
Alexander Valchev
the Telerik team