How to reload data received async? #39

Closed
darknos opened this Issue Dec 5, 2012 · 7 comments

Comments

Projects
None yet
7 participants
@darknos

darknos commented Dec 5, 2012

When my page is loading I don't have any data available. Just requested it from cloud so I need to fill grid after data received.

I tried to "refresh" grid data by using $scope.$apply but without success... :(

Did I missed something?

@orneryd

This comment has been minimized.

Show comment Hide comment
@orneryd

orneryd Dec 6, 2012

Member

If you look at the main.js file in the workbench folder in source you will see a server side paging example. You need to do something similar in your controller. (except the server side paging part) like this:

    $scope.myData = [];
    self.getDataAsync = function () {
        setTimeout(function () {            
            $scope.myData = myAjaxQuery();
            if (!$scope.$$phase) {
                $scope.$apply();
            }
        }, 3000);
    };
    $scope.gridOptions = {
        data: 'myData',
        columnDefs: [{ field: 'name', displayName: 'Very Long Name Title', sortable: false, headerClass: 'foo', width:'auto' },
                     { field: 'allowance', aggLabelFilter: 'currency', cellTemplate: 'partials/cellTemplate.html', width: 'auto' },
                     { field: 'birthday', cellFilter: 'date', width: 'auto' },
                     { field: 'paid', cellFilter: 'checkmark', width: 'auto' }]
    };
    self.getDataAsync();
Member

orneryd commented Dec 6, 2012

If you look at the main.js file in the workbench folder in source you will see a server side paging example. You need to do something similar in your controller. (except the server side paging part) like this:

    $scope.myData = [];
    self.getDataAsync = function () {
        setTimeout(function () {            
            $scope.myData = myAjaxQuery();
            if (!$scope.$$phase) {
                $scope.$apply();
            }
        }, 3000);
    };
    $scope.gridOptions = {
        data: 'myData',
        columnDefs: [{ field: 'name', displayName: 'Very Long Name Title', sortable: false, headerClass: 'foo', width:'auto' },
                     { field: 'allowance', aggLabelFilter: 'currency', cellTemplate: 'partials/cellTemplate.html', width: 'auto' },
                     { field: 'birthday', cellFilter: 'date', width: 'auto' },
                     { field: 'paid', cellFilter: 'checkmark', width: 'auto' }]
    };
    self.getDataAsync();
@MMRandy

This comment has been minimized.

Show comment Hide comment
@MMRandy

MMRandy Jul 25, 2014

Is this the only way to update ng-grid if you have performed an async operation and updated the $scope array that is already "bound" to the grid? I hope not as this seems slightly convoluted since the grid should already be watching the bound scope variable containing the updated array. Why wouldn't there simply be a grid.refresh() method that then applies the new data already present in the scope variable? I must be missing a key point here somewhere.

MMRandy commented Jul 25, 2014

Is this the only way to update ng-grid if you have performed an async operation and updated the $scope array that is already "bound" to the grid? I hope not as this seems slightly convoluted since the grid should already be watching the bound scope variable containing the updated array. Why wouldn't there simply be a grid.refresh() method that then applies the new data already present in the scope variable? I must be missing a key point here somewhere.

@juliusakula

This comment has been minimized.

Show comment Hide comment
@juliusakula

juliusakula Dec 9, 2014

@MMRandy I agree this is a huge issue. This plunkr shows that when you load completely different datasets, it breaks the table. http://plnkr.co/edit/BtxcXPZ06zvHuNFQczMv?p=preview

Anyone feel free to answer this stackoverflow question http://stackoverflow.com/questions/27384751/swapping-data-in-angular-ui-grid-new-columns-not-visible-when-changing-dataset

@MMRandy I agree this is a huge issue. This plunkr shows that when you load completely different datasets, it breaks the table. http://plnkr.co/edit/BtxcXPZ06zvHuNFQczMv?p=preview

Anyone feel free to answer this stackoverflow question http://stackoverflow.com/questions/27384751/swapping-data-in-angular-ui-grid-new-columns-not-visible-when-changing-dataset

@kevin-sage

This comment has been minimized.

Show comment Hide comment
@kevin-sage

kevin-sage Dec 9, 2014

Maybe I am thinking about this wrong, why not just do this:

app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.swapData = function() {
if ($scope.gridOpts.data === data1) {
$scope.gridOpts.columnDefs = [
{ name:'firstName' },
{ name:'lastName' },
{ name:'company' },
{ name:'punk' }
];
$scope.gridOpts.data = data2;
}
else {
$scope.gridOpts.columnDefs = [
{ name:'firstName' },
{ name:'lastName' },
{ name:'company' },
{ name:'employed' }
];
$scope.gridOpts.data = data1;
}
};

Based on what I see out on stackoverflow, this would seem easy to do since it has the column names in the json anyway (or you could pull out the columns using something like lo-dash).

Maybe I am thinking about this wrong, why not just do this:

app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.swapData = function() {
if ($scope.gridOpts.data === data1) {
$scope.gridOpts.columnDefs = [
{ name:'firstName' },
{ name:'lastName' },
{ name:'company' },
{ name:'punk' }
];
$scope.gridOpts.data = data2;
}
else {
$scope.gridOpts.columnDefs = [
{ name:'firstName' },
{ name:'lastName' },
{ name:'company' },
{ name:'employed' }
];
$scope.gridOpts.data = data1;
}
};

Based on what I see out on stackoverflow, this would seem easy to do since it has the column names in the json anyway (or you could pull out the columns using something like lo-dash).

@kevin-sage

This comment has been minimized.

Show comment Hide comment
@kevin-sage

kevin-sage Dec 9, 2014

Here is the updated sample in plunker.
http://plnkr.co/edit/OFt86knctJxcbtf2MwYI?p=preview

Here is the updated sample in plunker.
http://plnkr.co/edit/OFt86knctJxcbtf2MwYI?p=preview

@c0bra

This comment has been minimized.

Show comment Hide comment
@c0bra

c0bra Dec 10, 2014

Member

This issue is from ~2 years ago. It should probably not be used to determine what should or should not be done to get a certain result in the grid.

Member

c0bra commented Dec 10, 2014

This issue is from ~2 years ago. It should probably not be used to determine what should or should not be done to get a certain result in the grid.

bartkiewicz pushed a commit to bartkiewicz/ui-grid that referenced this issue Jan 25, 2016

Merge pull request #39 from bartkiewicz/columnMovementChanges
Removing redundant line from move-columns
@arfankgp

This comment has been minimized.

Show comment Hide comment
@arfankgp

arfankgp Sep 24, 2016

This plunker shows how to refresh ui-grid based on different data source.
Note the use of columnDefs for declaring view based on data.
http://plnkr.co/edit/6khgBVXnIXMDPjSSwLgl?p=preview

This plunker shows how to refresh ui-grid based on different data source.
Note the use of columnDefs for declaring view based on data.
http://plnkr.co/edit/6khgBVXnIXMDPjSSwLgl?p=preview

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment