I have a page where I can do CRUD operations using ASP.NET MVC with AngularJS. I am showing the my Data in the html table. I want to show them with UI Grid as its in http://ui-grid.info/
Can anyone help me show the data in the UI Grid?
This is how my WebApp looks:
Controller.js
app.controller('crudController', function ($scope, crudService) {
$scope.IsNewRecordProject = 1;
loadRecordsProject();
//Function to load all Projects records
function loadRecordsProject() {
var promiseGet = crudService.getProjects(); //The Method Call from service
promiseGet.then(function (pl) { $scope.Projects = pl.data },
function (errorPl) {
$log.error('failure loading Projects', errorPl);
});
}
});
Module.js
var app;
(function () {
app = angular.module("crudModule", []);
})();
Service.js
app.service('crudService', function ($http) {
//Get All Projects
this.getProjects = function () {
return $http.get("/api/ProjectsAPI");
}
});
And this is my Project.cshtml file
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- page content -->
<body>
<div class="container-fluid">
<div class="header-title">
<h1>Projects</h1>
<br />
</div>
</div>
@*<div class="right_col" role="main">*@
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12" ng-controller="crudController">
<div class="col-md-7">
<div class="col-md-4 left-zero">
<div class="form-group">
<div class="col-md-5 left-zero">
<div class="form-group row">
<div class="col-md-2">
<input id="txtSearch" type="text" placeholder="Search by name..." class="form-control" Height="33" Width="200" />
</div>
<div class="col-md-2 pull-right">
<div style="margin-left: 47px;"><input id="btnSearch" type="button" value="Search" Class="btn btn-primary" /></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 pull-right">
<table style="border-collapse: separate; border-spacing: 10px 0px;">
<tr>
<td>
<select id="cbStatus" class="form-control">
<option>Active</option>
<option>Inactive</option>
</select>
</td>
<td>
<select id="cbPlatform" class="form-control">
<option>Desktop</option>
<option>Web</option>
<option>Mobile</option>
</select>
</td>
<td>
<select id="cbVerify" class="form-control">
<option>Veryfy1</option>
<option>Veryfy2</option>
</select>
</td>
<td>
<select id="cbBlank" class="form-control">
<option>Test1</option>
<option>Test2</option>
</select>
</td>
<td>
<select id="cbBlank2" class="form-control">
<option>Test1</option>
<option>Test2</option>
</select>
</td>
<td><input id="btnNewProjects" type="button" value="Create New" data-ng-click="ShowInsertPanel = !ShowInsertPanel" class="btn btn-success" /></td>
</tr>
</table>
</div>
<table class="table table-bordered" align="center">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Application</th>
<th>Status</th>
</tr>
</thead>
<tbody ng-repeat="Proj in Projects">
<tr ng-click="getProject(Proj)">
<td width="50"> <span>{{Proj.id}}</span></td>
<td width="150"> <span>{{Proj.name}}</span></td>
<td width="150"> <span>{{Proj.application}}</span></td>
<td width="150"> <span>{{Proj.status}}</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-5">
<br />
<br />
<div class="row">
<div class="col-md-12" ng-show="ShowInsertPanel">
<div class="x_panel">
<div class="x_title">
<h2>New Project <small></small></h2>
<ul class="nav navbar-right panel_toolbox">
<li class="pull-right">
<a class="close-link" data-ng-click="ShowInsertPanel = !ShowInsertPanel"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="dashboard-widget-content">
<table class="table table" align="center">
<tbody>
<tr>
<th>ID</th>
<td style="vertical-align: middle;"><input type="text" id="p_id" readonly="readonly" ng-model="id" class="form-control" /></td>
</tr>
<tr>
<th>Name</th>
<td style="vertical-align: middle;"><input type="text" id="p_name" required ng-model="name" class="form-control" /></td>
</tr>
<tr>
<th>Application</th>
<td style="vertical-align: middle;"><input type="text" id="p_application" required ng-model="application" class="form-control" /></td>
</tr>
<tr>
<th>Status</th>
<td style="vertical-align: middle;">
<select id="cbStatus" required ng-model="status" class="form-control">
<option>Active</option>
<option>Inactive</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" id="new" value="New" ng-click="clearProject()" class="btn btn-default" />
<input type="button" id="save" value="Save" ng-click="saveProject()" class="btn btn-success" />
<input type="button" id="delete" value="Delete" ng-click="deleteProject()" class="btn btn-danger" />
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<br />
@*</div>*@
</body>
<!-- /page content -->
