Angular

Get selected row column values in AngularJS-UI-Grid in MVC

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.

  1. using ng_ui_grid_sample.Models;  
  2. using System.Collections.Generic;  
  3. using System.Data.Entity;  
  4. using System.Data.Entity.Infrastructure;  
  5. using System.Linq;  
  6. using System.Net;  
  7. using System.Threading.Tasks;  
  8. using System.Web.Http;  
  9. using System.Web.Http.Description;  
  10. namespace ng_ui_grid_sample.Controllers  
  11. {  
  12. [RoutePrefix("api/employeeapi")]  
  13. public class EmployeesAPIController : ApiController  
  14. {  
  15. private NORTHWNDEntities3 db = new NORTHWNDEntities3();  
  16. // GET: api/Employees  
  17. [Route("get")]  
  18. public IQueryable<Employee> GetEmployees()  
  19. {  
  20. return db.Employees;  
  21. }  
  22. // GET: api/Employees/5  
  23. [Route("detail")]  
  24. [ResponseType(typeof(Employee))]  
  25. public async Task<IHttpActionResult> GetEmployees(int id)  
  26. {  
  27. Employee employees = await db.Employees.FindAsync(id);  
  28. if (employees == null)  
  29. {  
  30. return NotFound();  
  31. }  
  32. return Ok(employees);  
  33. }  
  34. // PUT: api/Employees/5  
  35. [ResponseType(typeof(void))]  
  36. public async Task<IHttpActionResult> PutEmployees(int id, Employee employees)  
  37. {  
  38. if (!ModelState.IsValid)  
  39. {  
  40. return BadRequest(ModelState);  
  41. }  
  42. if (id != employees.EmployeeID)  
  43. {  
  44. return BadRequest();  
  45. }  
  46. db.Entry(employees).State = EntityState.Modified;  
  47. try  
  48. {  
  49. await db.SaveChangesAsync();  
  50. }  
  51. catch (DbUpdateConcurrencyException)  
  52. {  
  53. if (!EmployeesExists(id))  
  54. {  
  55. return NotFound();  
  56. }  
  57. else  
  58. {  
  59. throw;  
  60. }  
  61. }  
  62. return StatusCode(HttpStatusCode.NoContent);  
  63. }  
  64. // POST: api/Employees  
  65. [ResponseType(typeof(Employee))]  
  66. public async Task<IHttpActionResult> PostEmployees(Employee employees)  
  67. {  
  68. if (!ModelState.IsValid)  
  69. {  
  70. return BadRequest(ModelState);  
  71. }  
  72. db.Employees.Add(employees);  
  73. await db.SaveChangesAsync();  
  74. return CreatedAtRoute("DefaultApi", new { id = employees.EmployeeID }, employees);  
  75. }  
  76. // DELETE: api/Employees/5  
  77. [ResponseType(typeof(Employee))]  
  78. public async Task<IHttpActionResult> DeleteEmployees(int id)  
  79. {  
  80. Employee employees = await db.Employees.FindAsync(id);  
  81. if (employees == null)  
  82. {  
  83. return NotFound();  
  84. }  
  85. db.Employees.Remove(employees);  
  86. await db.SaveChangesAsync();  
  87. return Ok(employees);  
  88. }  
  89. protected override void Dispose(bool disposing)  
  90. {  
  91. if (disposing)  
  92. {  
  93. db.Dispose();  
  94. }  
  95. base.Dispose(disposing);  
  96. }  
  97. private bool EmployeesExists(int id)  
  98. {  
  99. return db.Employees.Count(e => e.EmployeeID == id) > 0;  
  100. }  
  101. [Route("getterritoriesbyid")]  
  102. public IEnumerable<EmployeeTerritory> GetEmployeeTerritoriesByEmployee(int id)  
  103. {  
  104. return (from et in db.EmployeeTerritories.AsEnumerable()  
  105. join t in db.Territories.AsEnumerable() on et.TerritoryID equals t.TerritoryID  
  106. where et.EmployeeID == id  
  107. orderby et.TerritoryID  
  108. select new EmployeeTerritory  
  109. {  
  110. EmployeeID = et.EmployeeID,  
  111. TerritoryID = et.TerritoryID,  
  112. TerritoryDescription = t.TerritoryDescription  
  113. });  
  114. }  
  115. }  
  116. }  

 

Module

  1. //Module  
  2. var employeeapp = angular.module('employeeapp', ['ui.grid', 'ui.grid.pagination',  
  3. 'ui.grid.selection', 'ui.grid.exporter',  
  4. 'ui.grid.grouping', 'ui.grid.expandable']);  

 

Service

  1. //Service  
  2. employeeapp.service("employeeservice", function ($http, $timeout) {  
  3. //Function to call get employee web api call  
  4. this.GetEmployee = function () {  
  5. var req = $http.get('api/employeeapi/get');  
  6. return req;  
  7. }  
  8. //function to get territories based on employeeid  
  9. this.GetTerritories = function (employeeId) {  
  10. var req = $http.get('api/employeeapi/getterritoriesbyid?id=' + employeeId);  
  11. return req;  
  12. }  
  13. });  

Controller

  1. //Controller  
  2. employeeapp.controller("empcontroller", function ($scope, employeeservice, $filter, $window, $interval, uiGridGroupingConstants, $timeout) {  
  3. GetEmployee();  
  4. function GetEmployee() {  
  5. employeeservice.GetEmployee().then(function (result) {  
  6. $scope.Employees = result.data;  
  7. console.log($scope.Employees);  
  8. }, function (error) {  
  9. $window.alert('Oops! Something went wrong while fetching employee data.');  
  10. })  
  11. }  
  12. //Columns  
  13. $scope.columnDefs = [  
  14. { name: '', field: 'EmployeeID', enableColumnMenu: false },  
  15. { name: 'photo', enableSorting: false, field: 'PhotoPath', cellTemplate: "<img width=\"50px\" ng-src=\"{{grid.getCellValue(row, col)}}\" lazy-src>", enableCellEdit: false, enableFiltering: false, enableGrouping:false },  
  16. { name: 'First Name', field: 'FirstName', headerCellClass: 'tablesorter-header-inner', enableCellEdit: true, enableFiltering: true, enableGrouping:false },  
  17. { name: 'Last Name', field: 'LastName', headerCellClass: 'tablesorter-header-inner', enableCellEdit: true, enableFiltering: true, enableGrouping:false },  
  18. { name: 'Title', field: 'Title', headerCellClass: 'tablesorter-header-inner', enableCellEdit: true, enableFiltering: false, enableGrouping:false },  
  19. { name: 'City', field: 'City', headerCellClass: 'tablesorter-header-inner', enableCellEdit: true, enableFiltering: true, enableGrouping:false },  
  20. { name: 'Country', field: 'Country', headerCellClass: 'tablesorter-header-inner', enableCellEdit: true, enableFiltering: true, enableGrouping:false },  
  21. { name: 'Notes', field: 'Notes', headerCellClass: 'tablesorter-header-inner', enableCellEdit: true, enableFiltering: false, enableGrouping:false },  
  22. { name: 'Salary', field: 'Salary', headerCellClass: 'tablesorter-header-inner', enableCellEdit: true, enableFiltering: false, enableGrouping:true }  
  23. ];  
  24. //Used to bind ui-grid  
  25. //$scope.selectedItem = null;  
  26. $scope.gridOptions = {  
  27. //For inline filter  
  28. enableGridMenu: false,  
  29. enableRowSelection: true,  
  30. enableRowHeaderSelection: false,  
  31. paginationPageSizes: [5, 10, 20, 30, 40],  
  32. paginationPageSize: 10,  
  33. enableSorting: true,  
  34. exporterMenuPdf: false,  
  35. enableFiltering: false,  
  36. treeRowHeaderAlwaysVisible: false,  
  37. multiSelect: false,  
  38. onRegisterApi: function (gridApi) {  
  39. $scope.gridApi = gridApi;  
  40. $scope.name = undefined;  
  41. $scope.title = undefined;  
  42. $scope.city = undefined;  
  43. $scope.country = undefined;  
  44. $scope.notes = undefined;  
  45. $scope.salary = undefined;  
  46. gridApi.selection.on.rowSelectionChanged($scope,function(row){  
  47. var msg = 'row selected ' + row.isSelected;  
  48. $scope.name = row.entity.FirstName +' '+ row.entity.LastName;  
  49. $scope.title = row.entity.Title;  
  50. $scope.city = row.entity.City;  
  51. $scope.country = row.entity.Country;  
  52. $scope.notes = row.entity.Notes;  
  53. $scope.salary = row.entity.Salary;  
  54. });  
  55. },  
  56. //end here  
  57. columnDefs: $scope.columnDefs,  
  58. //data for grid  
  59. data: 'Employees'  
  60. };  
  61. });  

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.

  1. GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;  
  2.   
  3. 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

  1. bundles.Add(new StyleBundle("~/Content/css").Include(  
  2. "~/Content/bootstrap.css",  
  3. "~/Content/site.css",  
  4. "~/Content/ui-grid.css"));  
  5. bundles.Add(new ScriptBundle("~/bundles/uigrid").Include(  
  6. "~/Scripts/ui-grid.min.js"));  
  7. bundles.Add(new ScriptBundle("~/bundles/angular").Include(  
  8. "~/Scripts/angular.min.js",  
  9. "~/Angular/Controller/employeecontroller.js",  
  10. "~/Angular/Controller/employeegroupingcontroller.js",  
  11. "~/Angular/Controller/empcontroller.js"));  

Render all the scripts and styles in _Loyout.cshtml

  1. @Scripts.Render("~/bundles/jquery")  
  2. @Scripts.Render("~/bundles/bootstrap")  
  3. @Scripts.Render("~/bundles/angular")  
  4. @Scripts.Render("~/bundles/uigrid")  
  5. @RenderSection("scripts", required: false)  

View

  1. @{  
  2. ViewBag.Title = "Index";  
  3. Layout = "~/Views/Shared/_Layout.cshtml";  
  4. }  
  5. <h2>UI-Grid Selected Row Sample</h2>  
  6. <div ng-app="employeeapp" ng-controller="empcontroller">  
  7. <div ui-grid="gridOptions"  
  8. class="grid"  
  9. ui-grid-pagination  
  10. ui-grid-selection  
  11. ui-grid-auto-resize  
  12. ng-cloak>  
  13. </div>  
  14. <div><br /></div>  
  15. <div>  
  16. Name: <b><label>{{name}}</label></b>  
  17. </div>  
  18. <div>  
  19. Title: <b><label>{{title}}</label></b>  
  20. </div>  
  21. <div>  
  22. City: <b><label>{{city}}</label></b>  
  23. </div>  
  24. <div>  
  25. Country: <b><label>{{country}}</label></b>  
  26. </div>  
  27. <div>  
  28. Notes: <b><label>{{notes}}</label></b>  
  29. </div>  
  30. <div>  
  31. Salary: <b><label>{{salary}}</label></b>  
  32. </div>  
  33. </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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs