How to refresh automatically Angular UI Grid after adding data

Question

I have angular UI-Grid which I want to reload after the data is added. Please let me know what do I need to add?

HTML File

<form class="form-main">
  <label>Category Name</label>
  <input type="text" id="txtCategory" ng-model="md_catname" />
  <button id="btnAdd" type="submit" class ="button-internal" ng-click="Add()">Add</button>    
  <div class="gridBigStyle" ui-grid="gridCategory" ui-grid-edit ui-grid-pagination>            
</form>

Controller File

var myApp = angular.module('appHome');
myApp.controller("ctrlCategory", ['$scope', 'MetadataOrgFactory', 'CommonFunctionFactory', function ($scope, MetadataOrgFactory, CommonFunctionFactory) {
    $scope.gridCategory = {
        data: 'categoryData',        
        columnDefs: [
            {
                field: 'CategoryName', displayName: 'Name',                
            },           
        ]
    }

    //This is to retrieve existing categories from Database
    MetadataOrgFactory.getApiCall('getallcatgories', function (dataSuccess) {
        $scope.categoryData = dataSuccess;
    }, function (dataError) {
    });

    //Common Function being called to Add Category Name
    $scope.Add = function () {
        var objCategory = {
            'CategoryName': $scope.md_catname,            
        };
        CommonFunctionFactory.AddMasterData(objCategory, function (dataSuccess) {
        }, function (dataError) {
        });
    }
}])

Common Function File

var appService = angular.module('appHome');
appService.factory('CommonFunctionFactory', ['MetadataOrgFactory', function (MetadataOrgFactory) {
    var dataFactory = {};

    //Adding Master Data to DB
    dataFactory.AddMasterData = function (objData) {
        MetadataOrgFactory.postApiCall(serviceFunc, objMasterData, function (dataSuccess) {
            alert("The request has been completed succesfully");
        }, function (dataError) {
    });
    };
}])

I want to understand what code to put so that Angular UI Grid refresh automatically after data add in DB.

You no need to refresh the page as angularjs comes with 2 way binding. Are you facing any issues? — Rakesh Burbure
– Rakesh Burbure, Commented May 31, 2018 at 5:22
When we add the data then it is successfully updated in database but grid did not refresh with data. When I refresh the page by F5 then only the new data shown in Grid. Is there any way to show the new data in grid as soon as it added in database. — simple user
– simple user, Commented May 31, 2018 at 15:59
You can implement pooling mechanism to pull latest data. It will periodically check for new data in the database. To avoid huge data transfer you can request only for new data in subsequent requests. — Dhruv Kapatel
– Dhruv Kapatel, Commented May 31, 2018 at 18:26

Priyanka Jethwa · Accepted Answer · 2018-05-31 11:36:00Z

1

Get the full list of updated data as the return of successful updation and , feed the data to the grid, ie $scope.gridOptions.data = latestData;

answered May 31, 2018 at 11:36

Priyanka Jethwa

778 bronze badges

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

3 Comments

simple user Over a year ago

It is good suggestion but then I need to give service call again to get the latest data in database and bind with grid. If you have any other idea then can you please give an example here?

Priyanka Jethwa Over a year ago

other solution is , use location.reload(); method where you want to refresh grid list

simple user Over a year ago

I have used the same approach to reload the page.

Collectives™ on Stack Overflow

How to refresh automatically Angular UI Grid after adding data

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related