How to load the kendo grid data in button click not in page load

Question

I have kendo grid and chart in my application.And I have button also.At the time of page load all the data is loading in grid and chart.But i want to load the data in button click not in page load.In page load grid and chart will be empty.When we click on button data will be loaded in grid and chart.How to do this task.If any one know about this please help me. My grid code is

 var grid = $("#grid").kendoGrid({
autoBind:false,
dataSource: undefined,
pageable  : {
    pageSize : 10,
    refresh  : true,
    pageSizes: [10, 20]
},
columns   : [
    {
        field     : "OrderID",
        filterable: false
    },
    "Freight",
    {
        field : "OrderDate",
        title : "Order Date",
        width : 100,
        format: "{0:MM/dd/yyyy}"
    },
    {
        field: "ShipName",
        title: "Ship Name",
        width: 200
    },
    {
        field: "ShipCity",
        title: "Ship City"
    }
]

               }).data("kendoGrid");

My fiddle is http://jsfiddle.net/5bchz/103/

Answer 1

To stop auto loading the grid when the page load,

$("#grid").kendoGrid({
   autoBind: false,
   dataSource: dataSource
});

http://docs.kendoui.com/api/web/grid#configuration-autoBind

Then to set the grid to load you would need to put this in on the button onlick,

theGrid.dataSource.read()

Or in a jquery function so you can easily change which parameters you want to pass in with it.