How to update a Kendo Grid dataSource to a remote url, but without triggering an ajax call?

Question

Take a look at my fiddle here

Unfortunately Kendo Grid doesn't seem to provide a native solution to good SEO ( see here ). But I thought I would give it a try, and see if there is anything I can do. This is what I have so far:

To achieve a proper progressive enhancement approach with Kendo Grid, I have 3 parts:

1. Pre-existing HTML table for SEO purposes ( see html section of fiddle )
2. The same data from the HTML table, but as JSON ( see top of js section of fiddle ). This is so Kendo will show the correct page and total pages (it doesn't do this if I just let it convert the HTML grid alone!!).
3. All subsequent calls will be handled via ajax. ( see "progressive enhance me" button above grid output in fiddle )

To keep everything clean and tidy, I have a server side script that generates both the HTML table and the JSON. I just insert my server side variables into my view(page) and everything comes to together well.

However I'm left with one problem. I need to update the dataSource to a remote url, as demonstrated when you press the "Progressive Enhance Me!" button. When the button is pressed, an unnecessary ajax call is made. In a real application, this unnecessary initial ajax call could be costly, where redundant server-side database queries can slow down the page. Is there any way I can update the dataSource without an ajax call being made?

(I'm also open to suggestions of any better approach to achieve progressive enhancement with Kendo Grid).

myData = { 
            // some json here...see fiddle 
         };

$("#grid").kendoGrid({
    dataSource: {
        data : myData,
        dataType: "json",
        pageSize:5,
        serverPaging: true,
        serverSorting: true,        
        schema: {
            data: "results",
            total: function (data) {
                return data.__count;       
            }
        }
    },
    height: 250,
    filterable: true,
    sortable: true,
    pageable: true,
    columns: [
        {
            field:"OrderID",
            filterable: false,
            width: 75
        },
        {
            field:"Freight",
            filterable: false,
            width: 75
        },
        {
            field: "OrderDate",
            title: "Order Date",
            width: 120,
            format: "{0:MM/dd/yyyy}"
        }, 
        {
            field: "ShipName",
            title: "Ship Name",
            width: 260
        },
        {
            field: "ShipCity",
            title: "Ship City",
            width: 150
        }
    ]
});

// Button should NOT make an ajax call...I just want to update the dataSource
$("#progress-enhance-me").click(function(){                           
    var grid = $("#grid").data("kendoGrid");
    var newDataSource =  new kendo.data.DataSource({
        type: "odata",
        transport: {
            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                fields: {
                    OrderID: { type: "number" },
                    Freight: { type: "number" },
                    OrderDate: { type: "date" },
                    ShipName: { type: "string" },
                    ShipCity: { type: "string" }
                }
            }
        },
        page: 1,
        pageSize: 5,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    });
    grid.setDataSource(newDataSource);  
});

EDIT: I tried another approach, using the requestStart call. See fiddle here . However I don't think this is going to work since I don't have a way to transfer the last click (page number click, or sort header click, etc) to the new datasource.

Answer 1

Since I needed the grids to be SEO friendly, I ended up successfully achieving progressive enhancement using jqgrid . See my answer here: Jqgrid & progressive enhancement: Successfully progresses from HTML, to local JSON, to remote JSON, but pager doesn't start correctly?

I can also style it to work with Bootstrap 3 using this .

UPDATE:
I'm actually now using a forked version of this now: https://github.com/wenzhixin/bootstrap-table
Jqgrid was too bulky and didn't play fast on mobile.