Flex - How to get Tree itemClick event to mimic itemOpen event? - apache-flex

I am using a Tree control with an XMLListContainer dataProvider.... I use an itemOpen event with the following code to update another data provider when a tree folder is opened (using small triangle) - the data provider contains all the <slide /> elements in that particular tree folder...
private function itemOpenEvent(event:TreeEvent):void {
slideDP = new XMLListCollection(event.item.elements("slide"));
slideDP.refresh();
}
If a second folder is opened thumbDP updates fine but when the first folder (or another closed folder) is clicked I want the same behaviour to happen (currently you have to close and reopen the first folder)
So I use a itemClick event - but this fires a ListEvent and I can't work out how to get the child elements from the XMLListContainer as easy... The code below throws an out of bounds exception
private function itemClickEvent(event:ListEvent):void {
treeFeed.getItemAt(event.rowIndex);
}
Can anyone help? Thanks :)

I would change your event listener to listen for a change Event, and use the selectedItem property of the Tree:
private function changeHandler(event:ListEvent):void
{
slideDP = new XMLListCollection(tree.selectedItem.elements("slide"));
slideDP.refresh();
}
You may need to cast selectedItem as XML or XMLList.

Related

Double Click Radzen Blazor Tree Items

I am using Radzen Blazor Tree component in a Blazor project. By default the component comes with an event listener for single click on RadzenTreeItem. I am hoping to add functionality such that a single click on a RadzenTreeItem and a double click on a RadzenTreeItem produces different changes to the app. I am thinking of accomplishing this by using a JSInterop for the dblclick event listener, but I know this would require having individual html ids for each RadzenTreeItem and I am not sure how to go about creating unique ids for a RadzenTreeItem since the tree has a dynamic size. My question is how to create unique ids for a RadzenTreeItem if each item is being created in a RenderFragment or is there a better way to allow double click functionality?
Below is an example of the C# RenderFragment that is used to display the RadzenTreeItem:
public static RenderFragment<RadzenTreeItem> TreeDesign = (RadzenTreeItem context) => builder =>
{
builder.OpenComponent<RadzenIcon>(0);
builder.AddAttribute(1, "Icon", "crop_16_9");
builder.CloseComponent();
builder.AddContent(4, context.Text);
};
Below is an example of the html code that is calling the RenderFragment and creating the tree:
<RadzenTree Data="#entries" Change="#OnChange">
<RadzenTreeLevel Template="#TreeDesign" Text="#GetTextForNode" />
</RadzenTree>
5 months old - but I'll give you a shot on how I handle double click years ago in Silverlight.... I created an Observable that would give me an event when there were two clicks within 250MS of each other... this is called a Hot Observable in which the events simply flow by, and when a criteria matches the events, it can raise another event... I can try and dig up the code, as researching for a a double-click event and protection for blazor events.
To add perhaps a bit more clarity - this would listen to the click event you refer to, and if there were two clicks, it would invoke method A, other wise would invoke B for a single click...
A triple click would then become 1 double click, and one single click - but that would depend on the time between the first and thrid event using the Observable...
Maybe it will help someone in the future:
builder =>
{
builder.OpenComponent<RadzenIcon>(0);
builder.AddAttribute(1, "Icon", "crop_16_9");
builder.CloseComponent();
builder.OpenElement(2, "div");
builder.AddAttribute<MouseEventArgs>(3, "ondblclick", RuntimeHelpers.TypeCheck<EventCallback<MouseEventArgs>>(EventCallback.Factory.Create<MouseEventArgs>(this,
(args) => OnDoubleClick(args, context)
)));
builder.AddContent(10, context.Text);
builder.CloseElement();
};
};
private void OnDoubleClick(MouseEventArgs args, RadzenTreeItem item)
{
//
}

dynamically initializing a child component at run time

In a current Flex project, i have an issue where a certain child component must be initialized and ready when the user clicks a button. the button is a mouseClick Event.
//mouseClick Event
protected function tableSearch_searchClickHandler(event:MouseEvent):void
{
parentXml = event.xmlNode;
if(classifierInfo)
classifierInfo.variables = parentXml;
else //initialize it dynamically..but how?
{};
}
in the function the component (classifierInfo) is checked to see if it is initialized and ready== that is, it is not null. then the variables property is populated with the parentXml value else, if it is not ready, [i want to initialize it dynamically] but do not know how.
does any one know how i could fill up the else statement such that the classifierInfo component is initialized dynamically? Is this even possible?
you have to try to initialize the object and add it to the correct parent UI Object if it is a visual component.
classifierInfo = new WhateverClass();
classifierInfo.somePropertySet
...
yourUIComponent.addElement(classifierInfo);
Is it that what you are trying to do?

Help with containers

I am using view stack...so when view change like when we move from one page to another hide event is dispatched.So i am saving the information of last page in hide event before i go to next page.but thing is that if i change nothing still change on view hide event is invoked nd call go to backend...i just want do call only if sumthing change in the view..like sum text value...So i have two options
use event listener on each component if sumthing change its make the flag true...nd hide event check, if flag is true send call to backend.
event listener at container level ..if sumthing change in child componenet through bubbling container knows if sum event is dispatched.nd makes the flag true.
I have doubt with container...
Can i use container, and how?
Reason why I can't use container?
What are the pros and cons either way?
I would recommend using a dataProvider with the ability to compare them. For instance, if you are changing things with textinputs, you could basically do something like this:
[Bindable]
private var myDataProvider:Object = new Object();
private function creationCompleteHandler():void {
myDataProvider.updated = false;
myDataProvider.defaultValue = 'default';
myDataProvider.defaultValueTwo = 'default';
}
etc.
Then, in your mxml, you can have something like this:
<mx:TextInput id="myText" text="{myDataProvider.defaultValue}" change="myDataProvider.defaultValue=myText.text; myDataProvider.updated=true;" />
Lastly, in your hide event, you can do the following:
private function hideEventHandler( event:Event ):void {
if( myDataProvider.updated ){
// Call your RemoteServices (or w/e) to update the information
}
}
This way, when anything changes, you can update your dataProvider and have access to the new information each time.
Hope this helps!
I've used an approach similar to your first option in a couple of my past projects. In the change event for each of my form's controls I make a call to a small function that just sets a changesMade flag to true in my model. When the user tries to navigate away from my form, I check the changesMade flag to see if I need to save the info.
Data models are your friend!
If you get in the habit of creating strongly typed data models out of your loaded data, questions like this become very basic.
I always have a key binding set to generate a code snipit similar to this...
private var _foo:String;
public function get foo():String
{
return _foo;
}
public function set foo(value:String):void
{
if(_foo == value)
return;
var oldVal:String = _foo;
_foo = value;
this.invalidateProperty("foo", oldVal, value);
}
If your data used getters/setters like this, it would be very easy to validate a change on the model level, cutting the view out of the process entirely.

How to expand .NET TreeView node by clicking its text instead of +/-

I've been using hardcoded hyperlinks for my web app navigation, but the app has grown since and managing it is becoming a real pain. I've decided to replace what I have with the TreeView control, however I want to make several changes to the way it looks.
Is there any property that needs to be set, that would allow user to expand the TreeView node by clicking its text instead of +/- ?
I've already set ShowExpandColapse to 'false'.
I want my final result to end up as something similar to the TreeView on the left of the MSDN site.
Could anyone point me at the right direction please?
Set TreeNode.SelectAction to either Expand, or SelectExpand.
you can use xml data source or direct binding from db to treview
in the TreeView DataBound event we can write d recursive function as below to fetch each node and assign expand action to them.
protected void TreeView1_DataBound(object sender, EventArgs e)
{
foreach (TreeNode node in TreeView1.Nodes)
{
node.SelectAction = TreeNodeSelectAction.Expand;
PrintNodesRecursive(node);
}
}
public void PrintNodesRecursive(TreeNode oParentNode)
{
// Start recursion on all subnodes.
foreach(TreeNode oSubNode in oParentNode.ChildNodes)
{
oSubNode.SelectAction = TreeNodeSelectAction.Expand;
PrintNodesRecursive(oSubNode);
}
}
I think you just have to do this in code: handle the Click event, determine the currently-selected tree node, and toggle its Expanded property (I think that's what it's called here).
You can do this only this way! http://geekswithblogs.net/rajiv/archive/2006/03/16/72575.aspx
With respect,
Alexander

Flex 3 Error #2025 when using removeChild

I'm getting a Flex ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
This is what I've got:
a) I set the variable lastButtonClicked to the last button that was clicked in the main app.
private var lastButtonClicked:DisplayObject;
private function lastButtonClickedFunction(event:MouseEvent):void {
lastButtonClicked = event.currentTarget as DisplayObject;
}
b) I have a TitleWindow open and there is a yes/no option. I have a custom event return the answer to the main app.
c) In the main app, I'm trying to remove lastButtonClicked based on the data sent by the custom event. So, my problem is in this function. For some reason it won't let me remove the button. I get Error 2025 instead.
private function answerHandler( event:AnswerEvent ):void {
if(event.answerCorrect == true){
removeChild(lastButtonClicked);
}
}
Any suggestions on how to debug this problem? The custom event is firing okay. How do I fix this line: removeChild(lastButtonClicked); ?
Edit: I tried hbox1.removeChild(lastButtonClicked) and it worked. The proper button was removed from the main app. The problem is that not all of the buttons are in hBox1. I've got other HBoxes. So, I need to figure out a more generic way instead of using hBox1 in the statement. I tired this.removeChild(lastButtonClicked), but it didn't work. Thank you.
Thank you.
-Laxmidi
From what I understand, it seems like you have the buttons in a TitleWindow and the event handler in the application. You probably want to call removeChild for the instance of TitleWindow (eg: titleWindow.removeChild(lastButtonClicked) ) rather than from the application.
I solved it. I made a variable and set it to the parent of lastButtonClicked.
private var myParent:Object;
myParent = lastButtonClicked.parent;
Then in my answerHandler I wrote:
myParent.removeChild(lastButtonClicked);
Thank you.
-Laxmidi

Resources