So I'm trying to get my Angular UI Grid to register a double click event on an entire row to open up a modal. I can start with a toastr toast and go from there though. This is the closest I've come based on various demos and examples online, but I just can't seem to get it to work.
Controller:
$scope.gridHandlers = {
onDblClick: function(rowItem){
toastr.success(rowItem, 'Row Item:')
}
}
$scope.gridOptions = {
onRegisterApi : function(gridApi){
$scope.gridApi = gridApi
},
data: $scope.customerList,
enableRowHeaderSelection: false,
enableRowSelection: true,
enableSelectAll: false,
multiSelect: false,
noUnselect: true,
rowTemplate: '<div ng-dblclick="getExternalScopes().onDblClick(row)" external-scopes="gridHandlers" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ \'ui-grid-row-header-cell\': col.isRowHeader }\" ui-grid-cell></div>',
columnDefs : [
{name: 'name', type: 'string'},
...etc
{name: 'status_name', displayName: 'Status', width: '11%', type: 'string'}
]
View:
<div class="large-12 cols" ui-grid="gridOptions" ui-grid-selection external-scopes="gridHandlers">
I've tried using the grid.appScope methods they talk about and everything else, but I just can't get it to work. Where am I here, totally off?
grid.appScope did work for me. Please see the plnkr (Double click on any row to see the row data)
Related
I want to change the icon and location of button / icon for expanding any row in angular ui-grid. By default, the icon is plus squared and location is left most column. Any pointers for this would be appreciated.
Instead of:
I want :
I fingered out the solution from Vijay's help.
Updated plunk here
Use cell template to define a custom cell and capture the expandable event of ui-grid
cellTemaplte example:
{
name: 'Actions',
displayName: '',
enableFiltering: false,
enableColumnMenu: false,
cellTemplate: ' <div \
class="ui-grid-cell-contents"> \
<i \
ng-class="{ \'ui-grid-icon-right-dir\' : !row.isExpanded, \'ui-grid-icon-down-dir\' : row.isExpanded }" \
ng-click="grid.api.expandable.toggleRowExpansion(row.entity)"> \
</i> \
</div>',
enableSorting: false
}
You need to set below :
enableExpandableRowHeader: false
Then you need to use a custom cell template for using other icons. I have used a Font awesome icon in the plunker below. Don't forget to inject $templateCache in controller.
app.controller('MainCtrl', ['$scope', '$http', '$log', "$templateCache",function ($scope, $http, $log,$templateCache)
$scope.gridOptions.columnDefs = [
{ name: 'id' },
{ name: 'name'},
{ name: 'age'},
{ name: 'address.city'},
{
// Add a new column with your icon
name: 'Expandable',
displayName: '',
enableSorting: false,
headerCellClass: 'header-cell',
cellClass: 'center-align',
enableCellEdit: false,
enableFiltering: false,
width: '14%',
cellTemplate: $templateCache.put('ui-grid/expandableRowHeader',
"<div class=\'ui-grid-cell-contents expand-row\'>" +
"<i class=\'icon-margin fa fa-pencil-square-o\' " +
"ng-click=\'grid.api.expandable.toggleRowExpansion(row.entity)\'></i>" +
"</div>"
)
}
Plunker : http://plnkr.co/edit/7M8ZIAhHHjURkb9nSbBn?p=preview
I have 2 grids on 2 different view templates that share the same controller. I want to populate values of grid2 with the values filled by the user in grid1. How do I achieve that? Is there an example I could look at?
View1 template:
<div ui-grid="section1"
class="sectiongrid" ui-grid-edit ui-grid-row-edit ui-grid-cellNav ui-grid-resize-columns>
</div>
<button ng-click="addNewItem(section1)">Add Row</button>
View2 template:
<div ui-grid="section2"
class="sectiongrid" ui-grid-edit ui-grid-row-edit ui-grid-cellNav ui-grid-resize-columns>
</div>
Controller shared between 2 views:
$scope.section1 = {
enableCellEditOnFocus: true,
enableCellEdit:true,
enableSorting: false,
columnDefs:[{
field:'Data'
},
{
field: 'Location'
},
{
field: 'Level',
editType: 'dropdown',
enableCellEdit:true,
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownOptionsArray: $scope.levels,
editDropdownIdLabel: 'option',
editDropdownValueLabel: 'option'
}],
onRegisterApi: function(gridApi) {
grid = gridApi.grid;
}
};
How to populate section2 table values with values from section1?
Take a look at the angular.copy function.
angular.copy(source, [destination]);
Then you could set grid2 as a source and grid1 as a destination.
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
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=[];
I need to sort and hide the respective column on click of the respective ui-icons.
ui-icon-close -> On click of this, respective column should be made hidden.
ui-icon-arrowthick-2-n-s -> On click of this icon, table should be sorted with respect to the values of that column.
Here is the plunker link
HTML:
<div id="grid1" ui-grid="gridOptions1" class="grid"></div>
JS:
$scope.gridOptions1 = {
enableSorting: true,
columnDefs: [
{ field: 'name', headerCellTemplate: '<div style="float:left">Name</div><div class="ui-icon ui-icon-close" style="float:left"></div><div style="float:left" class="ui-icon ui-icon-arrowthick-2-n-s"></div>' },
{ field: 'gender', headerCellTemplate: '<div style="float:left">Name</div><div class="ui-icon ui-icon-close" style="float:left"></div><div style="float:left" class="ui-icon ui-icon-arrowthick-2-n-s"></div>' },
{ field: 'company', headerCellTemplate: '<div style="float:left">Name</div><div class="ui-icon ui-icon-close" style="float:left"></div><div style="float:left" class="ui-icon ui-icon-arrowthick-2-n-s"></div>'}
],
onRegisterApi: function( gridApi ) {
$scope.grid1Api = gridApi;
}
};
you can simply use the properties of 'col' and hide the column, the important thing is to refresh grid after every action,
col.hideColumn();
similarly you can sort using the gridApi functionality,
$scope.grid1Api.grid.sortColumn(col,$scope.uiGridConstants.ASC, false );
here is the plunk
but you should know that there is already column menu service that can do these for you
here is the link
http://ui-grid.info/docs/#/tutorial/121_grid_menu