kendoui grid, bind data when autoBind config is set to false

Question

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.

See the fiddle for more info

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

    <script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
        <script src="../content/shared/js/products.js"></script>

        <div id="example">
           <div id="buttonGrid" style="height:100px;width:100px">Click me</div>

            <div id="grid"></div>

            <script>
                $(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 

                });

            </script>
</div>


</body>
</html>

score 2 · Accepted Answer · answered Feb 23 '16 at 14:33

2

Use data() instead:

$("#buttonGrid").click(function(){
    //How to bind the data available as products 
    $("#grid").data("kendoGrid").dataSource.data([
        { ProductName: "Test1", UnitPrice: 1, UnitsInStock: 1, Discontinued: false }
    ]);
});

Demo

answered Feb 23 '16 at 14:33

DontVoteMeDown

21,122
10
69
105

Thank you for quick reply. This is what I wanted. But I am running into another issue. My grid also uses paging and how can I pass the `total row count` along with data ? – OpenStack Feb 23 '16 at 17:27
@OpenStack don't `grid.dataSource.data().length` return the total ? – DontVoteMeDown Feb 23 '16 at 17:45
I want to `SET` the total property. So basically I am trying to load the grid on click of a button. When I get response, I get the `data` & `totalRowCount`. I am able to set the data with your help. How can I set the totalRowCount which will set the paging toolbar properly. – OpenStack Feb 23 '16 at 19:52
@OpenStack can you update the demo with your issue? I have tested and it worked w/o any changes in the code: http://dojo.telerik.com/ACoJa/5 – DontVoteMeDown Feb 23 '16 at 19:54
Thanks for quick reply. Problem here is you have already set the whole data into the data source. Even though we are displaying only 20 records on the grid, the datasource has more than 20 rows. In my case, I will only get 20 rows initially and when user clicks page 2, I will get the next 20 rows. my data source has close to 100000 rows and I cannot bind all of them. So in my case data wil be array of 20 rows and totalRowCount = 100000 – OpenStack Feb 23 '16 at 20:00
@OpenStack well, so your data is filled from a server-side back-end. So I think you have to set the `schema.total` property to your data total field, like, e.g.: `{ total: 'total', data: [{...}, {...}] }`. – DontVoteMeDown Feb 23 '16 at 20:09

kendoui grid, bind data when autoBind config is set to false

1 Answers1