Add Action Buttons to each row in ng-grid - angularjs

I have a ng-grid on my page which is used to display details.
Is there a way to add action buttons like edit or delete to my ng-grid?
Or any property in gridOpts that needs to be set so as to enable the edit and delete button.
Also, On click of the button how will I get the details of the row selected.
Here is the code for my ng-grid.
$scope.gridOptions = {
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
multiSelect: false,
enableCellEdit: true,
enableRowSelection: true,
enableColumnResize: true,
enableCellSelection: true,
columnDefs: [
{ name: 'Name' },
{ name: 'Description' },
{ name: 'FinalModuleWisePrivileges' },
{ name: 'FinalFunctionWisePrivileges' },
{ name: 'Active' },
]
};
HTML:
I tried options like enableCellEdit and enableRowSelection but they dont seem to work.
Would this have to be done by using a loop when the grid is loaded?
I also tried to look at the following reference but it didn't help much.
ng-grid how to enable Edit and Delete buttons
Edit: I added the following line of code to the gridOptions. This solves the temporary purpose but is there a neat way to do this?
cellTemplate: '<button ng-click="grid.appScope.editClicked(row)" ng-if="row.entity.Active == true">Edit</button>'

you would need to add a column in ColumnDefs with a custom cell template..
columnDefs: [{ field: 'name', displayName: 'Name'},
{ field: 'description', displayName: 'Description'},
{ displayName: 'Actions', cellTemplate:
'<div class="grid-action-cell">'+
'<a ng-click="deleteThisRow(row.entity);" >Delete</a></div>'}
]
};
this example shows how to add custom Delete button
the example code is taken from here

Related

Angular UI Grid how to show multiple fields for the single column

I'm using Angular Ui Grid.How can I show multiple fields for the single column ? Thanks.
I need to show both streetNumber and StreetName on the same column.How can I do that ?
vm.propertyListGridOptions = {
appScopeProvider: vm,
flatEntityAccess: false,
fastWatch: true,
showHeader: false,
columnDefs: [
{
name: app.localize('IplNumber'),
field: 'id',
width: 100,
},
{
name: app.localize('BrAddress'),
field: 'address.streetNumber',
width: 140,
}
],
data: []
};
You can use custom template like this
$scope.gridOptions['columnDefs'] = [
{field: 'name', displayName: 'Name'},
{field: 'options',displayName: 'Options', cellTemplate: '<span>{{row.entity.streetNumber}} {{row.entity.StreetName}}</span>'}
];
You can also refer this page for documentation for custom templates http://ui-grid.info/docs/#/tutorial/317_custom_templates

How to update specific row for one column data in ui-grid?

This is my grid
$scope.selectedUsers = {
enableRowSelection: true,
enableSelectAll: true,
enableHorizontalScrollbar: 0,
enableVerticalScrollbar: 0,
columnDefs: [
{ name:'userName', enableColumnMenu: false, sort: { direction: uiGridConstants.ASC, priority: 0 } },
{ name: 'mandatory',cellTemplate: '<input type="checkbox">', enableColumnMenu: false, enableSorting: false },
{ name: 'alternative user', cellTemplate: '<div class="ui-grid-cell-contents" ng-if="!$eval(row.entity.alternativeuserexists)" ><a ng-click="grid.appScope.showAlternativeUsers(row)">Alternative Users</a></div>', enableColumnMenu: false, enableSorting: false }]
};
In the above grid contains 3 columns, 3rd column contains hyperlink , when i click link i want to update new value in 3rd column for particular row link value only not entire row data by using angularjs ui-grid
Your question is quite hard to understand, so if my answer doesn't fit your needs, try to provide more details or a Plunkr please.
You required a refresh of row-data on button click? Then read on.
You can modify your data-set dynamically and it will autoupdate your grid without reloading the whole thing.
I made a Plunkr showcasing a possible setup.
As you already did, one needs to provide a cellTemplate with reference to appScopeProvider. There you can create a function that modifies your present grid.data.
appScopeProvider: {
showAlternativeUsers : function(row) {
myData[myData.indexOf(row.entity)] = altUsers[myData.indexOf(row.entity)];
},
}
Depending on how and where your new data arrives, you can adjust the update logic.

How to Uncheck all celltemplate checked checkboxes in angular ui-grid

This is my ui-grid
$scope.gridOptions = {
columnDefs: [
{ name: 'name'},
{ name: 'view', cellTemplate: '<input type="checkbox" ng-model="fieldView" ng-checked="checked" ng-init="checked=row.entity.required" ng-disabled="checked" ng-click="grid.appScope.view(fieldView,row.entity);getExternalScopes().showMe(row.entity.required)">', enableSorting: false, enableColumnMenu: false },
{ name: 'edit', cellTemplate: '<input type="checkbox" ng-model="fieldEdit" ng-checked="checked" ng-init="checked=row.entity.required" ng-disabled="checked" ng-click="grid.appScope.edit(fieldEdit,row.entity);getExternalScopes().showMe(row.entity.required)">', enableSorting: false, enableColumnMenu: false }
]
};
In the above UI-grid contains 3 columns.view and edit column contains checkboxes,I want to uncheck all checked checkboxes in UI-grid,because first I render some data and check checkboxes then I render another data from api.but in this case whatever first time check the checkboxes those are not clear at the time second time data rendering to UI-grid.
I got the answer.
$scope.gridOptions.data=[];

Re-show hidden column in ui-grid AngularJs

I am using ui-grid in one of my projects and one of the requirement is to hide/show columns in the grid. Hiding columns working well but then how can I re-show the hidden column?
After searching awhile I found that in ng-grid there is showColumnMenu which provide the ability to show column after hiding it, see this example I found
$scope.gridOptions = {
data: 'myData',
columnDefs: [{
field: "id",
visible: false
},{
field: "name",
displayName : "name"
},{
field: "age",
displayname: "age",
}] ,
multiSelect: false,
showGroupPanel: true,
selectedItems: [],
showColumnMenu: true };
, but in ui-grid using showColumnMenu is not working.
I was wondering if someone know how to show hidden columns.
Thanks,
ng-grid is being re written as ui-grid. Your example link is pointing to ng-grid. But if you are wondering how to do this in angular-ui-grid.
http://plnkr.co/edit/In28bF2EYuQaATwqnBAn?p=preview Take a look at this example. To show the hidden the columns, you need to enableGridMenu, which will show you the option to show the hidden columns.
$scope.gridOptions = {
exporterMenuCsv: false,
enableGridMenu: true,
columnDefs: [
{ name: 'name' },
{ name: 'gender', enableHiding: false },
{ name: 'company' }
],
...
};

ng-grid with popup edit and save

By using the ng-grid="gridOptions" i can display the data ,my app.js file code is
$scope.gridOptions = {
data: 'myData',
enableCellSelection: true,
enableCellEdit: true,
enableRowSelection: false,
columnDefs: [{field: 'name', displayName: 'Name', enableCellEdit: true}, {field:'age', displayName:'Age'}]
};
Now how can i get the popup by clicking on the cell data ,in the popup the cell data have to edit and save the changes in grid .Anyone please ...
You just need to override your cell template in your edit column templates. columnDefs would be like below
var cellTemplate='<div class="ngCellText" data-ng-model="row"><button data-ng-click="updateSelectedRow(row,$event)">Edit</button></div>'
columnDefs: [{field: 'name', displayName: 'Name', enableCellEdit: true},
{field:'age', displayName:'Age'},
{field:'',cellTemplate:cellTemplate}
]
attach updateSelectedRow function to your controller scope,this function gets the first parameter as entire row object. you can access all columns by doing row.entity. also you can perform two-way binding with row.entity object, it updates the grid data whenever it changes.
check out this plunker http://plnkr.co/edit/3ikYNarIvasKj4BT76EX?p=preview

Resources