Binding a json result to a grid

[Lachezar]

First of all - I'm a newbie to kendo ui and web programming with .NET as a whole so this might be an easy question. With that in mind, here's my problem:

I have a DatePicker and a Grid on a page. Whenever a date is chosen from the DatePicker, it fires an event which queries data from the server and then populates the grid with it. The problem is - it doesn't. The grid stays empty with no errors client or server-side at all.

Here's how I set up the controls:

@(Html.Kendo().DatePicker()

    .Name("DateForReport")

    .Value(DateTime.Now)

    .Events(e =>

        {

            e.Change("getStockInfo");

        })

    )

 

@(Html.Kendo().Grid<Supermarket.Main.Areas.Management.Models.ProductInStockViewModel>()

    .Name("reportsByDateGrid")

    .Columns(columns =>

    {

        columns.Bound(m => m.ProductName);

        columns.Bound(m => m.CategoryName);

        columns.Bound(m => m.Amount);

        columns.Bound(m => m.PricePerUnit);

        columns.Bound(m => m.TotalPrice);

    })

    .Pageable()

    .Sortable()

)

And here's the javascript function that does most of the work:

function getStockInfo() {

    if (this.value() != null) {

        var date = kendo.toString(this.value(), 'd');

        $.ajax({

            type: "get",

            dataType: "json",

            url: "@Url.Action("GetAvailabilitiesByDate")",

            data: { date: date },

            traditional: true,

            success: function (result) {

                if (result.success) {

                    var data = result.data;

                    var newDataSource = new kendo.data.DataSource({

                        data: data,

                        pageSize: 15,

                        schema: {

                            model: {

                                fields: {

                                    ProductName: { type: "string" },

                                    CategoryName: { type: "string" },

                                    Amount: { type: "number" },

                                    PricePerUnit: { type: "number" },

                                    TotalPrice: { type: "number" },

                                }

                            }

                        }

                    });

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

                    grid.setDataSource(newDataSource);

                    grid.refresh();

                } else {

                    alert(result.error);

                }

            },

            error: function () {

                alert("An error has occurred, please try again or inform an administrator!");

            }

        });

    }

}

And here's a sample response that I get:

{"success":true,

"data":[{"ProductName":"Borovec","CategoryName":"Food","Amount":18,"PricePerUnit":1.50,"TotalPrice":27.00},{"ProductName":"Coca-cola","CategoryName":"Beverages","Amount":25,"PricePerUnit":2.50,"TotalPrice":62.50},{"ProductName":"Medenka Lubimka","CategoryName":"Food","Amount":23,"PricePerUnit":1.50,"TotalPrice":34.50}]}

How must I set up the datasource of the grid for this to work?

[Lachezar]

For anyone having a similar issue, I managed to work out my problem:

I changed the grid so that it creates a datasource but doesn't bind it:

@(Html.Kendo().Grid<Supermarket.Main.Areas.Management.Models.ProductInStockViewModel>()

    .Name("reportsByDateGrid")

    .Columns(columns =>

    {

        columns.Bound(m => m.ProductName);

        columns.Bound(m => m.CategoryName);

        columns.Bound(m => m.Amount);

        columns.Bound(m => m.PricePerUnit);

        columns.Bound(m => m.TotalPrice);

    })

    .AutoBind(false)

    .Pageable()

    .Sortable()

    .DataSource(dataSource => dataSource

        .Ajax()

        .ServerOperation(false)  

        .PageSize(15)

     )

)

And then for the json result I used:

function (result) {

 if (result.success) {

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

 grid.dataSource.data(result.data);

 } else {

 alert(result.error);

 }