I'm new to Kendo and struggling to display my JSON data in the Kendo Grid. When I try to access my $scope.actionData using a regular HTML table, it displays on the page.
My ultimate goal is to achieve something similar to this.
The column headers are visible on the page, but there is no data underneath them.
Although I can see the expected data in Chrome Kendo UI Inspector under DataSource -> Options -> Data Array, I am unable to get it to display on the page or populate the DataSource -> Data array. I have tried following examples on the angular-kendo page with no success. Adding different elements/tags below the div in the HTML hasn't helped either.
Please let me know if you need any additional information. Any help in getting this to populate would be greatly appreciated. Thank you in advance!
HTML:
<div kendo-grid k-data-source="gridOptions"></div>
Controller:
var actionHistoryControllers = angular.module('actionHistoryControllers', ['kendo.directives'])
.controller('ActionHistoryCtrl', ['$scope', '$routeParams', 'ActionHistory',
function ($scope, $routeParams, ActionHistory) {
$scope.actionData = ActionHistory.query({ appid: $routeParams.appid },
function (data) {
$scope.error = false;
$scope.errorMsg = "";
},
function (data) {
$scope.error = true;
$scope.errorMsg = "<strong>Unable to load!</strong> Please reload the page.";
});
$scope.gridOptions = {
data: $scope.actionData,
columns: [
{field: "UserID", title: "User ID"},
{field: "ActionText", title: "Action Text"}]
}
}])
Chrome Kendo UI Inspector:
Data source
options: Object{9}
data: Array[3]
0: Object{17}
ActionHistoryID: 315911
ActionText: "System"
...