Introduction

This article is about how to create a simple ASP.NET Web API and implement keyboard navigation in Shield UI Grid.

Requirements

Basic knowledge of ASP.NET MVC, ASP.NET Web API, and Shield UI framework.

Process Outline

  1. Creating new ASP.NET Web API Project
  2. Creating Model class
  3. Creating the API Controller
  4. Testing the REST API using Postman
  5. Editing an existing View to implement the Shield UI Grid with the keyboard navigation using the REST API.
Creating new ASP.NET Web API Project

Open Visual Studio (in my case, I’m using VS 2015 Community) and select File -> New -> Project. In the popup window, select ASP.NET Web Application (.NET Framework), name it as you like, and click OK. I named it ShieldUIGridNavigation.


In the next window, select Web API.


Creating Model class

When the Visual Studio is ready for creating the project, head to the Solution Explorer (if It’s not shown, navigate to the top left corner -> View -> Solution Explorer) -> Right click on the “Models” folder -> Add -> Class and name it Car.cs.

Car.cs

  1. public class Car
  2. {
  3. public Car(int id, string manufacturer, string model, string color, int yearmade)
  4. {
  5. this.Id = id;
  6. this.Manufacturer = manufacturer;
  7. this.Model = model;
  8. this.Color = color;
  9. this.YearMade = yearmade;
  10. }
  12. public int Id { get; set; }
  14. public string Manufacturer { get; set; }
  16. public string Model { get; set; }
  18. public string Color { get; set; }
  20. public int YearMade { get; set; }
  21. }
Creating the API Controller

Head to the Solution Explorer -> Right click on the “Controller” folder -> Add -> Controller and select Web API 2 Controller – Empty as shown in the figure. Name it CarsController.cs.


CarsController.cs

  1. public class CarsController : ApiController
  2. {
  3. [HttpGet]
  4. public IHttpActionResult GetCars()
  5. {
  6. var carList = new List<Car>();
  8. carList.Add(new Car(1, "BMW", "M4", "Red", 2016));
  9. carList.Add(new Car(2, "Audi", "RS6", "Blue", 2015));
  10. carList.Add(new Car(3, "Mercedes", "GLE", "White", 2016));
  11. carList.Add(new Car(4, "Honda", "Civic", "Black", 2004));
  12. carList.Add(new Car(5, "Volkswagen", "Touareg", "Chameleon", 2008));
  13. carList.Add(new Car(6, "Koenigsegg", "Agera R", "Gray", 2007));
  14. carList.Add(new Car(7, "Ford", "Mustang", "Black", 2011));
  15. carList.Add(new Car(8, "Dodge", "Challenger", "Brown", 2017));
  17. return Ok(carList);
  18. }
  19. }

The GetCars() action returns a list of cars which will be filled in the Grid.

Testing the REST API using Postman

Using Postman, we will test if the API is returning the list without any errors by making an request of type GET to api/cars, as shown in the figure. If everything is fine, we should get the list in JSON format.


Editing the View to implement the Shield UI Grid with keyboard navigation using REST API.

Now that we got a working REST API, we need to include the Shield UI Javascript and CSS files in our _Layout.cshtml. The files are already included in the project so we simply need to add

  1. @Styles.Render("~/Content/shieldui.1.7.29-Trial/css/light/all.min.css")
  3. @Scripts.Render("~/Content/shieldui.1.7.29-Trial/js/jquery-1.11.1.min.js")
  4. @Scripts.Render("~/Content/shieldui.1.7.29-Trial/js/shieldui-all.min.js")

Now, we are good to go!

Navigate to Solution Explorer -> Open Views Folder -> Home -> Open Index.cshtml.
Delete everything there and add the following code to implement the Shield UI Grid.

Index.cshtml

  1. <div id="grid"></div>
  3. @section scripts {
  4. <script>
  5. jQuery(function ($) {
  6. $("#grid").shieldGrid({
  7. dataSource: {
  8. remote: {
  9. read: {
  10. url: "/api/cars",
  11. dataType: "json"
  12. }
  13. }
  14. },
  15. schema: {
  16. fields: {
  17. id: { path: "Id", type: Number },
  18. manufacturer: { path: "Manufacturer", type: String },
  19. model: { path: "Model", type: String },
  20. color: { path: "Color", type: String },
  21. yearmade: { path: "YearMade", type: Number }
  22. }
  23. },
  24. navigation: true,
  25. paging: {
  26. pageSize: 6,
  27. pageLinksCount: 8
  28. },
  29. editing: {
  30. enabled: true,
  31. type: "row"
  32. },
  33. selection: {
  34. type: "row",
  35. multiple: true,
  36. toggle: false
  37. },
  38. columns: [
  39. { field: "Id", width: "70px", title: "ID" },
  40. { field: "Manufacturer", title: "Manufacturer", width: "280px" },
  41. { field: "Model", width: "200px", title: "Car model" },
  42. { field: "Color", title: "Car Color", width: "100px" },
  43. { field: "YearMade", title: "Year Made" },
  44. {
  45. width: 150,
  46. title: " ",
  47. buttons: [
  48. { commandName: "edit", caption: "Edit" },
  49. { commandName: "delete", caption: "Delete" }
  50. ]
  51. }
  52. ],
  53. });
  54. });
  55. </script>
  56. }

By default, the keyboard navigation in the Grid is false (turned off); so we need to add the property navigation in the Grid code.

Result


There are different built-in key combinations to work with the Shield UI Grid.

The Grid also supports non built-in functionality. Just for example, the code below focuses the grid in the example by pressing Ctrl + G.

  1. $(document).keydown(function (e) {
  2. if (e.ctrlKey && e.keyCode == 71) {
  3. // focus the Grid by calling its focus() method
  4. // this should focus the first cell inside it
  5. $("#grid").swidget().focus();
  6. // do not propagate the event
  7. e.preventDefault();
  8. e.stopPropagation();
  9. return false;
  10. }
  11. });

References

  1. https://www.shieldui.com/documentation/grid
  2. https://demos.shieldui.com/web/grid-general/keyboard-navigation

Conclusion

We’ve seen how easy it is to implement the Shield UI Grid with Keyboard navigation with REST API. I hope you enjoyed this article. Feel free to give feedback, comment or question about this article anytime!