I am using Angular UI Grid and I want to know if it is possible to make multiple fields, on multiple rows 'appear' editable at the same time. From a user perspective it is impossible to tell at a glance which fields are editable. The best I have been able to get is the setting 'enableCellEditOnFocus', but this still only allows edit when a user specifically clicks on a cell.
$scope.gridOptions.columnDefs = [
{ name: 'age', enableCellEditOnFocus:true }
];
After some searching and that helpful suggestion by Austin I found a decent solution.
$scope.gridOptions = {
data: self.myData,
columnDefs: [{ field: 'firstName', cellTemplate: '<div class="ui-grid-cell-contents"><input type="text" ng-model="MODEL_COL_FIELD" /></div>' }]
};
Related
I want to have a different dropdown array for each row of my ui-grid. Therefore I need to access the current row. I had something like this in mind but I don't know how to access the current row within columnDefs. Is there an easy way to achieve this?
columnDefs: [
{ name: "id", field: "id"},
{ name: "firends", field: "friends", editableCellTemplate: 'ui-grid/dropdownEditor', editDropdownOptionsArray: findFriendsForId(row.id)
]
var findFriendsForId = function(id) {
// find friends and return them as array
}
Ok I figured it out by myself. There is a function called
editDropdownOptionsFunction.
Here is an example of it.
I need to display only a Date Collection object as a data source in my UI Grid.
Do I need to define a field under ColumnDefs in this case? Also, I need to include a column to delete that particular row, in this case Delete the current Date object.
How can I accomplish this? Below is my code
editor.mySeasonBreaks = {
data: "editor.mySeasons",
columnDefs:
[{ field: "????", visible: true, displayName: "Season Break" },
{
name: 'delete',
displayName: "",
cellTemplate: "<button ng-click="editor.delete(row.entity)" />"
}]
};
In the above code, editor.mySeasons is just a date array object.
Thanks in advance
You could create an object-array with your dates and define the columns as needed. This way you got more control and its easy to adjust/expand.
Now for your row-deletion I created a Plunkr thats showcases a possible solution.
As you suggest you need to add a cellTemplate that references your delete-function
cellTemplate: "<button ng-click=\"grid.appScope.delete(row)\">DELETE ROW</button>"
To access that function, you need to add it to your gridDefinition and ther property is called appScopeProvider
Possible setup would be
appScopeProvider: {
delete : function(row) {
editor.mySeasons.forEach(function(entry, index){
if(entry.myDate === row.entity.myDate) {
editor.mySeasons.splice(index, 1);
}
});
},
}
This is not recommended scenario, but you can use something like this:
$scope.myData=['2015-22-07', '2017-10-08', '2020-17-02'];
$scope.gridOptions = {
data: 'myData',
columnDefs: [
{
displayName: 'Date Array',
cellTemplate: '<div class="ngCellText ng-class="col.colIndex()">{{row.entity}}</div>'
}
]
};
You can test it here.
There are issues with sorting and probably something else.
It's better IMO to translate your array of dates to array of objects:
var res = [];
myData.forEach(function(el){
res.push({date: el});
});
Then specify column as usual:
{ field: 'date', visible: true, displayName: 'Season Break' }
Given a ui grid with two columns:
columnDefs: [
{
name: 'select', displayName: '', cellTemplate: '<input type="checkbox">'
},
{
field: 'name', displayName: 'Item Name'
}]
In the delete method, I remove from the grid's data collection any items checked by the user. But the check boxes remain checked for some reason. So this:
[X] Item 1
[ ] Item 2
Turns into this after Item 1 is deleted from the grid:
[X] Item 2
How do I get that check box cleared?
Although I have not yet faced any such issues in my Ui-grid implementation. I once faced a issue wherein When I selected all the rows and deleted them, After deletion the selectAll checkbox was still checked.
Based on my research efforts at that time. I guess the following work around should work for you. You can use:
$scope.gridApi.selection.clearSelectedRows() immediately after your deletion. This should un-check any rows if selected.
But for above to work you should already be having something like:
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
}
which is a way to get hold of ui-grid $scope.
For more on this you can look up here https://github.com/angular-ui/ui-grid/issues/426
I am new to angular and ng-grid. I am using ng-grid as grid control in my project. I am trying to edit a cell whose value is formatted with a angular filter. For example:
{field:'rate | currency: "GBP "', displayName:'Rate'}
Here currency filter is applied to Rate column. When I click on the "Rate" column to edit, I get a blank textbox as in editable cell template. I was expecting to see the textbox bound to underlying data, but its not happening. Any idea?
Also, on blur or lost focus on cell, it should get out from editable template, even that is not happening. Anything I am missing?
Here is the plukr to see the problem: http://plnkr.co/edit/W5aViYikZzEGnDPgSI5z
Just use the cellFilter option. Plunker
columnDefs: [
{
field: 'name',
displayName: 'Name',
cellTemplate: 'input-tpls.html'},
{
field:'rate ',
displayName:'Rate',
cellFilter: 'currency'
}
],
app.filter('currency', function () {
return function (input) {
//Do your formatting here.
return "GBP " + input;
};
});
I have coded the following:
$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 }
]
};
The myData actually contains four colums Id, Name, Status and Description. Where status is a simple javascript array with three types of status called myStatus.
Is it possible for me to somehow link in the data from myStatus to a field in the ng-grid so I can then select a new value from a select drop down?
Here is output of some experiment.
http://plnkr.co/edit/W1TkRgsp0klhqquxaiyc?p=preview
It seems that you can put select in cell template.
And you can make use of row object to retrieve whatever
you need.
I used row.rowIndex to property access to the original data.
template example:
<div>
<select ng-model="myData[ row.rowIndex ].myStatus">
<option ng-repeat="st in statuses">{{st}}</option>
</select>
</div>
(It would be beutiful if we can write to ogirinal data through row
object. I do not know how.)
The way tosh shimayama are doing it, will not allow for sorting the table in any other order than the model array.
This is kind of an ugly way to do it, but I took a quick look in the source code for ng-grid and found that they use regexp to insert the ng-model. So by using the same variable, COL_FIELD, in your code you can make ng-grid insert the correct model.
<div>
<select ng-model="COL_FIELD">
<option ng-repeat="status in statuses">{{status}}</option>
</select>
</div>
Here is a plunker with a working example:
http://plnkr.co/edit/Yj2qmI?p=preview
A more complete/tidier way to do this in ng-grid 2.x I've included in a plunker here: http://plnkr.co/edit/VABAEu?p=preview, leveraging content from another similar question on stackoverflow here: AngularJS and ng-grid - auto save data to the server after a cell was changed
In summary, my format for the editable field template looks like so:
$scope.statuses = {1: 'active', 2: 'inactive'};
$scope.cellSelectEditableTemplate = '<select ng-class="\'colt\' + col.index"
ng-input="COL_FIELD" ng-model="COL_FIELD"
ng-options="id as name for (id, name) in statuses"
ng-blur="updateEntity(row)" />';
I've provided a blog post that has a more thorough walkthrough of the end-to-end code: http://technpol.wordpress.com/2013/12/06/editable-nggrid-with-both-dropdowns-and-selects/
Ng-grid (ui-grid) 3.0 is close to being released, and offers different ways to do editable grids. I have a post on that here: http://technpol.wordpress.com/2014/08/23/upgrading-to-ng-grid-3-0-ui-grid/
I can't take credit for the entire solution. I just put the pieces together. My goal was to preserve three-way binding.
Template should look something like this:
$scope.cellSelectEditableTemplate = '<select ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" ng-options="value.id as value.label for value in OptionsList}" />';
COL_FIELD of course essential to keep the reference to correct cell.
You can capture the change natively:
$scope.$on('ngGridEventEndCellEdit', function (evt) {
console.log(evt.targetScope.row.entity);
WaitListArray.$save(evt.targetScope.row.entity)
.then(function (ref) {
console.log('saved');
});
});
In this case WaitListArray is my Firebase/AngularFire Array for the table. Using this method, I was able to preserve my tree-way binding.
Field (ng-options):
{
field: 'status',
displayName: 'Status',
enableCellEditOnFocus: true,
editableCellTemplate: $scope.cellSelectEditableTemplate,
cellFilter: 'mapStatus:OptionsList'
}
I added filter to replace id with label for my dropdown values.
.filter('mapStatus', function() {
return function(input, OptionsList) {
var _out = 'unknown';
angular.forEach(OptionsList, function(value, key) {
if (value && value.id == input) {
_out = value.label;
}
});
return _out;
};
})
In the above, OptionsList is my dropdown values array
example: {id:1,label:"label1"}
I found this solution highly reusable. Hopefully, it saves time for someone.