Kendo Grid - setDataSource is not working

Question

Kendo grid is loading the data properly if we set the datasource while creating the grid. If we create the grid without datasource and then try to set the datasource, the data is not loading.

HTML

<div id="grid"></div>
<script id="rowTemplate" type="text/x-kendo-tmpl">
   <tr>
       <td>#: LastName #</td>
       <td>#: FirstName #</td>
   </tr>
</script>

Kendo grid is loading the data with the below code

$jQuery2_1(document).ready(function () {
        $jQuery2_1("#grid").kendoGrid({
            dataSource: JSON.parse($jQuery2_1("#PlaceHolderMain_hidJson").val()),
            rowTemplate: kendo.template($("#rowTemplate").html()),
            sortable: true,
            columns: [
                { field: "LastName", title: "Last Name" },
                { field: "FirstName", title: "First Name", width: "120px" },
            ]
        });
    });

If I define the grid first and set the data source, kendo grid is not loading the data.

$jQuery2_1(document).ready(function () {
        $jQuery2_1("#grid").kendoGrid({
            rowTemplate: kendo.template($("#rowTemplate").html()),
            sortable: true,
            columns: [
                { field: "LastName", title: "Last Name" },
                { field: "FirstName", title: "First Name", width: "120px" },
            ]
        });

        var dataSource = new kendo.data.DataSource({
            data: JSON.parse($jQuery2_1("#PlaceHolderMain_hidJson").val())
        });
        var grid = $("#grid").data("kendoGrid");
        grid.setDataSource(dataSource);
    });

Fruitbat Fruitbat · Accepted Answer · 2016-03-03T16:10:43

You seem to be using $jQuery2_1 as an alias.

So, change the line

var grid = $("#grid").data("kendoGrid");

to

var grid = $jQuery2_1("#grid").data("kendoGrid");

Kendo Grid - setDataSource is not working

1 Answers