Collapsible Panel Button Size

2 posts, 0 answers
  1. Gary
    Gary avatar
    18 posts
    Member since:
    Jul 2016

    Posted 02 Jun Link to this post

    I'm using the collapsible panel with expand direction = right.  I'd like to increase the size (at least the height anyway) of the button because the app is used on a touch screen so the pointer device is a fat finger and not a mouse.  I set the font size to 14pt so the width is probably ok.  How do I set to the size of that button?

    While I'm asking, can I also set the width of that header (expand direction right)?  And an alternative would be to enable clicking on the header to execute the collapse/expand action.  Would you offer that solution, too?

    Thank you,

    Gary

  2. Hristo
    Admin
    Hristo avatar
    1019 posts

    Posted 05 Jun Link to this post

    Hello Gary,

    Thank you for writing.

    You can increase the size of the button located in the header by setting its MinSize property: 
    this.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderButtonElement.MinSize = new Size(50, 50);

    As to your other question, you can handle the Click event of header element and toggle the IsExpanded property of the control: 
    public Form1()
    {
        InitializeComponent();
        this.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.Click += HeaderElement_Click;
    }
     
    private void HeaderElement_Click(object sender, EventArgs e)
    {
        this.radCollapsiblePanel1.IsExpanded = !this.radCollapsiblePanel1.IsExpanded;
    }

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top