kendoui grid, bind data when autoBind config is set to false
<p>I am using a kendoui grid for which autoBind config is set to false. I want to bind data on click of a button. i do not want to make use of datasource.read() as it make additional server side call. I already have data available which I want to bind to the grid. </p>

<p>See the <a href="http://dojo.telerik.com/ACoJa/3" rel="nofollow">fiddle</a> for more info</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;base href="http://demos.telerik.com/kendo-ui/grid/local-data-binding"&gt;
    &lt;style&gt;html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }&lt;/style&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" /&gt;
    &lt;link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" /&gt;

    &lt;script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
        &lt;script src="../content/shared/js/products.js"&gt;&lt;/script&gt;

        &lt;div id="example"&gt;
           &lt;div id="buttonGrid" style="height:100px;width:100px"&gt;Click me&lt;/div&gt;

            &lt;div id="grid"&gt;&lt;/div&gt;

            &lt;script&gt;
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            //data: products,
                            schema: {
                                model: {
                                    fields: {
                                        ProductName: { type: "string" },
                                        UnitPrice: { type: "number" },
                                        UnitsInStock: { type: "number" },
                                        Discontinued: { type: "boolean" }
                                    }
                                }
                            },
                            pageSize: 20
                        },
                        height: 550,
                        scrollable: true,
                        sortable: true,
                        filterable: true,
                        autoBind: false,
                        pageable: {
                            input: true,
                            numeric: false
                        },
                        columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                            { field: "Discontinued", width: "130px" }
                        ]
                    });
                });

              $("#buttonGrid").click(function(){
                            //How to bind the data available as products 

                });

            &lt;/script&gt;
&lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>