Kendo UI Grid refresh

[Tim]

I have an AngularJS application that consists of a search parameters and a Kendo UI grid.

I am trying to have the grid refresh with new search results when the user changes the search parms and clicks "Search"

I can get the grid to load initially, and refresh once when search parms are entered and the search button is clicked, but on any subsequent searches I get an empty grid.  Here's my code:

in function init():

            $scope.mainGridOptions = {
                dataSource: {
                    data: $scope.hazards,
                    schema: {
                        model: {
                            fields: {
                                Name: { type: "string" },
                                Category: { type: "string" },
                                Severity: { type: "number" }
                            }
                        }
                    },
                    pageSize: 5
                },
                sortable: true,
                pageable: true,
                dataBound: function () {
                    this.expandRow(this.tbody.find("tr.k-master-row").first());
                },
                columns: [{
                    field: "Name",
                    title: "Name",
                    width: "120px"
                }, {
                    field: "Category",
                    title: "Category",
                    width: "120px"
                }, {
                    field: "Severity",
                    title: "Severity",
                    format: "{0}",
                    width: "120px"

                }]
            };

 

in Search function:

            hazardFactory.getHazards(parms)
            .success(function (hazards) {
                $scope.hazards = hazards;
                //alert(JSON.stringify(hazards));
                var grid = $("#hzgrid").data("kendoGrid");
                grid.dataSource.data([]);
                grid.dataSource.add(hazards);
            })
            .error(function (data, status, headers, config) {
                alert('Fail:' + data + ' ' + status);
            });

 

Please help.

 Tim Inouye

[Tim]

I found the answer, I was treating single JSON entries the same as multiples. The fix code is:

            hazardFactory.getHazards(parms)
            .success(function (hazards) {
                $scope.hazards = hazards;
                //alert(JSON.stringify(hazards));
                var grid = $("#hzgrid").data("kendoGrid");
                grid.dataSource.data([]);
                if (!Array.isArray(hazards)) {
                    grid.dataSource.add(hazards);
                }
                else {
                    for (i = 0; i < hazards.length ; i++)
                    {
                        grid.dataSource.add(hazards[i]);
                    }
                }
            })
            .error(function (data, status, headers, config) {
                alert('Fail:' + data + ' ' + status);
            });

[Tim]

I found a fix. I was treating single JSON objects the same as multiples:

                grid.dataSource.data([]);
                if (!Array.isArray(hazards)) {
                    grid.dataSource.add(hazards);
                }
                else {
                    for (i = 0; i < hazards.length ; i++)
                    {
                        grid.dataSource.add(hazards[i]);
                    }
                }​

[Kiril Nikolov]

Hello Tim,

 

I am happy to hear that the problem is resolved.

 

In case something else comes up - do not hesitate to contact us.

 

Regards,
Kiril Nikolov
Telerik