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