Binding a json result to a grid

2 posts, 0 answers
  1. Lachezar
    Lachezar avatar
    2 posts
    Member since:
    Dec 2010

    Posted 23 Feb 2013 Link to this post

    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?
  2. Lachezar
    Lachezar avatar
    2 posts
    Member since:
    Dec 2010

    Posted 24 Feb 2013 Link to this post

    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);
     }
Back to Top