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.