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
Related
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.
We enable/disable all our cells based on an external scope like so:
cellEditableCondition: function ($scope) {return $scope.getExternalScopes().view.isEditing;},
You have to include the cellNav module on the grid element witch seems to automatically enable it, like so:
<div data-ui-grid="gridOptions" class="search-grid" data-ui-grid-selection ui-grid-edit ui-grid-cellNav external-scopes="externalScopes"></div>
We want to disable cellNav when isEditing is false and allow row selection. How do we achieve this?
Your Column definition should be like this
cellEditableCondition: function ($scope) {return $scope.view.isEditing;},
A lot of the grid functions aren't quite so dynamic as you're imagining - cellNav is generally present or not present.
However, the way you describe it, I sort of get the impression that isEditing might be for the whole page, rather than some sort of row by row thing. If that's the case, then you're really talking about turning cellNav and row select on and off for the whole grid. If so, I'd use gridOptions.enableCellNav and gridOptions.enableEditing when you first render the page.
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.
I have a Source ComboBox to populate source fields (25-30 items) shown below in first page
"A"
"B"
...
"Z"
I have selected last item from ComboBox as shown below
"Z"
and when traversing to the next page after saving, i need to make the source combo selection blank, so i have return the below code to reset the Source combobox to point to first item (to reset the display to start from top of dropdown list for user selection)
// my first value in source List is empty space - “”
sourceComboBox.setValue("");
even if you use below code snippets like
sourceComboBox.getSelectionModel().selectFirst();
sourceComboBox.getItems().clear();
sourceComboBox.getSelectionModel().clearAndSelect(0);
but when i click open the combobox dropdown it still shows dropdown display from bottom as shown below
...
"X"
"Y"
"Z"
I am unable to post images for representing combobox values, so has put in above examples.
This looks like a graphics bug to me or am I doing something wrong?
I have seen similar issue reported in below question but no work around suggested so far
Combobox clearing value issue
If you want to simply "reset" the combo box, I think all you have to do is set the value to null, like so:
sourceComboBox.setValue(null);
I ran into nearly the exact same situation and came across your question while looking for a solution. Fortunately, I came up with a workaround that forces the ComboBoxes to reset. When you reset the data on your pane, instead of doing something like:
sourceComboBox.getSelectionModel().clearSelection();
sourceComboBox.getItems.clear();
do something like this...
parentNode.getChildren().remove(sourceComboBox);
sourceComboBox= new ComboBox(); // do whatever else you need to format your ComboBox
parentNode.add(sourceComboBox);
You'll also need to do a setItems() again on your ComboBox so the new one will be populated. This is not an ideal solution but it seems to be working as I expect the provided clearSelection() method would.
Below is the code you're looking for. It will reset it to whatever index you give in within the parenthesis.
sourceComboBox.setSelectedIndex(0);
Goodluck
Most of the things were giving me an error when I tried them. What worked best for me was to use this
comboBox.getSelectionModel.clearSelection();
This will essentially set the value of your ComboBox to null. Because of this, if you are referring to the value of the ComboBox in another place, it becomes important to check for whether the value of the ComboBox is null using this
if(comboBox.getValue() != null)
//Code segment here
The ComboBox control has not a method like scrollTo(index) of the ListView. So it seems hard to workaround that behavior. You can issue a feature request at JavaFX Jira.