Jump to content
uniGUI Discussion Forums
gerardocrisci

UniTreeMenu with labels

Recommended Posts

Is it possible to add fixed labels in a TUniTreeMenu?

Or have a property for the Node that adds a style like cls?

 

Thank you

post-2430-0-60358300-1528616279_thumb.jpg

Share this post


Link to post
Share on other sites

Hello,

 

How will you show the label in Micro?!

Or will you not use this mode?

 

post-906-0-40226100-1528671207_thumb.png

Share this post


Link to post
Share on other sites
The label "Email" is a node that I would like to disable and move to the left.
I created the menu with this test of mine
procedure TMainForm.UniFormCreate(Sender: TObject);

  procedure AddMenuItems(AMenu: TUniMenuItem; TreeNode: TUniTreeNode);
  var
    I: Integer;
    Node: TUniTreeNode;
  begin
    for I := 0 to AMenu.Count - 1 do
    begin
      Node := UniTreeMenu1.Items.Add(TreeNode);

      Node.Text := AMenu[I].Caption;
      Node.Visible := AMenu[I].Visible;
      Node.ImageIndex := AMenu[I].ImageIndex;
      Node.Action := AMenu[I].Action;

      if (TreeNode=nil) and (AMenu[I].Count=0) then
      begin
        Node.Text := '<div style=" font-size: 10px;  color: #888;  text-transform: uppercase; left:-10px">'+AMenu[I].Caption+'</div>';
        Node.ImageIndex := -1;
        Node.Enabled:=false;
      end;

      if not Assigned(Node.Action) and Assigned(AMenu[I].OnClick) then
      begin
        Node.OnClick := AMenu[I].OnClick;
      end;

      AddMenuItems(AMenu[I], Node);
    end;
  end;

begin
   UniTreeMenu1.Images:=UniMenuItems1.Images;
   AddMenuItems(UniMenuItems1.Items, nil);
end;

I do not know if using the node as a label is right.

Share this post


Link to post
Share on other sites

Maybe you need to add this custom CSS...

 

CustomCSS:

.x-treelist-item-tool.x-tree-node-icon-blank {
  display: none;
}

Share this post


Link to post
Share on other sites
it does not work

but it does not appear to me .x-treelist-item-tool

 

...and x-treelist-item-text has left and right margins

Share this post


Link to post
Share on other sites

Hello,

Has any solution for this issue?

I have not found a satisfactory solution yet  :( 

 

 

 

Hello,

 

How will you show the label in Micro?!

Or will you not use this mode?

 

attachicon.giftreeMenuLabel.png

How was the menu that I see in the attached image created?

:rolleyes:

Share this post


Link to post
Share on other sites

Hi,

 

How was the menu that I see in the attached image created?

:rolleyes:

 

I'll try to remember that decision and let you know :)

Share this post


Link to post
Share on other sites

 

Is it possible to add fixed labels in a TUniTreeMenu?
Or have a property for the Node that adds a style like cls?
 
Thank you

 

How create menu like this? can you share sample?

Share this post


Link to post
Share on other sites

Hi,

 

 

I'll try to remember that decision and let you know :)

 

do you have a solution?

I at least know how to disable a node?

 

Thank you.

Share this post


Link to post
Share on other sites

Hi,

 

I'll try to remember that decision and let you know :)

 

1. CustomCSS:

.x-treelist-item-floated .treenodeLabel {
  display: none;
}

2. For example:

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  UniTreeMenu1.JSInterface.JSCode('var _r='#1'.getStore().findRecord("text", "Dashboard");'+
                                  'if (_r) {'+
                                  '    newItem = document.createElement("LI");'+
                                  '    newItem.className="treenodeLabel";'+
                                  '    newItem.style.color = "#867F79";'+
                                  '    newItem.style.fontSize = "16px";'+
                                  '    newItem.style.padding = "5px 0 0 5px";'+
                                  '    newItem.style.fontWeight = "bold";'+
                                  '    textnode = document.createTextNode("System");'+
                                  '    newItem.appendChild(textnode);'+
                                    #1'.el.query(''li[data-recordid="'' + _r.internalId + ''"]'')[0].insertBefore(newItem, '#1'.el.query(''li[data-recordid="'' + _r.internalId + ''"]'')[0].childNodes[0])'+
                                  '};'
  );
end;
  • Upvote 1

Share this post


Link to post
Share on other sites
Hello,

Is it possible that a treemenu has the default scroll activated when expanding a node?

This when the nodes that are at the bottom are hidden and the treemenu is embedded in a panel

 

Thanks for your help

Share this post


Link to post
Share on other sites

hello Delphi Developer

thanks for your answers

 

I have created a different solution.
Each node without an icon is transformed into a similar label
 Email1.ImageIndex := -1;
UniTreeMenu1 > ClientEvents > UniEvents
function beforeInit(sender, config)
{
    config.tree.getItemConfig=function (node, parent) {
        var item =  Ext.apply({
            parentItem: parent.isRootListItem ? null : parent,
            owner: this,
            node: node,
            indent: this.getIndent()
        }, this.getDefaults());
        if(node.data.iconCls==="x-tree-node-icon-blank"){
           node.data.rowCls="nodolabel";
        }
        return item
    }    
}

and create a style

.x-treelist-nav .nodolabel .x-treelist-item-text {
    color:#1b9;
    margin-left: 0px;
}
however the node must not be selectable.
I can not disable it.

 

 

Share this post


Link to post
Share on other sites

Hello,

I got two question:

1-) How to change space size on left of NodeText? (on screenshot pointed red arrow)

2-) That sub menu open just clicked to arrow on rigth side. It can be triggered when click to row? any place, for example node text?

regards

post-4508-0-35306500-1529482195_thumb.png

Share this post


Link to post
Share on other sites

Hi,

 

 

he node must not be selectable.

I can not disable it.

 

 

 

 

Can you try this approach?:

 

1.

function beforeInit(sender, config)
{
    config.tree.getItemConfig=function (node, parent) {
        var item =  Ext.apply({
            parentItem: parent.isRootListItem ? null : parent,
            owner: this,
            node: node,
            indent: this.getIndent()
        }, this.getDefaults());
        if(node.data.iconCls==="x-tree-node-icon-blank"){
           node.data.rowCls="nodolabel";
           node.data.disabled=true; //<-------------------------
        }
        return item
    }    
}

2.

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniTreeMenu1.JSInterface.JSAddListener('itemclick', 'function(me,c,d){return !(c.node.data.disabled)}');
end;

Share this post


Link to post
Share on other sites

perfect. Grazie.
 
I could not add a Listener, now I know how to do it.
 
But there is a consideration:
when I create a node that is not enabled, for example

in dfm 

Dashborad1.Enabled = False 

because node.data.disabled has a value of false

and always displays an active item .. is it a bug?

post-2430-0-98851700-1529496039_thumb.gif

Share this post


Link to post
Share on other sites

Hello,

 

Sorry, can you clarify your question?

 

Hello,
 
the scroll is not activated to navigate through all the nodes without having to collapse the previous node.
 
Scrolling works well with a unitreeview when it expands completely.
 
Thank you
 
post-353-0-37801500-1529524510_thumb.jpgpost-353-0-59189500-1529524578_thumb.jpgpost-353-0-73964600-1529524591_thumb.jpg

Share this post


Link to post
Share on other sites
you can add a property to the style in TUniMenuItem (example RowCls) so you can set it directly

node.data.rowCls = "...."

Thank you

 

the Enable property for TUniMenuItem does not set node.data.disabled.

Thank you again.

Share this post


Link to post
Share on other sites

Hello,

 

 

Hello,
 
the scroll is not activated to navigate through all the nodes without having to collapse the previous node.
 
Scrolling works well with a unitreeview when it expands completely.
 
Thank you
 

 

 

Can you try this approach?:

function treeMenu.afterCreate(sender)
{
    sender.el.setStyle('overflow-y', 'auto');
}
  • Upvote 1

Share this post


Link to post
Share on other sites

Hello Delphi Developer, 

 

It worked fine!

 

Thanks. 

 

 

Hello,

 

 

Can you try this approach?:

function treeMenu.afterCreate(sender)
{
    sender.el.setStyle('overflow-y', 'auto');
}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×