Angular UI Grid not displaying data

Question

I am learning Angular and using the UI grid where I populate the grid from a simple loop method in the ShopplingList controller. The grid is displayed with the column headings but the data is not and I have no errors in chrome when I hit F12. Any help on where I am going wrong!!

My HTML and Javascript

var app = angular.module('app', ['ui.grid']);

app.controller('MainCtrl', ['$scope', '$http',
  function($scope, $http) {

    $scope.gridOptions1 = {};

    $scope.gridOptions1.columnDefs = [{
      name: 'ID'
    }, {
      name: 'Shopping Item'
    }];

    $http.get("/ShoppingList/getShoppingItems/")
      .success(function(data) {
        $scope.gridOptions1.data = data;
      }).error(function(error) {
        console.log(error);
      });

  }
]);

body {} .grid {
  width: 1500px;
  height: 450px;
}

<!DOCTYPE html>

<html ng-app="app">

<head>
  <meta name="viewport" content="width=device-width" charset="UTF-8" />
  <title>ShoppingList</title>
</head>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/ui-grid.min.js"></script>
<script src="~/Scripts/Irlca/ShoppingList.js"></script>
<link href="~/Content/ui-grid.css" rel="stylesheet" type="text/css" />
<link href="~/Content/main.css" rel="stylesheet" type="text/css" />

<body>
  <div ng-controller="MainCtrl">
    <div id="grid1" ui-grid="gridOptions1" class="grid"></div>
  </div>
</body>

</html>

My Model

public class ShoppingListModel
{
    public int id { get; set; }
    public string shoppingItem { get; set; }
}

My Controller public class ShoppingListController : Controller { // // GET: /ShoppingList/ public ActionResult ShoppingList() { return View("ShoppingList"); }

    public ActionResult getShoppingItems()
    {
        List<ShoppingListModel> lstRes = new List<ShoppingListModel>();

        for (int i = 0; i < 10; i++)
        {
            ShoppingListModel tsk = new ShoppingListModel();
            tsk.id = i * 10;
            tsk.shoppingItem = "Milk" + i.ToString();
            lstRes.Add(tsk);
        }

        return Json(lstRes, JsonRequestBehavior.AllowGet);
    }
}

I have an assumption but first... can you debug the get function and make sure you get the right response? (a list if items) — AranS
– AranS, Commented Jul 24, 2016 at 11:40

AranS · Accepted Answer · 2016-07-24 11:51:38Z

1

Assuming your get method receives the requested entities, there is one thing missing in your ui-grid configuration: the entity's field. This is set in columnDefs property and is in charge of connecting the name property (which will be the column header) to the actual entity field.

Try this:

$scope.gridOptions1.columnDefs = [{
      name: 'ID',
      field: 'id'
    }, {
      name: 'Shopping Item',
      field: 'shoppingItem'
    }];

answered Jul 24, 2016 at 11:51

AranS

1,91113 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular UI Grid not displaying data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related