If you want to know how to get started with UI-Grid and how to set up a project in AngularJS and Web API, read the articles given below first.
Angular-UI-Grid has selection row changed feature which gives you all column value from selected row.
Again in this sample I am using NORTHWND sample database and Employee table data.
Entity Model
Web API
Here, my Web API class code is given below.
Module
-
- var employeeapp = angular.module('employeeapp', ['ui.grid', 'ui.grid.pagination',
- 'ui.grid.selection', 'ui.grid.exporter',
- 'ui.grid.grouping', 'ui.grid.expandable']);
Service
-
- employeeapp.service("employeeservice", function ($http, $timeout) {
-
- this.GetEmployee = function () {
- var req = $http.get('api/employeeapi/get');
- return req;
- }
-
- this.GetTerritories = function (employeeId) {
- var req = $http.get('api/employeeapi/getterritoriesbyid?id=' + employeeId);
- return req;
- }
- });
Controller
-
- employeeapp.controller("empcontroller", function ($scope, employeeservice, $filter, $window, $interval, uiGridGroupingConstants, $timeout) {
- GetEmployee();
- function GetEmployee() {
- employeeservice.GetEmployee().then(function (result) {
- $scope.Employees = result.data;
- console.log($scope.Employees);
- }, function (error) {
- $window.alert('Oops! Something went wrong while fetching employee data.');
- })
- }
-
- $scope.columnDefs = [
- { name: '', field: 'EmployeeID', enableColumnMenu: false },
- { name: 'photo', enableSorting: false, field: 'PhotoPath', cellTemplate: "<img width=\"50px\" ng-src=\"{{grid.getCellValue(row, col)}}\" lazy-src>", enableCellEdit: false, enableFiltering: false, enableGrouping:false },
- { name: 'First Name', field: 'FirstName', headerCellClass: 'tablesorter-header-inner', enableCellEdit: true, enableFiltering: true, enableGrouping:false },
- { name: 'Last Name', field: 'LastName', headerCellClass: 'tablesorter-header-inner', enableCellEdit: true, enableFiltering: true, enableGrouping:false },
- { name: 'Title', field: 'Title', headerCellClass: 'tablesorter-header-inner', enableCellEdit: true, enableFiltering: false, enableGrouping:false },
- { name: 'City', field: 'City', headerCellClass: 'tablesorter-header-inner', enableCellEdit: true, enableFiltering: true, enableGrouping:false },
- { name: 'Country', field: 'Country', headerCellClass: 'tablesorter-header-inner', enableCellEdit: true, enableFiltering: true, enableGrouping:false },
- { name: 'Notes', field: 'Notes', headerCellClass: 'tablesorter-header-inner', enableCellEdit: true, enableFiltering: false, enableGrouping:false },
- { name: 'Salary', field: 'Salary', headerCellClass: 'tablesorter-header-inner', enableCellEdit: true, enableFiltering: false, enableGrouping:true }
- ];
-
-
- $scope.gridOptions = {
-
- enableGridMenu: false,
- enableRowSelection: true,
- enableRowHeaderSelection: false,
- paginationPageSizes: [5, 10, 20, 30, 40],
- paginationPageSize: 10,
- enableSorting: true,
- exporterMenuPdf: false,
- enableFiltering: false,
- treeRowHeaderAlwaysVisible: false,
- multiSelect: false,
- onRegisterApi: function (gridApi) {
- $scope.gridApi = gridApi;
- $scope.name = undefined;
- $scope.title = undefined;
- $scope.city = undefined;
- $scope.country = undefined;
- $scope.notes = undefined;
- $scope.salary = undefined;
- gridApi.selection.on.rowSelectionChanged($scope,function(row){
- var msg = 'row selected ' + row.isSelected;
- $scope.name = row.entity.FirstName +' '+ row.entity.LastName;
- $scope.title = row.entity.Title;
- $scope.city = row.entity.City;
- $scope.country = row.entity.Country;
- $scope.notes = row.entity.Notes;
- $scope.salary = row.entity.Salary;
- });
- },
-
- columnDefs: $scope.columnDefs,
-
- data: 'Employees'
- };
- });
As you can see in my controller code I have defined few variables which are having values on row selection changed event. We will bind these values to some html labels next. But before that let’s give references of module, services and controllers.
Global
Now, add a few lines in Global.asax in Application_Start event.
- GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
-
- GlobalConfiguration.Configuration.Formatters.Remove(GlobalConfiguration.Configuration.Formatters.XmlFormatter);
Now, add the mandatory packages given below, using NuGet Package Manager.
Bundling
Bundle the required styles and scripts.
Add the bundles given below in BundleConfig.cs
- bundles.Add(new StyleBundle("~/Content/css").Include(
- "~/Content/bootstrap.css",
- "~/Content/site.css",
- "~/Content/ui-grid.css"));
- bundles.Add(new ScriptBundle("~/bundles/uigrid").Include(
- "~/Scripts/ui-grid.min.js"));
- bundles.Add(new ScriptBundle("~/bundles/angular").Include(
- "~/Scripts/angular.min.js",
- "~/Angular/Controller/employeecontroller.js",
- "~/Angular/Controller/employeegroupingcontroller.js",
- "~/Angular/Controller/empcontroller.js"));
Render all the scripts and styles in _Loyout.cshtml
- @Scripts.Render("~/bundles/jquery")
- @Scripts.Render("~/bundles/bootstrap")
- @Scripts.Render("~/bundles/angular")
- @Scripts.Render("~/bundles/uigrid")
- @RenderSection("scripts", required: false)
View
- @{
- ViewBag.Title = "Index";
- Layout = "~/Views/Shared/_Layout.cshtml";
- }
- <h2>UI-Grid Selected Row Sample</h2>
- <div ng-app="employeeapp" ng-controller="empcontroller">
- <div ui-grid="gridOptions"
- class="grid"
- ui-grid-pagination
- ui-grid-selection
- ui-grid-auto-resize
- ng-cloak>
- </div>
- <div><br /></div>
- <div>
- Name: <b><label>{{name}}</label></b>
- </div>
- <div>
- Title: <b><label>{{title}}</label></b>
- </div>
- <div>
- City: <b><label>{{city}}</label></b>
- </div>
- <div>
- Country: <b><label>{{country}}</label></b>
- </div>
- <div>
- Notes: <b><label>{{notes}}</label></b>
- </div>
- <div>
- Salary: <b><label>{{salary}}</label></b>
- </div>
- </div>
That’s it. We are all done here with all now time to run the application.
Output
Now click on any row.
As you can see in screenshot 4, all values from selected row is displaying in labels. You can select any row.
Conclusion
In this article, we have seen how to how to get the selected row column values in angular ui-grid with Web API with an Entity Framework in MVC. If you have any question or comments, drop me a line in the comments section.