function RowEditCtrl($uibModalInstance, grid, row, $http) {
var vm = this;

vm.entity = angular.copy(row.entity);

vm.save = save;

function save(ignore) {

vm.save = save;

row.entity = angular.extend(row.entity, vm.entity);

$http.post(‘/contacts/update’, vm.entity)
.success(function(data) {
console.log(“done”)
$uibModalInstance.close(row.entity);
})
.error(function(err) {
console.log(‘Error: ‘ + err);
});

}
};

When i am going to call api on save function it not working

this is my code

function RowEditCtrl($uibModalInstance, grid, row, $http) {
var vm = this;

vm.entity = angular.copy(row.entity);

vm.save = save;

function save(ignore) {

vm.save = save;

row.entity = angular.extend(row.entity, vm.entity);

$http.post(‘/contacts/update’, vm.entity)
.success(function(data) {
console.log(“done”)
$uibModalInstance.close(row.entity);
})
.error(function(err) {
console.log(‘Error: ‘ + err);
});

}
};

main controller1.
function typeListGet(){
var vm=this;
vm.editRow = RowEditor.editRow;
$http.get(‘/test’).then(
function success(response) {
$scope.urlid=response.data.result.rows;
$scope.gridOptions.enableFiltering=true;
$scope.gridOptions.columnDefs = [
{
name: ‘type’,
enableCellEdit: false
},

{
name: ‘adtype’,
displayName: ‘AD Type’
},
{
field: ‘id’,
name: ”,
cellTemplate: ‘/templates/dashboard/editButton.html’,
width:50,
enableSorting: false,
enableFiltering:false
}
];
},

function error(response) {
var data = response.data;
});
}
rowedit controller

angular.module(‘yapp’)

.controller(‘ModalInstanceCtrl’,[‘$scope’, ‘$modalInstance’, ‘grid’,’row’, function($scope, $modalInstance, grid, row) {
function RowEditCtrl($modalInstance, PersonSchema, grid, row) {
var vm = this;
vm.schema = PersonSchema;
vm.entity = angular.copy(row.entity);
vm.form = [
‘name’,
‘company’,
‘phone’,
‘address.city’
];
vm.grid = grid;
vm.row = row;
vm.save = save;
function save() {

// Copy row values over

row.entity = angular.extend(row.entity, vm.entity);

$modalInstance.close(row.entity);
}

}
}]);
—-
service

angular.module(‘yapp’)
.factory(‘RowEditor’,[‘$rootScope’, ‘$modal’, function($rootScope, $modal) {
var service = {};
service.editRow = editRow;
function editRow(grid, row) {
console.log(‘in service’);
$modal.open({
templateUrl: ‘editModal.html’,
controller: [‘$modalInstance’, ‘PersonSchema’, ‘grid’, ‘row’, ModalInstanceCtrl],
//controllerAs: ‘vm’,
resolve: {
grid: function () { return grid; },
row: function () { return row; }
}
});
}
return service;
}]);
——–
edit modal

Edit Row

Save
Cancel

—–
edit button

</div

But I want to display the form into a seperate div near the grid, and not into a modal…
The div is with id=”detail” ng-include=” ‘service-edit.html’ “…
How can I get the data from the function editRow(grid, row) with the same result as $modal.open()?
$uibModal’s open function is not an option for me…

Thx a lot!

Many thanks in advanced!

But I am facing issue in saving data to grid from the modal.

please check this plunker –> http://plnkr.co/edit/ss5pAvAssZoAiYhDM8YP?p=preview

Here I have to save comments to the grid and the same should go and save to database.

Actually the data has to fetch from database each time, but the one who edits it he has to see his comments right a way. for others it will fetch from database. I tried with your code but i need custom model like how it is in plunker. can you help me in resolving this.

Thanks 🙂

Inside RowEditCtrl I’ve tried triggering $scope.$broadcast(‘schemaFormValidate’); on $modalInstance.opened or on $modalInstance.rendered and $scope.$on(‘sf-render-finished’) but without success. I ended up using a custom method in the controller that takes each field in the controller and triggers $scope[formname][fieldname].$$parseAndValidate();. This is how I trigger validation on modal open and onSubmit:

$modalInstance.opened.then(function(){
$scope.$broadcast(‘schemaFormValidate’);
$scope.$on(‘sf-render-finished’, function(event, mass) {
// console.log(mass);
$timeout(function() {
validate();
$scope.$broadcast(‘schemaFormValidate’);
}, 1);
});
});

vm.onSubmit = function(editForm) {
// First we broadcast an event so all fields validate themselves
validate();
$scope.$broadcast(‘schemaFormValidate’);
// Then we check if the form is valid
if (editForm.$valid) {
//… do whatever you need to do with your data.

row.entity = angular.extend(row.entity, vm.entity);
vm.grid.api.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
$modalInstance.close(row.entity);
}
}

//validate each form field
function validate(){

angular.forEach(vm.entity, function(value, key){
if($scope.hasOwnProperty(‘editRowForm’) && $scope.editRowForm.hasOwnProperty(key)) {
$scope.editRowForm[key].$$parseAndValidate();

}
});
}

I think the solution depends on how you’re doing validation. You may need to manually trigger the validation to run after the modal is opened. Are you using Angular’s built-in form validation? If so, which version of Angular?