How to load kendo grid data when clicking a button not on a page load

Question

I have a kendo grid and chart in my application. And I also have a button. At the time the page loads, all data is loaded into the grid and chart. But I want to load the data when I click the button not in the page load. The page loading grid and chart will be empty. When we click on the button, the data will be loaded into the grid and chart. How to do it. If anyone knows about this, please help me. My grid code

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 violin is http://jsfiddle.net/5bchz/103/

Answer 1

To stop loading the grid when the page loads,

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

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

Then, to configure the loading of the grid, you will need to install it on the onlick button,

 theGrid.dataSource.read() 

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