Populating a grid using kendo js

Question

I am working on a web app which needs to populate a grid with some data. I have a button wired with a onClick method which opens a new modal window for the grid to be displayed. I am using a jquery post call to the controller. However, I am unable to get the json data and assign it to my variable.

My code is as follows:

var grid_ds;
$.post('${ctx}/class/student/details?studentId=${student.studentId}', function(data){




}, 'json');

$('#student_grid').kendoGrid({
dataSource: grid_ds,
columns: [
{field: "studentName", title: "Student Name"},
{field: "studentClass", title: "Class"}
],
dataBound: function () {
     emptyGrid($('#student_grid'));
}
}).data('kendoGrid');

My controller sends json back. I can see the data coming. How should I assign the json data to grid_ds and student_grid and make the values populate in the grid.

Answer 1

You could try using a kendo.data.DataSource with a custom transport function like so:

$('#student_grid').kendoGrid({
    dataSource: dataSource = new kendo.data.DataSource({
        transport: {
            read: function (e) {
                $.post('${ctx}/class/student/details?studentId=${student.studentId}', 'json')
                    .done(function (data) {
                        e.success(data);
                    });
            }
        }
    }),
    columns: [
        {
            field: "studentName",
            title: "Student Name"
        },
        {
            field: "studentClass",
            title: "Class"
        }
    ]});

I think the problem may be with how you're fetching the data. Since $.post is an ajax call operating out of band, grid_ds is most likely undefined when being passed to the .kendoGrid() function.

I wasn't able to locate the dataBound configuration property that you specify in your question in the kendo.ui.Grid . Do you happen to know where this configuration setting came from?