Angular ui-grid no rows

Question

I have a angular uiGrid on my page. The only time it will display data is if i set data in gridOptions and not on http success call back. Here is the code:

 $scope.gridOptions = {
        showfooter: false,
        enablePaging: true,
        paginationPageSizes: [15],
        paginationPageSize: 50,
        enableRowSelection: false,
        primaryKey: 'Id',
        multiSelect: false,
        enableSorting: false,
        enableVerticalScrollbar: true,
        enableHorizontalScrollbar: true,
        groupable: false,
        rowHeight: 75,
        columnDefs:
        [
            {
                field: 'Id', visible:false 
            },
            {
                field: 'Name' 

            },
            {
                field: 'CategoryName',
                DisplayName: 'Category'
            },
            {
                field: 'Actions',
                DisplayName: 'Actions',
                cellTemplate: '<a href="#" title="Edit" ng-click="goToEditInst(row)"><span class="glyphicon glyphicon-edit"></span></a>'
            }
        ]
    };

 $scope.searchInstituions = function () {
    var formObj = $scope.searchForm;
    var svc = formObj.service;
    var city = formObj.city;
    var cat = formObj.category;
    var params = { CategoryId: ((cat == null)?-1:cat.Id) , ServiceId: ((svc == null) ? -1 : svc.Id), Cityid: ((city == null) ? -1 : city.Id) };
    $http({
        method: 'POST',
        url: '/getjson',
        data: $.param(params),
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    })
    .success(function (data, status, headers, config) {
        data = [{ "Id": 1, "Name": "Golden Hills School District No. 75", "CategoryName": "Schools" }];
        $scope.gridOptions.data = data;
    })
    .error(function (data, status, headers, config) {
        alert('Error: ' + status + ". " + data);
    });
};

Note that I have hardcoded data as array of one element.

The html for this is:

    <fieldset ng-controller="InstitutionController">
    <legend>Search Results:</legend>
    <div class="gridStyle" ui-grid="gridOptions"></div>
</fieldset>

The grid does not display any rows when $scope.gridOptions.data is set on .success callback. (It is being called for those who are going to ask if the function is called

But is I set it in grid options like following it displays just fine:

$scope.gridOptions = {
    data: [{ "Id": 1, "Name": "Golden Hills School District No. 75", "CategoryName": "Schools" }],
    showfooter: false,
    enablePaging: true,
    paginationPageSizes: [15],
    paginationPageSize: 50,
    enableRowSelection: false,
    primaryKey: 'Id',
    multiSelect: false,
    enableSorting: false,
    enableVerticalScrollbar: true,
    enableHorizontalScrollbar: true,
    groupable: false,
    rowHeight: 75,
    columnDefs:
    [
        {
            field: 'Id', visible:false 
        },
        {
            field: 'Name' 

        },
        {
            field: 'CategoryName',
            DisplayName: 'Category'
        },
        {
            field: 'Actions',
            DisplayName: 'Actions',
            cellTemplate: '<a href="#" title="Edit" ng-click="goToEditInst(row)"><span class="glyphicon glyphicon-edit"></span></a>'
        }
    ]
};

What am I missing here!!!

which version of ui-grid are you using. The example plnkr.co/edit/Kd0To1g9ra9DvsIOGBeM?p=preview does exactly the same thing and it works — Kathir
ui-grid - v3.0.0-RC.18-d9b2314 - 2015-01-06 I checked that example. This was working earlier. I have another grid doing exact same thing and it works. I have no idea why is this one jinxed. I checked spells and what not. It does not give any errors, but does not display any rows either — ASR

ASR ASR · Accepted Answer · 2015-05-14T16:52:30

FIXED IT!!!

The problem was following HTML:

<form ng-submit="searchInstituions()" ng-controller="InstitutionController">
   ....
</form>
<fieldset  ng-controller="InstitutionController">
        <legend>Search Results:</legend>
        <div class="gridStyle" ui-grid="gridOptions"></div>
</fieldset>

Notice that there are two elements form and fieldset with attribute ng-controller. I am guessing the $scope is not the same for both. As soon as I changed above to the following it started working fine. Lesson learned:

<form ng-submit="searchInstituions()" ng-controller="InstitutionController">
   ...

    <div class="clear" style="margin-top: 50px;"></div>
    <fieldset>
        <legend>Search Results:</legend>
        <div class="gridStyle" ui-grid="gridOptions"></div>
      </fieldset>
</form>

Thank you for your help

Angular ui-grid no rows

1 Answers