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
Related
I am tinkering with ag-grid in Angular 1 mode and have come across a strange problem. Using the tutorial, I have recreated the problem in this plunkr which I am having in my more complex code. You can see it by double clicking the "Athlete" column values.
Simply put, if you go in to edit mode on an editable column which has a template applied, the value will blank out. It doesn't matter what you set it as, the binding appears to be broken.
For instance:
template: "<div ng-bind='data.athlete'></div>"
Will return something like:
<div>Michael Phelps</div>
But when you double click it to edit it, it will forever after return something like:
<div ng-bind='data.athlete'></div>
I suspect data.athlete is being unbound by the save, but I'm not sure how to correct that. I'd really prefer not to have to create a value change handler for every column I plan to bind in.
The same happens if you use string interpolation.
Instead of cellTemplate use cellRenderer. It is much more useful and you can do a lot more with it. Here is your adjusted plnkr
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 am trying to set the filter in ui-grid pragmatically but doesn't seem to work with ranges.
This plunkr shows one of the filters working perfectly (the name). But the age filter populates the input box but doesn't appear to update the grid's filter.
Do I have to manually update the filter?
I have also tried setting the entire filter when the button is clicked by:
$scope.ageColumn.filters=$scope.ageFilter;
but that also doesn't work.
Any idea how to get this to work?
Looks like we need the term to be a string - when it's a number it doesn't work.
$scope.ageColumn.filters[0].term='30';
http://plnkr.co/edit/2TvIqdKYeRuYXUx1bRNo?p=preview
Not sure why that would be the case, so I need to take a look at that.
Question: Is there a bug in angular-strap? Or do I misunderstand how Angular works, and this is expected?
I've created a plunker to demonstrate the behavior.
What I want:
I want to show a different tooltip for each item in an ng-repeat.
Behavior I'm seeing:
Under certain conditions, the tooltip content is not properly inserted into the content template. Thus you only see the template, and not the content template or content itself.
Conditions:
When the page is first loaded, the tooltips work as expected.
When an item is added to the ng-repeat, its tooltip does not populate the template's content section.
If the page starts off with zero items in the ng-repeat, the tooltip in the first item added will work as expected. Items added after that will exhibit the problem.
Regardless of how many items the ng-repeat starts with, any removal of any item from it will make all items added in the future not have working tooltips.
Thoughts: If I boil it down, the "first load" works fine. After that, it doesn't. I'd guess that what happens is that there's a compilation step happening after the first round of adding items into ng-repeat. At that point, the angular-strap tooltip code sees the directive attributes, and sets up those tooltips and the content template. Subsequent changes to the ng-repeat are missed by angular-strap (even though I can see in the console that the call from bs-popover=tooltip(item) does actually run each time the ng-repeat list is updated). But I'm still stumped and wondering if this is behavior I can get around.
How do I allow dynamic tooltips in items added to an ng-repeat?
This seems to work in _popover.html
<div class="popover-content">{{content}}</div>
That is using {{ }} instead of ng-bind...works very odd.
Upon further investigation... Its probably happening somewhere around here:
https://github.com/mgcrea/angular-strap/blob/master/src/tooltip/tooltip.js#L83
Though I don't know where/how/what yet.
Update
So the bug (in Angular-Strap) is with caching your template. Initial retrieval (via http) works fine. But it caches them as an array, and upon retrieval from cache (subsequent additions) it gets an array. Which doesn't have a .data property so your template is empty, and your ng-bind is removed..
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.