Just starting out with ng-grid. I need to make individual cells (i.e. for a given row and column) editable based on the boolean value of a property in my grid array. It would be great if I could simply bind to the array property to turn on (or off) cell editing. However, I don't see this option available. Did I overlook something, does ng-grid support this out of the box? If not, any suggestions as to how I could implement this feature?
I'm not familiar with something like that out of the box.
I would create a cell template for each cell and put there two divs - one div for viewing and one div for editing, and then add ng-show to each and bind it to the boolean property that indicates whether the cell is editable or not.
Example: http://jsfiddle.net/FP7Jt/
cellTemplate: '<div class="ngCellText"><div ng-show="!row.entity.edit">{{row.getProperty(col.field)}}</div>' +
'<div ng-show="row.entity.edit" class="ngCellText"><input type="text" ng-model="row.entity.age"/></div></div>'}
Related
This question came to my mind because I am stuck in a situation where I need to have a column which is nothing but a checkbox (this check box is not for row selection).
From backend I get values true/false and I have to map this value to this checkbox.
I am using template or cellRenderer to show checkbox in the column but value never maps to the checkbox.
Here is how I am writing the template:
template:'<input type="checkbox" ng-model="isValid"></input>'
How can I map the value to checkbox in this case?
How do I get the grid cell value into modal by clicking on a cell inside Angular ui-grid?
I am using the UI-Grid plugin.
yes thanks for your response #Meir, i can't provide code because getting data into grid from back end without back end data we can't test , but finally got the solution using row.entity.columnvalue[coming from backend), by doing this i am getting value into template
$scope.gridOptions = {
columnDefs: [
{ name: 'username', cellTemplate: '<div class="ui-grid-cell-contents" ng-model="row.entity.username" ng-click="grid.appScope.showMe(row.entity.username)">{{row.entity.username}}</div>'}]
};
It depends if the cell is editable or not. If it is, listen to a beginCellEdit event, you should get the row and column in the event and you can get the actual value and open your modal.
If you prefer not to use and editable grid, use a cellTemplate with ng-click="..." that passes as a parameter the column name. Note that you might need to use appScope in your ng-click code.
If you put a more specific example, I might be able to narrow down the answer.
I want a ui-grid where you can edit directly without changing the template.
I tried to override the cellTemplate with the standard of the editable celltemplate, but it isnt getting dirty now.
<div><form name="inputForm"><input type="INPUT_TYPE" ng-class="'colt' + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD"></form></div>
So i dont want to show the cellTemplate instead i want to show the editable cellTemplate only.
It looks totally possible to me, just make sure your field attribute contains no unusual symbols (dash or dots mainly, use only letters to be on the safe side).
Look at this plunkr.
I have a grid that displays images as values in one of its column using following code.
{
field: 'TR',
displayName: 'Trigger Redundancy',
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text><img src="http://goo.gl/aFomAA"></img></span></div>'
}
Now I want few more alterations to my grid which I am unable to do,
Instead displaying one image as value for a column, I want five different images that should be shown on the basis of numeric value from 0-4.
I want to include bootstrap pagination to my grid.
After images are displayed, when I right click on it, it should provide me some functionality using which I could be able to change my image to some different image.
I want 1st column that should provide me a button, by clicking on it I should be able to display information of that row in some textbox below my grid.
I want to apply filtration on three of my columns such that I will provide user a textbox to search whatever he will type in that, that should be filtered from these three columns.
How can I achieve this? Possibly a working example?
I have a working demo Plunker of my grid
I have make chenges to show the images from 0 to 4 based on the data and even for the click function but i think to show some option you should avoid right click and you use left click and if you will make changes to the data source of gird it will automatically display the required value in the grid for showing different images.
I've copied the default cell template string into my gridOption definition but the behavior is completely different than not defining the cellTemplate. It has something to do with custom filters for the cell but I can't figure out why there is a difference.
<span ng-cell-text>{{COL_FIELD CUSTOM_FILTERS}}</span>
If I leave out the 'CUSTOM_FILTERS' then the cell displays the unfiltered value. If I add the 'CUSTOM_FILTERS', then the cell is blank and editing is not possible.
The filter is just a 'currency:"$"' filter.
If I explicitly spell out the content instead of letting ng-grid do the replacement, then it works fine.
<span ng-cell-text>{{row.getProperty(col.field) | currency:"$"}}</span>
Anyone know why this is happening? This is with ng-grid 2.08
Here is a Plunker