Recently delving into the world of angularjs, I embarked on a mission to populate a ui grid with data sourced from a database. Despite numerous searches for similar issues online, none seem to align with my specific problem. The table displays perfectly fine, yet the data fails to populate. Upon inspecting the developer tools in Chrome under Source, it seems that the Json object is correctly formatted, but alas, nothing appears in the table. It's probably just a minor oversight on my end, so any guidance or assistance would be greatly appreciated.
Below showcases my controller js:
var app = angular.module('skill', ["ui.grid",
"ui.grid.edit",
"ui.grid.selection",
"ui.grid.pagination",
"ui.grid.exporter",
"ui.grid.cellNav"]);
app.controller('SkillEntryController', function ($scope, $http, $interval, uiGridConstants, SkillService) {
$scope.data = [];
SkillService.GetSkills().then(function (d) {
$scope.data = d.data;
}, function () {
alert('Failed');
});
$scope.columns = [
{ name: "SkillName", displayName: "Skill Code", minWidth: 150, width: "33%" },
{ name: "Category", minWidth: 150, width: "33%" },
{ name: "Description", minWidth: 150, width: "33%" }
];
$scope.gridOptions = {
enableSorting: true,
enableRowSelection: true,
enableCellEditOnFocus: true,
exporterHeaderFilterUseName: true,
treeRowHeaderAlwaysVisible: false,
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
columnDefs: $scope.columns,
data: $scope.data,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
}).factory('SkillService', function ($http) {
var fac = {}
fac.GetSkills = function () {
return $http.get('/Skills/GetSkills');
}
return fac;
});
This snippet depicts my factory method:
public JsonResult GetSkills()
{
List<Skill> c = new List<Skill>();
return new JsonResult { Data = c.Select(x => new { x.Category, x.Description, x.SkillCodeID, x.SkillName }), JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
Lastly, here is my cshtml file:
@model IEnumerable<SkillResourceCenterApp.Models.Skill>
@using Newtonsoft.Json;
@{
ViewData["Title"] = "Add Skill";
}
@section scripts{
<link href="~/Content/ui-grid.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ui-grid.js"></script>
<script src="~/Scripts/Controller/skill-entry-controller.js"></script>
}
<style>
.ui-grid-cell.cell-center {
text-align: center;
}
.ui-grid-cell.cell-right {
text-align: right;
}
.no-rows {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.4);
}
.no-rows .msg {
opacity: 1;
position: absolute;
top: 30%;
left: 33%;
width: 30%;
height: 25%;
line-height: 200%;
background-color: #eee;
border-radius: 4px;
border: 1px solid #555;
text-align: center;
font-size: 24px;
display: table;
}
.no-rows .msg span {
display: table-cell;
vertical-align: middle;
}
</style>
<h3>@ViewData["Title"]</h3>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<div class="container-fluid" ng-app="skill" ng-controller="SkillEntryController">
<div class="row">
<button type="button" ng-click="addNewRow()" class="btn btn-default col-sm-3 col-md-2">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Row
</button>
<button type="button" ng-click="deleteSelected()" class="btn btn-default col-sm-3 col-md-2">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Delete Selected
</button>
<button type="button" ng-click="exportToCSV()" class="btn btn-default col-sm-3 col-md-2">
<span class="glyphicon glyphicon-download" aria-hidden="true"></span> Export to Excel
</button>
<button type="button" ng-click="save()" class="btn btn-primary col-md-offset-4 pull-right col-sm-2">
Save
</button>
</div>
<div class="row">
<div class="grid" ui-grid="gridOptions"
ui-grid-pagination
ui-grid-selection
ui-grid-edit
ui-grid-exporter
ui-grid-cellNav
style="height: 500px;">
<div class="no-rows" ng-show="!gridOptions.data.length">
<div class="msg">
<span>No Results</span>
</div>
</div>
</div>
</div>
</div>