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.
Related
I am quite new to Angular. I want to apply a custom class in ng-class in ng-grid's custom cell template. I am familiar with the overall usage of "ng-class". The default template is as follows:
<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text> {{row.getProperty(col.field)}}</span></div>
Now, I want to add a new class which is based on the row's data. Say:
ng-class="myClass:row.entity.Flag == 'something'"
Question:
There is already a col.colIndex() in ng-class which is required by ng-grid. Now how to add my class with it?
I know it seems easy but it is not working.
I have tried following things:
https://github.com/angular-ui/ng-grid/wiki/Templating
https://docs.angularjs.org/api/ng/directive/ngClass
Tried ng-class="[col.colIndex(),{myClass:row.entity.Flag == something}]". Didn't work.
//scotch.io/tutorials/the-many-ways-to-use-ngclass
I just want a working 'ng-grid' template (which is defined above).
Try using
row.entity.subGridOptions.Flag
I got the answer after further research.
I wanted to add a class through which I can strike-through the data on the ng-grid row. I was applying it to the rowTemplate, but rowTemplate in itself do not have any textual data.
I have to apply it inside cellTemplate, which is actually going to contain the text.
#Jesse, thanx for your answer.
ng-class="{\'red\': row.entity.Expiration == \'No\'}"
I've been playing a little with ng-grid, and tried to understand how to use the editCellTemplate option.
I tried to make a cell editable in the form of a select component, and it works pretty awesomely, but after I finish editing and focus out of the cell, it remains in the state of selection, instead of returning to its default state.
Here's a Plunker of what I tried to do (click on height cells to edit).
Does anyone have an idea how I can make the editable cell go back to its default mode?
a great solution
ng-grid: Editable cell templates remain in edit mode on loss of focus v2.0.7
[2]:https://groups.google.com/forum/#!topic/angular/5MZITMG_HLo
<select ng-class="'colt' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" data-placeholder="-- Select One --">
<option>nl</option>
<option>fr</option>
<option>en</option>
</select>
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
I have an array of objects that I want to show in ng-grid. Each row has a boolean property isVisible. In the ng-grid I want to show only the rows where isVisible is true. The other rows should be completely hidden.
I have tried using a rowTemplate and databinding a ng-show to isVisible. That hides the content of the row, but leaves the actual row in place, showing an empty row.
I have tried using filterOptions, but can't figure out the correct syntax to do such a filtering. I couldn't find any good documentation on how to set it.
I have even tried modifying the gridTemplate in the ng-grid source, by trying to add a filter on ng-repeat=\"row in renderedRows\", but I haven't gotten that to work either.
I guess I could modify the array itself, by temporarily removing rows, but I would prefer not to do it that way, since I have to be able to show the rows again (It is actually an expander that I'm doing, that should hide/show sub-rows)
Try also conditionally setting the height of the row in the template to '0' based on isVisible or use a CSS class with ng-class. Play with the CSS of it until you get the desired effect and then you can use that in your template.
This sounds like the type of thing that would benefit from using height and CSS animations actually so it opens and closes with an animated style. If you have a jsFiddle sample I'd be happy to try and help.
Edit: After looking at how the grid actually lays out it's rows (absolutely positioned) you only really have two options I can think of:
1) Filter the data you are binding to the grid through a function like dataVisible() but keep the full data list internally in the controller so you can show/hide easily
2) Submit a patch to the ng-grid project (or fork it) with the filtering capability you are looking for. Out of the box it doesn't appear to support this scenario.
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>'}