This is a migrated thread and some comments may be shown as answers.
KendoGrid Refresh
3 Answers 175 Views
This is a migrated thread and some comments may be shown as answers.
Larissa
Top achievements
Rank 1
Larissa asked on 02 Mar 2016, 07:13 PM

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!

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 04 Mar 2016, 12:08 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Larissa
Top achievements
Rank 1
answered on 04 Mar 2016, 12:25 PM

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()
    });

0
Rosen
Telerik team
answered on 09 Mar 2016, 06:32 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Larissa
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Larissa
Top achievements
Rank 1
Rosen
Telerik team
Share this question
or