Jump to content


Photo

UniTreeMenu with labels


  • Please log in to reply
19 replies to this topic

#1 gerardocrisci

gerardocrisci

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 65 posts
  • LocationItaly

Posted 10 June 2018 - 07:38 AM

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

Attached Files


  • 0

Italy.gif Italy is wonderful


#2 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 4987 posts

Posted 10 June 2018 - 10:43 PM

Hello,

 

How will you show the label in Micro?!

Or will you not use this mode?

 

Attached File  treeMenuLabel.png   6.89KB   5 downloads


  • 0

#3 gerardocrisci

gerardocrisci

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 65 posts
  • LocationItaly

Posted 11 June 2018 - 04:38 AM

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
this displays 3 points and not the space.
 

Attached Files


  • 0

Italy.gif Italy is wonderful


#4 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 4987 posts

Posted 11 June 2018 - 04:51 AM

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


  • 0

#5 gerardocrisci

gerardocrisci

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 65 posts
  • LocationItaly

Posted 11 June 2018 - 05:11 AM

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.


  • 0

Italy.gif Italy is wonderful


#6 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 4987 posts

Posted 11 June 2018 - 05:53 AM

Maybe you need to add this custom CSS...

 

CustomCSS:

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

  • 0

#7 gerardocrisci

gerardocrisci

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 65 posts
  • LocationItaly

Posted 11 June 2018 - 06:44 AM

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

  • 0

Italy.gif Italy is wonderful


#8 Freeman35

Freeman35

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 329 posts

Posted 12 June 2018 - 07:31 AM

Hello,

Has any solution for this issue?


  • 0

#9 gerardocrisci

gerardocrisci

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 65 posts
  • LocationItaly

Posted 13 June 2018 - 08:39 AM

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:


  • 0

Italy.gif Italy is wonderful


#10 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 4987 posts

Posted 13 June 2018 - 08:55 AM

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 :)


  • 0

#11 Beginner

Beginner

    Active Member

  • Members
  • PipPipPip
  • 89 posts

Posted 13 June 2018 - 12:27 PM

 

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?


  • 0

#12 gerardocrisci

gerardocrisci

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 65 posts
  • LocationItaly

Posted 17 June 2018 - 09:26 PM

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.


  • 0

Italy.gif Italy is wonderful


#13 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 4987 posts

Posted 19 June 2018 - 07:11 PM

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;

  • 1

#14 agmoro7622

agmoro7622

    Member

  • uniGUI Subscriber
  • PipPip
  • 46 posts
  • LocationBogotá, Colombia

Posted 19 June 2018 - 08:57 PM

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

  • 0

#15 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 4987 posts

Posted Yesterday, 02:53 AM

Hello,

Sorry, can you clarify your question?
  • 0

#16 gerardocrisci

gerardocrisci

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 65 posts
  • LocationItaly

Posted Yesterday, 06:56 AM

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.

 

 


  • 0

Italy.gif Italy is wonderful


#17 Freeman35

Freeman35

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 329 posts

Posted Yesterday, 08:12 AM

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

Attached Files


  • 0

#18 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 4987 posts

Posted Yesterday, 10:51 AM

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;

  • 0

#19 gerardocrisci

gerardocrisci

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 65 posts
  • LocationItaly

Posted Yesterday, 11:59 AM

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?

Attached Files

  • Attached File  menu.gif   61.58KB   0 downloads

  • 0

Italy.gif Italy is wonderful


#20 agmoro7622

agmoro7622

    Member

  • uniGUI Subscriber
  • PipPip
  • 46 posts
  • LocationBogotá, Colombia

Posted Yesterday, 08:01 PM

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
 
Attached File  img1.jpg   66.33KB   0 downloadsAttached File  img2.jpg   74.68KB   0 downloadsAttached File  img3.jpg   58.11KB   0 downloads

  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users