I am using primeng tree component, and I need to edit the name of selected tree node inline. I have implemented rename of the node with another dialog box. but, I want to rename it inline.
Is it possible to rename the selected tree node?
Yes i have implemented same functionality in tree node,
you will face the actual issue in IE. IE wont allow to input any text when it is draggable so you need to make it false when click on it or so.
//On blur
public renameFolder(selectedNode: TreeNode): any {
let flag: Boolean = false;
selectedNode.type = null;
selectedNode.draggable = true;
selectedNode.droppable = true;
}
/**
* To rename selected folder when rename folder
* is selected from context menu.
* type is used to match it with ng-template.
*/
private renameFolderContextMenu(selectedNode: TreeNode) {
this.renameFolderName = selectedNode.label;
selectedNode.type = 'renameFolder';
selectedNode.draggable = false;
selectedNode.droppable = false;
}
Related
I am using two AutocompleteTextFilters as depended filters. I want the second one filter to change its options depending on the suggestion of the first filter.
I have bind an event listener on the first filter so as when it loose focus it triggers a proccess on the second filter.
The proble is that the second filter never changes its options. I even have setup hardcoded values in case somethig was wrong on my code but no luck.
The code I use is below:
public CreateSubmission(com.codename1.ui.util.Resources resourceObjectInstance, Map<String, ProjectType> projectTypes) {
this.projectTypes = projectTypes;
initGuiBuilderComponents(resourceObjectInstance);
gui_ac_projecttype.clear();
gui_ac_projecttype.setCompletion( this.projectTypes.keySet().toArray( new String[0]) );
gui_ac_projecttype.addFocusListener( new ProjectTypeFocusListener( this ));
gui_ac_steps.setCompletion( new String[]{"t10", "t20"});
}
public void makeSteps (String selection) {
ProjectType projectType = this.projectTypes.get( selection );
if (projectType != null) {
this.selectedProjectType = selection;
int length = projectType.projectSteps.length;
String[] steps = new String[ length ];
for(int i =0; i < length; i ++) {
steps[i] = projectType.projectSteps[i].projectStep;
}
// String[] s = gui_ac_steps.getCompletion();
gui_ac_steps.setCompletion( new String[]{"t1", "t2"} );
gui_ac_steps.repaint();
}
else {
}
}
public class ProjectTypeFocusListener implements FocusListener{
private CreateSubmission parent;
public ProjectTypeFocusListener( CreateSubmission parent ) {
this.parent = parent;
}
#Override
public void focusGained(Component cmp) {
//throw new UnsupportedOperationException("Not supported yet."); //To change body of generated methods, choose Tools | Templates.
}
#Override
public void focusLost(Component cmp) {
this.parent.makeSteps (
((AutoCompleteTextField)cmp).getText()
);
//throw new UnsupportedOperationException("Not supported yet."); //To change body of generated methods, choose Tools | Templates.
}
}
On the above code the initialization happens on "public CreateSubmission" method.
"gui_ac_projecttype" is the first AutocompletionTextField that triggers the whole proccess through it's FocusListener handler (class ProjectTypeFocusListener )
"gui_ac_steps" is the second AutocompleteTextField filter that must change its values. On the code above I initialize it's suggestions to "t10", "t20". Those two values are shown correctly.
Later from iside the FoculListenerHandler's method "ProjectTypeFocusListener.focusLost" I call method "makeSteps" which sets the suggestion options to "t1", "t2 and then I repaint the component. These two last values are never shown. It remains on the first values "t10", "t20".
The Strange thing is that in debugger when I ask gui_ac_steps.getCompletion(); to see the current options ( the code that is commentd out into makeSteps method) I get the correct values "t1", "t2".
But on the screen it keeps showing "t10", "t20".
any help is aprreciated.
You shouldn't do anything "important" in a focus listener. Especially not with a text field. They are somewhat unreliable because the text field switches to native editing and in effect transfers the focus there. The problem is that some events are delayed due to the back and forth with the native editing so by the time the focus event is received you've moved on to the next field.
Try something like this for this specific use case https://www.codenameone.com/blog/dynamic-autocomplete.html
It has probably been covered before, but I couldn’t google anything. What is the best approach for making an iPhone-style pop-up selection menu like attached picture? I've tried with a Dialog, but I haven't found an elegant way to add the Commands so they appear nicely and both trigger the action and close the dialog at the same time. And showing a Cancel entry separately is not supported by a ComponentGroup.
See this sample:
Form hi = new Form("Pop");
Button pop = new Button("Pop");
pop.addActionListener(e -> {
Dialog dlg = new Dialog();
// makes the dialog transparent
dlg.setDialogUIID("Container");
dlg.setLayout(BoxLayout.y());
Command optionACmd = new Command("Option A");
Command optionBCmd = new Command("Option B");
Command optionCCmd = new Command("Option C");
Command cancelCmd = new Command("Cancel");
dlg.add(
ComponentGroup.enclose(
new Button(optionACmd),
new Button(optionBCmd),
new Button(optionCCmd)
)).
add(ComponentGroup.enclose(new Button(cancelCmd)));
Command result = dlg.showStretched(BorderLayout.SOUTH, true);
ToastBar.showMessage("Command " + result.getCommandName(), FontImage.MATERIAL_INFO);
});
hi.add(pop);
hi.show();
Which results in this:
Thanks Shai!
I made it into a component in case anybody has a similar need:
class MyPopupMenu extends Dialog {
private Command cancelCmd = null;
MyPopupMenu(boolean includeCancel, Command... commands) {
this(includeCancel?new Command("Cancel"):null, commands);
}
MyPopupMenu(Command cancelOptional, Command... commands) {
super();
setDialogUIID("Container");
setLayout(BoxLayout.y());
setDisposeWhenPointerOutOfBounds(true); //close if clicking outside menu
ComponentGroup group = new ComponentGroup();
for (Command cmd : commands) {
group.add(new Button(cmd));
}
add(group);
this.cancelCmd = cancelOptional;
if (cancelCmd != null) {
add(ComponentGroup.enclose(new Button(cancelCmd)));
}
/**
* show the menu and execute the selected Command,
* or do nothing if Cancel is selected
*/
public void popup() {
Command choice = showStretched(BorderLayout.SOUTH, true);
if (choice != null && choice != cancelCmd) {
choice.actionPerformed(null);
}
}
}
This is awesome, thanks guys. Any reason my buttons seem to be so small? Trying to figure out which style needs to change to increase the height. Changing the Button padding did not seem to change anything. I used the Business theme as a starting point.
TreeView Extjs
As shown in the above image , if Node-1.2.3.1.1 is checked , how do i get the Id of Node-1.2 ?
you should navigate through the tree structure via the NodeInterface.
You have have access to parentNode and childNodes property.
So I suggest to do a recursive function to find your top node.
It should like:
function findRootParent(node) {
var parentNode = node.parentNode;
// wrong case (if you give the root node for example)
if(!parentNode) {
return null; // or self
}
// we've found it!
if(node.parentNode.isRoot())
return node;
// go recursive
return findRootParent(node.parentNode);
}
And when you've found the parent, you can check isExpanded() or not
I'm trying to open a new form after clicking a node in a treeview.
In the first MDI form I have a treeview, when I click on a node in the tree view a 2nd MDI form is opened, but the first form keeps the focus. I want the new form to have the focus.
I have noticed the first form's _Enter event is firing as if something is setting focus back to the first form.
There is also a button on the first form that does the same function and it works great. I have a feeling the treeview has some special attribute set to cause the focus to come back to the first form.
Here is the code opening the form
private void tvClientsAccounts_NodeMouseClick(object sender, TreeNodeMouseClickEventArgs e)
{
OpenClientOrAccount(e.Node);
}
private void OpenClientOrAccount(TreeNode Node)
{
if (Node.Tag is Client)
{
frmClients frmC = new frmClients();
Client Client = (Client)Node.Tag;
frmC.Id = Client.Id;
frmC.HouseholdId = Client.Household.Id;
frmC.MdiParent = Program.frmMain;
frmC.Show();
}
else if (Node.Tag is Account)
{
frmAccounts frmA = new frmAccounts();
Account Account = (Account)Node.Tag;
frmA.Id = Account.Id;
frmA.ClientId = Account.Client.Id;
frmA.MdiParent = Program.frmMain;
frmA.Show();
}
}
Here is the designer code defining the treeview
//
// tvClientsAccounts
//
this.tvClientsAccounts.BackColor = System.Drawing.SystemColors.Control;
this.tvClientsAccounts.Indent = 15;
this.tvClientsAccounts.LineColor = System.Drawing.Color.DarkGray;
this.tvClientsAccounts.Location = new System.Drawing.Point(228, 193);
this.tvClientsAccounts.Name = "tvClientsAccounts";
this.tvClientsAccounts.Nodes.AddRange(new System.Windows.Forms.TreeNode[] {
treeNode9});
this.tvClientsAccounts.PathSeparator = "";
this.tvClientsAccounts.ShowNodeToolTips = true;
this.tvClientsAccounts.Size = new System.Drawing.Size(411, 213);
this.tvClientsAccounts.TabIndex = 23;
this.tvClientsAccounts.BeforeExpand += new System.Windows.Forms.TreeViewCancelEventHandler(this.tvClientsAccounts_BeforeExpand);
this.tvClientsAccounts.AfterExpand += new System.Windows.Forms.TreeViewEventHandler(this.tvClientsAccounts_AfterExpand);
this.tvClientsAccounts.BeforeSelect += new System.Windows.Forms.TreeViewCancelEventHandler(this.tvClientsAccounts_BeforeSelect);
this.tvClientsAccounts.AfterSelect += new System.Windows.Forms.TreeViewEventHandler(this.tvClientsAccounts_AfterSelect);
this.tvClientsAccounts.NodeMouseClick += new System.Windows.Forms.TreeNodeMouseClickEventHandler(this.tvClientsAccounts_NodeMouseClick);
Thanks for your help
Russ
Yes, TreeView is a bit of a pain that way, it restores the focus to itself. That's why it has the AfterXxx events, but there's no AfterNodeMouseClick event. The way to solve it is to delay executing the method, until after all event side-effects are completed. That's elegantly done by using the Control.BeginInvoke() method, its delegate target runs when the UI thread goes idle again. Like this:
private void treeView1_NodeMouseClick(object sender, TreeNodeMouseClickEventArgs e) {
this.BeginInvoke(new Action(() => OpenClientOrAccount(e.Node)));
}
How could I prevent opening multiple windows from a wpf application?
I need to open a window from the menu and if I click to open it again, I want the already opened window to become active.
Any suggestions?
You could use the Application.Current.Windows collection for that. Just check whether this collection contains the window you are about to open and if it does, activate it, otherwise create new window and show it:
var existingWindow = Application.Current.Windows.Cast<Window>().SingleOrDefault(w => /* return "true" if 'w' is the window your are about to open */);
if (existingWindow != null) {
existingWindow.Activate();
}
else {
// Create and show new window
}
Here is one way to do it:
private Window _otherWindow;
private void OpenWindow()
{
if (_otherWindow == null)
{
//Pass in a reference to this window so OtherWindow can call WindowClosed when it is closed..
_otherWindow = new OtherWindow(this);
_otherWindow.Show();
}
else
_otherWindow.Activate(); //Or whatever the method is to bring a window to the front
}
public void WindowClosed()
{
_otherWindow = null;
}