CODEWITHSUNDEEP
angularjsangular-ui-grid
rji rji
rji rji

Reputation: 707

How to display the data after form submission from modal into grid in angularjs

I have a form which is modal and a grid in page.

When button is clicked modal opens, after submitting the form the data must be displayed in ui-grid.

I have tried few code in the following plunker

http://plnkr.co/edit/GWR0yoACZfCSDhH55PLJ?p=preview

This is the code I tried

 var ModalDemoCtrl = function ($scope, $modal, $log) {
  var columnDefs = [
                    { name: 'customname', displayName: 'Customer Name' },
                    { name: 'email', displayName: 'Email' }
    ];
    $scope.gridOptions = {
        paginationPageSizes: [10, 15, 20],
        paginationPageSize: 10,
        enableColumnMenus: false,
        enableRowSelection: true,
        enableFullRowSelection: true,
        multiSelect: false,
        columnDefs: columnDefs,
        data: $scope.system
    };

 $scope.open = function () {

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: ModalInstanceCtrl,
  resolve: {
    system: function () {
      return $scope.system;
    }
  }
  });

modalInstance.result.then(function (systems) {
   $scope.gridOptions.data = systems;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});
};
};

 var ModalInstanceCtrl = function ($scope, $modalInstance, system) {

 $scope.system = system;

 $scope.submit = function () {
  $modalInstance.close($scope.system);

 };

 $scope.cancel = function () {
   $modalInstance.dismiss('cancel');
 };

};

Upvotes: 1

Views: 745

Answers (1)

Bennett Adams
Bennett Adams

Reputation: 1818

You had a few issues in your plunker:

  1. You weren't actually loading the ui-grid script or CSS in your html or injecting 'ui.grid' into your module.

    <script src="http://ui-grid.info/release/ui-grid.js"></script>

    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">

and in your plunker module: angular.module('plunker', ['ui.bootstrap', 'ui.grid'])...

  1. You never initialized system on $scope in your main controller, so I'm not sure what you were trying to resolve in the modal controller.
  2. The $scope.gridOptions.data object is an array, so upon closing the modal, you want to push the system data into it rather than setting it equal to system.

i.e.:

modalInstance.result.then(function (system) {
  console.log(system);
  $scope.gridOptions.data.push(system);
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});

If your aim is to be able to submit a name and an email and have it populate a ui-grid, this plunker, modified from your original, accomplishes that. Hope this helps!

Upvotes: 1

Related Questions