Jump to content

UniTreeMenu with labels


gerardocrisci

Recommended Posts

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.

 

post-2430-0-50848500-1528691864_thumb.jpg

Link to comment
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.

Link to comment
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
Link to comment
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

Link to comment
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.

 

 

Link to comment
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

Link to comment
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;
Link to comment
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

Link to comment
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
Link to comment
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 2
Link to comment
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');
}
Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...