Prevent datasource read request to server

4 posts, 0 answers
  1. Muthu
    Muthu avatar
    1 posts
    Member since:
    Jul 2012

    Posted 06 Sep 2012 Link to this post

    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
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2894 posts

    Posted 11 Sep 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Ivica
    Ivica avatar
    1 posts
    Member since:
    Sep 2012

    Posted 18 Sep 2012 Link to this post

    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);
    }
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2894 posts

    Posted 21 Sep 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top