Column value not showing in ng (ui) grid

Question

I have a angular ui-grid as below in HTML

<div id="grid1" ui-grid="gridOptions" ui-grid-edit class="grid"></div>

In the JS, I am getting data from pouchdb and storing the result to an object

    function find_users_by_name(name) {                                               

                    if( !name.id ) { // This is not a callback from 'db.change'
                        myId = name;  
                        oldId = name;
                    }
                    else  // This is called from db.change
                        myId = oldId;                              

                    db.query('idx/bypin', {
                        key: myId,
                        include_docs: true
                    }).then(function(result) {
                       $scope.todo =  result.rows; 
                    }).catch(function(err) {
                        // handle errors
                        alert('not found');
                    }); 

               $scope.gridOptions = { enableSorting: true, enableColumnResizing:true };
                $scope.gridOptions.data = $scope.todo;

               $scope.gridOptions.columnDefs = [

                        {name: 'Address1',field: "Address1"},
                        {name: 'Address2',field: "Address2"}

                        ];  
            }

However, the grid is created with no. of rows as in result, and just shows the column headers, but I don't find in any data.

What is it I am doing wrong here?

TIA!

Answer 1

Try to apply the scope after getting the results, but it should be better if you declare your ng-grid outside the function you use to get the data:

function MyCtrl($scope) {
    function find_users_by_name(name) {                                               
        if( !name.id ) { // This is not a callback from 'db.change'
            myId = name;  
            oldId = name;
        }
        else  // This is called from db.change
            myId = oldId;                              

        db.query('idx/bypin', {
            key: myId,
            include_docs: true
        }).then(function(result) {
            $scope.todo =  result.rows;
            // DO THIS
            if (!$scope.$$phase) {
                $scope.$apply();
            }
        }).catch(function(err) {
            // handle errors
            alert('not found');
        });  
    }

    $scope.gridOptions = { enableSorting: true, enableColumnResizing:true };

    $scope.gridOptions.data = $scope.todo;

    $scope.gridOptions.columnDefs = [
         {name: 'Address1',field: "Address1"},
         {name: 'Address2',field: "Address2"}            
    ]; 
}

Answer 2

Query to the in browser database is asynchronous. As you can see you are using promises.

And your assigning of todo to grid data is immediately after the declaration of the call to the in browser database.

Please move this assignment inside the then function or declare another then and do your next steps there.

Good luck

Answer 3

The db.query function is async. you must assign gridoption.data in db.query function:

function find_users_by_name(name) {                                               

                if( !name.id ) { // This is not a callback from 'db.change'
                    myId = name;  
                    oldId = name;
                }
                else  // This is called from db.change
                    myId = oldId;                              

  $scope.gridOptions = { enableSorting: true, enableColumnResizing:true };
  $scope.gridOptions.columnDefs = [

                    {name: 'Address1',field: "Address1"},
                    {name: 'Address2',field: "Address2"}

                    ];    

  db.query('idx/bypin', {
                    key: myId,
                    include_docs: true
                }).then(function(result) {
                   $scope.todo =  result.rows; 
                   $scope.gridOptions.data = $scope.todo;
                }).catch(function(err) {
                    // handle errors
                    alert('not found');
                }); 
        }

Answer 4

I don't know if it fine to do this way but try it.

function find_users_by_name(name) {

                if( !name.id ) { // This is not a callback from 'db.change'
                    myId = name;  
                    oldId = name;
                }
                else  // This is called from db.change
                    myId = oldId;                              

                db.query('idx/bypin', {
                    key: myId,
                    include_docs: true
                }).then(function(result) {
                   $scope.todo =  result.rows; 
                }).catch(function(err) {
                    // handle errors
                    alert('not found');
                }); 

           $scope.gridOptions = { enableSorting: true, enableColumnResizing:true };

           $scope.gridOptions.columnDefs = [

                    {name: 'Address1',field: "Address1"},
                    {name: 'Address2',field: "Address2"}

                    ];  
        }

 $timeout(function() {
     $scope.gridOptions.data = $scope.todo;
    //$scope.gridApi1.grid.refresh();
  }, 800);

Answer 5

You can also try this.

function find_users_by_name(name) {

if (!name.id) { // This is not a callback from 'db.change'
    myId = name;
    oldId = name;
} else // This is called from db.change
    myId = oldId;

db.query('idx/bypin', {
    key: myId,
    include_docs: true
}).then(function(result) {
    $scope.todo = result.rows;
    nowDoGridBinding();
}).catch(function(err) {
    // handle errors
    alert('not found');
});

$scope.gridOptions = {};
var nowDoGridBinding = function() {
    $scope.gridOptions = {
        enableSorting: true,
        enableColumnResizing: true,
        data: $scope.todo;
        columnDefs: [{
            name: 'Address1',
            field: "Address1"
        }, {
            name: 'Address2',
            field: "Address2"
        }];
    };
};

Answer 6

I know its very late to put in the answer.

<div id="grid1" ui-grid="{ data: todo }"></div>

This should do the trick. It works for me.