angular-ui-grid: pass the value as parameter in custom template?

Question

I generated a grid with all the server side pagination and sorting. And I also inserted a edit option column in the grid. This, I could achieve using the custom tempelating functionality. However I have been struggling to pass the 'id' as a parameter for edit.

columnDefs: [
          { name: "Options2", displayName: 'Select', cellTemplate: '<div ng-click="alert();">click me</div>' },
          { name: 'ContactID', displayName: 'ID', },
          { name: 'FirstName' },
          { name: 'LastName' },
          {
              name: 'Options',
              cellTemplate: '<div>' +
                        '  <a ui-sref="editcontact({contactId: ContactID})">Edit</a>' +
                        '</div>'
          }

        ],

On hovering over the edit option :

also,Routing :

.state('editcontact',
     {
         url: '/editcontact/:contactId',
         controller: 'EditContactCtrl',
         templateUrl: 'views/contact/editContact.html', controllerAs: 'vm',
         resolve: {
             contactInfo: ['contactService', '$stateParams', function (contactService, $stateParams) {
                 return contactService.getContact($stateParams.contactId).then(function (response) {
                     return response;
                 });
             }]
         },

     })

Avishekh Bharati · Accepted Answer · 2016-08-04 09:42:37Z

1

Ok so I figured it out by accessing scopes in the templates:

edit/delete template :

{
              name: 'Options',
              cellTemplate: '<div class="ui-grid-cell-contents ng-binding ng-scope">'+
                  '<button class="btn btn-danger '+
                       'btn-xs " ng-click="grid.appScope.deleteRow(row)">' +
                  '<span class="glyphicon glyphicon-trash"></span></button>'
                  +
                  '<button ui-sref="editcontact({ contactId: \'{{row.entity.ContactID}}\'})" class="btn btn-warning ' +
                       'btn-xs " >' +
                  '<span class="glyphicon glyphicon-pencil"></span></button>'+
                  '</div>'
          }

Delete function in the controller:

//for deleting row
    $scope.deleteRow = function (row) {
        var flag = confirm("Are you sure?");

        if (flag) {
            contactService.deleteContact(row.entity.ContactID).then(function (data) {
                var index = $scope.gridOptions.data.indexOf(row.entity);
                $scope.gridOptions.data.splice(index, 1);
            });                
        }            
    };

answered Aug 4, 2016 at 9:42

Avishekh Bharati

1,9285 gold badges28 silver badges47 bronze badges

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

1 Comment

anu Over a year ago

How did you program the edit. Did you use a template or popup?

bichette · Accepted Answer · 2016-08-04 07:46:02Z

0

You can try to pass parameter with angular ui-router (check $stateparam). https://github.com/angular-ui/ui-router/wiki/URL-Routing.

If not enough, can you make a small plunker of your issue?

answered Aug 4, 2016 at 7:46

bichette

214 bronze badges

Collectives™ on Stack Overflow

angular-ui-grid: pass the value as parameter in custom template?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related