I am using jsTree with "data" option where in I fetch the JSON data myself (instead of using jsTree's AJAX option) and then render the tree.
How do I show the expand/collapse icon programmatically? i.e. if I know the number of child nodes for a particular node, can I show the expand icon and then have an event attached to it so that I can lazy load the child nodes?
I tried setting li_attr["class"]="jstree-closed" but it ends up adding this class to the already present "jstree-leaf" class on the 'li' node and so the expand icon does not show up.
You have to set the "children" attribute to true on the node where you wish to show the expand icon.
Example:
{
text: "My node",
children: true
}
Source: Populating the tree using JSON
Related
I'd like it if the Layer Control dialog only showed overlays that had elements in the viewport. I setup an example here that illustrates what I mean:
https://jsfiddle.net/7e84rh06/2/
So in that example the "Cities" overlay has no elements but if you click on "Parks" one element for that overlay does appear. So that overlay has elements in the viewport whereas the "Cities" overlay doesn't. Consequently I'd like it if the dialog only showed "Parks". eg. this:
...instead of this:
I'd like this to be dynamic too. eg. if more elements from other overlays enter into the viewport when zooming out then I'd like additional checkboxes to appear in that dialog and if no elements remain in the viewport from an overlay then I'd like that the checkbox corresponding to that overlay to disappear.
Is this even possible?
(SO requires jsfiddle.net links be accompanied by code so... token code)
Building off of Grzgorz T's comments... all the markers can be grouped together in a FeatureGroup and then you can call getBounds() on that. Let's save the resultant LatLngBounds to markerBounds.
Then, you create a function that removes the overlay from the layerControl (layerControl.removeLayer(cities)), calls map.getBounds() and then checks to see if the LatLngBounds returned by getBounds overlaps with bounds from the FeatureGroup. ie. map.getBounds().overlaps(markerBounds). If they do overlap then you readd the overlay. eg. layerControl.addOverlay(cities, 'Cities').
You then run this new function once and you create an event handler to run it every time the moveend event happens. eg. map.on('moveend', function() { callFunc(); });
When I place JavaFX object inside a container, for example some checkboxes inside an hbox:
The scenebuilder controls for each checkbox show the container object in the menu (and different settings are shown here depending on the actual container):
But changing the "margin" value here, for example, clearly affects the individual checkbox and not the HBox. For example, setting only the middle checkbox to have a left margin of 20 yields a change to only the middle checkbox:
So why is that menu area labeled with the container name? I fear I am missing some fundamental design aspect by not understanding this.
They are properties of the control that are specifically available when its parent is an HBox. They correspond to the static methods HBox.setXXX(node, value), e.g. HBox.setHgrow(...).
If you put the check box in an AnchorPane instead, for example, you would see "Anchor Pane Constraints" instead of "HBox Constraints" and you would have options including "TopAnchor", "LeftAnchor" etc., corresponding to the static AnchorPane.setXXX(node, value) methods.
Im using Ag-grid to control my table, but i want in my group that stores a list of rows instead of having to make the row group expand in 2 clicks, i want to be on 1 click.
If i click on the icon arrow it works, but if i click on the title row it only opens on 2 clicks.
I already tried to find in the documentation any information about it, but cant find nothing.
Here is a example from the documentation.
https://ag-grid.com/javascript-grid-tree/index.php
example image:
We are now recommended not to use the onGroupExpandedOrCollapsed, so this should now be...
This will also update the icons and animate the rows, which onGroupExpandedOrCollapsed won't.
onRowClicked(params) {
params.node.setExpanded(!params.node.expanded);
}
This will toggle the expansion, use params.node.setExpanded(true) if you want the rows to just stay open.
You can listen to events on either a row or cell clicked, and expand nodes accordingly.
For example to expand a row based on a click you could do the following:
onRowClicked: (params) => {
// update the node to be expanded
params.node.expanded = true;
// tell the grid to redraw based on state of nodes expanded state
gridOptions.api.onGroupExpandedOrCollapsed(params.rowIndex)
}
This should be in the documentation - I'll update it to reflect this information.
In the column definition, you can use the onCellClicked(params) function to tell it to do something when the cell is clicked. I tried looking for an expand function, but I could only find expandAll() which I don't think you will want. So what I would do is just use jquery or simple DOM selection to click on the expand icon inside of that cell.
this one works
onRowClicked(params) {
params.context.setExpand.onExpandClicked(params.rowIndex, params.node.rowHeight);
}
i am trying to create a footer component in CQ5, where i have 4 columns & all are autherable.
But we have to make no of columns autherable too i.e based on a value selected form a dropdown we have to open those many tabs for authoring those many columns only.
i have created a dropdown and have a maximum range of 6 columns. i know that i have to configure a listener for this purpose but don't know how . Requirement is like if i select 3 from the drop down then 3 tabs should come to author 3 columns
pls help me , i am middle of something very important.i need the solution very early too as i have to finish the job as soon as possible
I might be late for this by now but in case you still need it:
You need to add a listener node before closing your drop-down element:
<listeners
jcr:primaryType="nt:unstructured"
loadcontent="function(box){ //here you also need to handle the hide/unhide when the panel loads for the first time. Use this.getValue() to retrive the intial value }"
selectionchanged="function(box, value) {
for(var c=1;c<=value;c++){
this.findParentByType('tabpanel').unhideTabStripItem("tab"+c); // You need to handle the opposite with hideTabStripItem("tab"+c);
}
}"/>
Then on both "loadcontent" and "selectionchange" (these are events on your drop-down) grab the current selected value and use it to hide/unhide the tabs. In this case the tabs would be named "tab1", "tab2", etc, make sure you get the names right.
The ExtJS in the events is finding the "tabpanel" container for the whole dialog, and then hiding/unhiding based on name. You could also set to enable/disable using the methods ".enable()" and ".setDisabled(true)". Just make sure you get the reference to the tab first if you want to do this (something like ".getComponent(tabName).enable()").
I didn't test this specific code, I couldn't find my actual example from my code base but this should take you in the right direction.
I'm using a CellTree with the KeyboardSelectionPolicy.BOUND_TO_SELECTION.
I'd like to open the tree with a given path selected.
The code opening the child path and selecting the node is working fine when KeyboardSelectionPolicy is ENABLED/DISABLED but when BOUND_TO_SELECTION I can see that the keyboard-selected-node in the tree is never updated from : cellTree.selectionModel.setSelected( ... )
So I'm wondering if setSelected can work with BOUND_TO_SELECTION and how to do it.
See http://code.google.com/p/google-web-toolkit/issues/detail?id=6310
I suppose you could find a way to call setKeyboardSelectedRow in response to SelectionChangeEvents.