KendoGrid Refresh

4 posts, 0 answers
  1. Larissa
    Larissa avatar
    19 posts
    Member since:
    Dec 2015

    Posted 02 Mar 2016 Link to this post

    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!
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 04 Mar 2016 Link to this post

    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!
     
  3. Larissa
    Larissa avatar
    19 posts
    Member since:
    Dec 2015

    Posted 04 Mar 2016 in reply to Petyo Link to this post

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

  4. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 09 Mar 2016 Link to this post

    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!
     
Back to Top