UniTreeMenu with labels

[gerardocrisci]

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

[Sherzod]

Hello,

 

How will you show the label in Micro?!

Or will you not use this mode?

 

[gerardocrisci]

I made some attempts as you can see from the attachment.

I can not disable a node and move it to the left, I would need a style for the nodes-labels.

In micro: view the space or watch this tamplate

http://demo.interface.club/limitless/layout_1/LTR/default/index.html

this displays 3 points and not the space.

 

[Sherzod]

How do you "draw Email", what is this element?

[gerardocrisci]

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.

[Sherzod]

Maybe you need to add this custom CSS...

 

CustomCSS:

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

[gerardocrisci]

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

[Freeman35]

Hello,

Has any solution for this issue?

[gerardocrisci]

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?

 

treeMenuLabel.png

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

[Sherzod]

Hi,

 

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

 

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

[Beginner]

 

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?

[gerardocrisci]

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.

[Sherzod]

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;

[heromo80]

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

[Sherzod]

Hello,

 

Sorry, can you clarify your question?

[gerardocrisci]

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.

 

 

[Freeman35]

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

[Sherzod]

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;

[gerardocrisci]

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?

[heromo80]

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

 

[gerardocrisci]

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.

[Sherzod]

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

 

img1.jpgimg2.jpgimg3.jpg

 

 

Can you try this approach?:

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

[Wilton Ergon]

....

[Sherzod]

[heromo80]

Hello Delphi Developer, 

 

It worked fine!

 

Thanks. 

 

 

Hello,

 

 

Can you try this approach?:

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