[Solved] KendoGrid Refresh

[Larissa]

I'm using KendoGrid to display some data fetched from my service.
The user selects some parameters (company and date) and cliks on a load button.
The user selects a month on a datePicker and the server will return data from that date plus 11 months.
I only display the grid after the user click on the load button.
Load function:

function loadGrid(e) {

 

    var companyIds = [1, 3, 7]; // user select it

 

    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    var rowHeaders = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"];

 

    var _dataSource = function () {

 

        var dataSource = new kendo.data.DataSource({

            transport: {

                read: {

                    url: URL,

                    dataType: "json",

                    data: {

                        companyIds: companyIds,

                        date: kendo.toString(picker.value(), "yyyy-MM-dd") // user select it

                    }

                }

            },

            schema: {

                data: function (data) {

 

                    // function to handle data returned from server

 

                    var dataArray = [];

                    var index = 0;

                    for (var key in data[0]) {

                        if (Object.prototype.hasOwnProperty.call(data[0], key)) {

                            var property = key;

                            if (property == "date") {

                                continue;

                            }

                            key = {};

                            key["X"] = rowHeaders[index];

                            index++;

                            for (var i = 0; i < data.length; i++) {

                                var date = data[i].date;

                                var dateSplit = date.split("-");

                                var year = dateSplit[0];

                                var month = months[dateSplit[1] - 1];

                                var header = month + "_" + year;

                                key[header] = data[i][property];

                            }

                            dataArray.push(key);

                        }

                    }

                    return dataArray;

                }

            }

        });

        return dataSource;

    };

 

    $("#grid").kendoGrid({

        scrollable: false,

        editable: false,

        dataSource: _dataSource()

    });

}

When I click on the load button for the first time, the datasource is loaded and the grid is displayed correctly.
But, for instance, if I change the date on the datePicker and click on the load button again, the datasource is loaded with the correct data (new records for other months), but the grid is not refreshed.
If the first time I select the month Jan/2015, it loads and displays from Jan/2015 until Dec/2015, which is correct.
But if than I select the month Feb/2015, the datasource loads from Feb/2015 until Jan/2016 (correct), but the grid display the columns from Jan/2015 until Dec/2015, which is wrong. In this case, the column Jan/2015 is shown empty and the column Jan/2016 is not displayed.
Can someone point me to the right direction? Thanks!

[Petyo]

Hello,

from what I see, the click button will re-create a new datasource and instantiate a new kendo ui grid widget. This is not supported, nor, for that matter, recommended. Instead, you should use a function for your transport.read.data configuration option, which will dynamically return new values each time the dataSource.read() method is called. Afterwards, the only thing the button should do is to call the dataSource.read method.

Regards,
Petyo
Telerik

 

 

[Larissa]

Yeap, I realize that and change my code. Forgot to post here. But still the same problem occurs.

 

$("#loadButton").kendoButton({
        click: loadGrid
    });

function loadGrid(e) {
        $("#grid").data("kendoGrid").dataSource.read();
    }

function getData() {

        var companyIds = [1, 2, 3]; // get from combo

        return {
            companyIds: companyIds,
            date: kendo.toString(picker.value(), "yyyy-MM-dd")
        };
    }

var rowHeaders = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"];

var _dataSource = function () {

        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: url,
                    dataType: "json",
                    data: getData
                }
            },
            schema: {
                total: "total",
                data: function (data) {
                    var dataArray = [];

                    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

                    var index = 0;
                    for (var key in data[0]) {
                        if (Object.prototype.hasOwnProperty.call(data[0], key)) {
                            var property = key;
                            if (property == "date") {
                                continue;
                            }
                            key = {};
                            key["X"] = rowHeaders[index];
                            index++;
                            for (var i = 0; i < data.length; i++) {
                                var date = data[i].date;
                                var dateSplit = date.split("-");
                                var year = dateSplit[0];
                                var month = months[dateSplit[1] - 1];
                                var header = month + "_" + year;
                                key[header] = data[i][property];
                            }
                            dataArray.push(key);
                        }
                    }
                    return dataArray;
                }
            }
        });
        return dataSource;
    };

$("#grid").kendoGrid({
        scrollable: false,
        editable: false,
        autoBind: false,
        dataSource: _dataSource()
    });

[Rosen]

Hello Larissa,

The approach shown in your latest message seems valid, thus I'm not sure what may be the exact cause for the behavior you have described. Could you please verify that there are no JavaScript errors on the page? Also I have noticed that in the getData function a picker variable is used, but I'm not seeing it defined nowhere in the snippet.

If you continue to experience difficulties please consider providing a small runnable sample in which the issue can be observed locally.

Regards,
Rosen
Telerik