Jump to content

Panels in a Accordion Layout


Darth Florus

Recommended Posts

Hi:

 

There is a way to know if a panel that are into a accordion layout are visible or not?

 

Or a OnTitleClick like event to know if a especific panel is visible or not?

 

I try Collapsed, OnCollapse and OnExpand events a nothing of thesse works.

 

Thanks to all and

Best Regards

Link to comment
Share on other sites

Hi:

 

I have to emulate on UniGui the behavior of our Win32 program.

 

See the attached pictures to ilustrate to.

 

In "First Page" You have a left panel with possible options to take a report on PDF, a Center panel where You configure you reports options.

 

This center panel changes in according to the options You press on the left panel.

 

Because there are to many options on the left panel is needed to use something like a Outlook bar to group them by type of report.

 

The problem is...

 

I can't detect when a accordion button is pressed, and also, I can't know what panel is on the front when the accordion button is pressed.

 

I need this event because the center panel must change, when the group is changed to.

 

You can see the sequence of use if you see the "First Page", "Second Page" and "Third Page" examples screenshots.

 

I was use OnClick on the "groups panels" but if I click on the accordion button I can't detect it, and if I click twice on the same "Group Tittle" I don't know if the panel is showed or hidden.

 

As resume I need to know what panel is "active" at a time.

 

Best Regards

 

 

post-37-0-11186600-1510153618_thumb.png

post-37-0-42885800-1510153626_thumb.png

post-37-0-74757500-1510153631_thumb.png

Link to comment
Share on other sites

Hi,

 

Maybe like this (need to optimize)?:

 

1. "MainPanel" (UniPanelA) -> ... -> function afterrender:

function afterrender(sender, eOpts)
{
    var me=sender;

    //me.layout.getLayoutItems().forEach...

    me.items.items.forEach(function(item){
        //item.addListener('collapse', function(){
        //    ajaxRequest(me, '_expandorcollapse', ['uname='+me.layout.getExpanded()[0].uname]);
        //});
        item.addListener('expand', function(){
            ajaxRequest(me, '_expandorcollapse', ['uname='+me.layout.getExpanded()[0].uname]);
        })
    });
}

2. "MainPanel" (UniPanelA) -> OnAjaxEvent:

procedure TMainForm.UniPanelAAjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin
  if EventName = '_expandorcollapse' then
    ShowMessage(Params.Values['uname'] + ' expanded');

end;

Best regards,

Link to comment
Share on other sites

  • 1 year later...
51 minutes ago, Sherzod said:

Have you tried to use CreateOrder property for this?

Panel1.CreateOrder = 1

Panel2.CreateOrder = 2

Panel3.CreateOrder = 3

...

tnx

how to change first panel collapse = false  

 

  procedure tf1.UniFormAfterShow(Sender: TObject);
  begin
    p1.Collapsed  := False;
    p2.Collapsed     := True;
    p3.Collapsed     := True;
  end;

not working ...

 

 

Link to comment
Share on other sites

×
×
  • Create New...