I have a Kendo UI treeview which contains some node that i load children on expand by firing a ajax call and returning a data array. This works fine and i get the data and it binds to the tree.
However the issue occurs after the first expand of a node, when i expand the node first time the tree behaves correctly and everything is fine, however if i collapse and expand the node again the tree does not push the other nodes down and the expanded node overlaps all other icons in tree.
Expanded on first run
Second Expand
This happens for all the nodes that i expand on the 2nd run.
Here is the code that i use to build the tree
$('#all-library-tree').kendoTreeView({
loadOnDemand: true,
dataSource: _masterTreeViewMasterObj.sort().reverse(), // top level nodes
dataTextField: "text",
expand: function (e) {
var treeView = $('#all-library-tree').data('kendoTreeView');
var dataItem = treeView.dataItem(e.node);
dataItem.load();
if (dataItem.children.data().length !== 0) return;
if (dataItem.id === -1) {
//get unused data children for node
GetUnUsedChildrenForRHSTree(dataItem.text, dataItem.children);
}
}
});
So i was able to fix this issue by adding dataItem.loaded("false"); just before dataItem.load(); hope this helps someone in the future.
Related
I want to use .lookup() so that I can create an event for when the content of a TextArea is clicked, but I get null when I use textArea.lookup(".content"). After searching why this is, I found out that it returns null if called before stage.show(). My next reaction was to somehow check for an event that is cast once the stage is shown, but that event is only accessible if you have access to the stage itself, which I do not in this case. What else can I do?
Don't register the handler at the content node. Let TextArea deal with the creation of the content node on its own, register a event handler at the TextArea directly and use the pickResult of the event to determine, if the click happened inside the node with style class content.
textArea.setOnMouseClicked(evt -> {
Node n = evt.getPickResult().getIntersectedNode();
while (n != textArea) {
if (n.getStyleClass().contains("content")) {
// do something with content node
System.out.println("content: " + n);
break;
}
n = n.getParent();
}
});
Generate a layout pass on the node:
node.applyCss();
node.layout();
as defined in the answer to:
Get the height of a node in JavaFX (generate a layout pass)
After that, your lookup functions on the node should work as expected.
I have a grid I created in Gridx which lists a bunch of users. Upon clicking a ROW in the grid (any part of that row), a dialog pops up and shows additional information about that user and actions that can be done for that user (disable user, ignore user, etc.) - when one of these options is selected from the pop up, I want to DISABLE that row. The logic for getting the row, etc. I can take care of, but I can't figure out how to make a grid row actually "appear" disabled and how to make that row no longer clickable.
Is there a simple way to do this? If you aren't familiar with gridx, solutions that apply to EnhancedGrids or other Dojo grids are also appreciated.
Alright now that I have a little more information here is a solution:
Keep a list of all the rows you have disabled so far either inside the Grid widget or in its parent code. Then on the onRowClick listener I would write code like this:
on(grid, "onRowClick", function(e) {
if(disabledRows[rowIndex]) {
return;
}
// Do whatever pop up stuff you want and after
// a user selects the value, you can "disable"
// your row afterwards by adding it to the disabled
// list so that it can no longer be clicked on.
var rowIndex = e.rowIndex;
disabledRows[rowIndex] = true;
// This is just some random class I made up but
// you can use css to stylize the row however you want
var rowNode = e.rowNode;
domClass.add(rowNode, "disabled");
});
Note that domClass is what I named "dojo/dom-class". Hope this helps!
This is perhaps not exactly what you are seaching for:
If you want to hide one or more rows by your own filterfunction you could just add to these rows in the DOM your own class for nodisplay. Here I show you a function for display only those rows which have in a choiceable field/column a value inside your filterlist.
function hideRowFilter(gridId, fieldName, filterList)
{
var store = gridId.store;
var rowId;
store.query(function(object){
rowId = gridId.row(object.id,true).node();
if (filterList.indexOf(object[fieldName]) == -1)
domClass.add(rowId, "noDisplay"); // anzeigen
else
domClass.remove(rowId, "noDisplay"); // verstecken
});
}
CSS:
.noDisplay { display: none; }
So I can for example display only the entries with a myState of 3 or 4 with this call:
hideRowFilter(gridId, 'myState', [3, 4]);
Note that domClass is what I named "dojo/dom-class"
I am building an RIA application using Flex 4.6 that contains a main borderContainer (page) that can contain some other borderContainers (graphic or text elements).
I added an event listener on the page to listen to click events:
page.addEventListener(MouseEvent.CLICK, clickHandler, true);
clickHandler looks like this:
private function clickHandler(event:MouseEvent):void
{
// Remove event listeners
page.removeEventListener(MouseEvent.CLICK, clickHandler, true);
// Get click position
objX = event.localX;
objY = event.localY;
}
My problem is that although the event's currentTarget is always the page (normal), the target can either be the page or one of its children, and then localX doesn't give me the position on the page but on the child.
Is there a way to make sure the page is always the target of the event? Something like stopping the capturing phase on the page so it doesn't go deeper?
Thanks in advance for your help
Darrel
I think you may be asking the wrong question. As I understand it, you want the x/y position relative to 'page'. You can use the DisplayObject#globalToLocal() function to find this.
Just take the the global coordinates and convert them to local coordinates relative to 'page':
var coordinates:Point = new Point(event.stageX, event.stageY);
coordinates = page.globalToLocal(coordinates);
objX = coordinates.x;
objY = coordinates.y;
When the user has finished drawing polygons, the polygon label will be update with the calculated area.
polygonLayer.styleMap.styles.default.defaultStyle.label = "xxx";
polygonLayer.redraw();
which will achieve this, no problem.
I call this two lines everytime the area of the polygon is updated. However, if I edit the polygon with edit control, the updated area will be displayed on all the nodes.
And if the user has finished editing and switch to other nodes, everything went back to normal. I have tried setting the labels to empty strings when the user clicks on the editing control but that only hides the main label (the one in the center), but the labels on the nodes are still there.
$('.olControlModifyFeatureItemInactive').click(function() {
polygonLayer.styleMap.styles.default.defaultStyle.label = "";
polygonLayer.redraw();
});
What is happening there and how do I prevent duplicated area values from showing up?
Take a look at THIS
You should be able to setup context on our style map and only return the label if it's NOT in edit mode:
var styleMap = new OpenLayers.StyleMap(new OpenLayers.Style({
label: "${getLabel}"
// your other symbolizer properties here
}, {context: {
getLabel: function(feature) {
if(!mycontrolIsNotInEditMode) {
return feature.attributes.label;
}
}
}}
));
hope you help me with I think a simple TreeView Expand problem.
I have a TreeView control in my MasterPage and my default depth is 2 and I see that when I click on the deeper node it keeps expanded.. But when I redirected into another page, the node collapsed.
I have a problem with my code which suppose to keep the node expanded.
TreeNode thisNode = tvCategories.FindNode(Session["SelectedCIDValPath"].ToString());
if (thisNode != null)
{
thisNode.Selected = true;
thisNode.Expand();
thisNode.Select();
thisNode.Expanded = true;
lbl.Text = "valupath: " + Session["SelectedCIDValPath"].ToString();
}
as you can see, I tried all the possible properties and methods to keep the deeper node expanded.. but it doesn't work.
Please help me? Thank you so much
It happens to be the case (and I find it just a bit frustrating) that expanding a node does not also cause parent nodes to expand. In order to ensure a node expands, it is necessary to also ensure that the parent nodes expand. I keep an extension method handy for this purpose:
public static void EnsureExpanded(this TreeNode node)
{
if (node != null)
{
EnsureExpanded(node.Parent);
node.Expand();
}
}
You can employ the extension like so:
TreeNode thisNode = tvCategories.FindNode(Session["SelectedCIDValPath"].ToString());
thisNode.EnsureExpanded();