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
Related
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 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' }
],
...
};
Is it possible to limit the editable modus of ng-grids cells to cells in one column only?
I currently use enableCellEditOnFocus: true and this globally allows all cells to be editable. I do have a specific editableCellTemplate for one column, by I would like to have all other columns "readonly".
Any suggestions for a beginner making his first baby-steps with angularjs and ng-grid?
This is the relevant setup of the grid currently:
var app = angular.module('myCoolGridApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope, $http) {
$scope.gridOptions = {
data: 'myData',
enableCellSelection: true,
enableRowSelection: false,
enableCellEditOnFocus: true,
jqueryUITheme: true,
columnDefs: 'colDefs'
};
var myCellEditableTemplate = "<input ng-class=\"'colt' + col.index\" ng-input=\"COL_FIELD\" ng-model=\"COL_FIELD\" ng-blur=\"updateEntity(col, row)\"/>";
$scope.colDefs = [
{field: 'group'},
{field: 'user'},
{field: 'id', displayName: 'ID', editableCellTemplate: myCellEditableTemplate},
{field: 'last_login_date'},
{field: 'status'}
];
$scope.updateEntity = function (column, row) {
// code for saving data to the server next...
}
});
Yes, according to this documentation you can use the enableCellEdit column definition property to set only that column up for editing. You may have to disable this property for the rest of your columns.
I have coded the following which I copied from an example:
var cellEditableTemplate = "<input style=\"width: 90%\" step=\"any\" type=\"text\" data-ng-class=\"'colt' + col.index\" data-ng-input=\"COL_FIELD\" data-ng-blur=\"updateEntity(col, row)\"/>";
// Configure ng-grid
$scope.gridOptions = {
data: 'myData',
enableCellEdit: true,
multiSelect: false,
columnDefs: [
{ field: 'Id', displayName: 'Id' },
{ field: 'Name', displayName: 'Name', enableCellEdit: true, editableCellTemplate: cellEditableTemplate },
{ field: 'Description', displayName: 'Description', enableCellEdit: true, editableCellTemplate: cellEditableTemplate }
]
};
// Update Entity on the server side
$scope.updateEntity = function (column, row) {
console.log(row.entity);
console.log(column.field);
// code for saving data to the server...
// row.entity.$update() ... <- the simple case
}
Everything works and the correct data is logged to the console.
Now I need to understand how I can update data on my server. The creator of the example is suggesting
row.entity.$update()
Can someone help me out. Is this a function that's part of the ng-grid and if not then how could I implement the $update to change data on my server through http?
Now that you know the column, the row, and the new value, you can use $http or $resource or even jQuery.ajax to update your model.