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.
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
Searched the internet a long time but didn't find a way to do the following:
Show only selected nodes and make the checkbox disabled.
Looked to use a filter (ivh-treeview-filter) to show only nodes which are selected, but providing a filter function does not work (ivh-treeview mentions it uses Angular filterFilter. Any examples around to use a filter function?
There is a ivh-treeview-visible-attribute in ivh-treeview.js, however i think there is no active code for this, anywhere an example where this works?
How can i make the checkboxes disabled?
Thanks in advance
I'm not 100% clear on what you're asking, ivh-treeview provides a jsbin template in its README for demos, perhaps you could show us what you've attempted so far? I'll take a stab though.
You can definitely use ivh-treeview-filter to show only selected nodes. Define a function like so in your controller:
this.mySweetFilter = function(node) {
return node.selected;
};
And pass it to your directive:
<div ivh-treeview="vm.treeData"
ivh-treeview-filter="vm.mySweetFilter">
</div>
Here's a fully working demo that lets you toggle whether all nodes are visible or just the selected ones: http://jsbin.com/nirovahupa/1/edit?html,js,output.
As for disabling checkboxes dynamically - there's nothing baked in to the directive to allow you to do this. You can however (and are encouraged to) use your own custom node templates and it would be a simple matter of hiding the treeview checkboxes and showing your own disabled ones as needed.
Hope that helps!
I'm trying to make a dropdown menu. I'm usinig the Dropdown toggle directive form ui-bootstrap. I want to customize this a little. I want the drop down title to change to the option which I have chosen.
I've made my own directive for this. In this directive i add two data objects, the options and the selected option. I also have one function which changes the selected option.
Select category: <my-directive my-options="categories" my-selected-option="selectedCategory" set-my-selected-option="setCategory(selectedCategory)"></my-directive>
Js fiddle: http://jsfiddle.net/per_strom/QW634/2/
The problem is the setCategory function is not changing.
This is my first directive I'm writing so I may be totally of. Perhaps there's a much better way to do it.
Why can't I just use a normal select box? It's a GUI thing. In this case I prefer lists.
I appreciate any help I can get!
You should pass the function reference to the directive rather than a function call. Change the part of your code to
`set-my-selected-option="setCategory"`
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'm actually not sure if this is possible, but I will ask it anyway. I have a group of accordion controls, and within the content body of each I need to display a grid panel. The grid panel needs to have a click event attached to it. I have tried simply creating the grid panel and setting the html property of the accordion to it, but this produces no content.
Is there somehow I can achieve the above?
You cannot have html content (inserted by the property) along with any other content. If you add any item the html property value will not set/overriden. But for sure you can place anything you want into one accordion panel. Even a grid. But for that case, and based on the last question, I would recommend you to reference the view into the grid. You may do this simply by using a ComponentQuery
The click events can be applied by using the control function of the controller.
For your basic understanding:
In ExtJS you seldom use plain html code. In most scenarios you use any sort of component. All is nested within the items-array or dockedItem-array. Items within these arrays get also processed by the layout system.
Some Query examples applicable to the control function
In the following this refers to the controller itself.
You know the Id of the grid (normally you didn't do this). Id's are marke by a starting #
control({'#yourId': {itemclick: this.onItemclick }});
You know the xtype and that there is only one instance of this type. You can also describe a path by using spaces between the xtypes.
control({'grid': {itemclick: this.onItemclick }});
You have set a custom property to grid (you can refer any property this way). This one is fully compatible the the one above. I recommend this one in your case
control({'grid[customIdent=accordionGrid]': {itemclick: this.onItemclick }});
This are just some ways to use ComponentQueries, there are more. For a more detailed explanation you should refer the sencha API for ComponentQuery
Also note that every component implements the up() and down() methods which also support ComponentQueries.
I forgot to mention: For a control the query strictly need to return just one result (only the first one will be taken) a ComponentQuery on the other hand can return multiple results.
This is perfectly possible but the accordion's body is not the place to put that in. You'll need to add it to the items: [] array of the accodion. The body (or html) only accepts html.
Example:
http://docs.sencha.com/ext-js/4-1/#!/example/layout/accordion.html
this one has a grid within it.