This is a migrated thread and some comments may be shown as answers.

Hide border of CollapsiblePanel

16 Answers 706 Views
CollapsiblePanel
This is a migrated thread and some comments may be shown as answers.
Gabriele
Top achievements
Rank 1
Gabriele asked on 11 Jun 2014, 03:56 PM
Hi all,

I am pretty sure it is very easy to achive but I just can't find it.

I have an application that uses quite a lot of CollapsiblePanels but it also uses Tabs and so the layout has a lot of borders that make the whole stuff look a bit... restless.
So I want to hide the border of the CollapsiblePanels without having to mess with the theme (the tool uses a theme manager and the user can switch between some of the custom themes) so I need to hide the borders in general.

How can I do that?

Kind regards,
Gabriele

16 Answers, 1 is accepted

Sort by
0
George
Telerik team
answered on 16 Jun 2014, 04:51 PM
Hello Gabriele,

Thank you for writing.

You can hide the border by setting the Visibility of the BorderPrimitive of the controls container to Collapsed​:
collapsiblePanel.ControlsContainer.PanelElement.Border.Visibility = ElementVisibility.Collapsed;

Let me know, should you have further questions.

Regards,
George
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Tim
Top achievements
Rank 1
answered on 26 Sep 2014, 03:39 PM
For some reason using your code still show the border in my application.

I did this and the border is now hidden.

cpnlLessUsedFields.ControlsContainer.PanelContainer.BorderStyle = BorderStyle.None;
cpnlLessUsedFields.ControlsContainer.PanelElement.Border.Visibility = ElementVisibility.Collapsed;
0
George
Telerik team
answered on 01 Oct 2014, 08:39 AM
Hello Tim,

Thank you for your reply.

By default the BorderStyle of the PanelContainer is set to None, so if you have changed it, then setting it back to None in combination with the Visibility of the Border is correct.

Do not hesitate to let me know, should you have any other questions.

Regards,
George
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Martin
Top achievements
Rank 1
answered on 18 Nov 2019, 10:45 AM

Where can i set it in the "Visual Style Builder"?

I cant change the border of the CollapsiblePanelLayoutElement.

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 19 Nov 2019, 02:43 PM

Hello, Martin,

Note that CollapsiblePanelControlsContainer is a derivative of RadScrollablePanel.

It inherits the theme of the RadScrollablePanel. Hence, if you need to manipulate the border of the CollapsiblePanelControlsContainer, feel free to customize the border for RadScrollablePanel in Visual Style Builder:


I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Martin
Top achievements
Rank 1
answered on 21 Nov 2019, 08:17 AM

Thank you Dess, that was the missing information ;-)

Now i have the wanted behavior.

When the expand-animation starts the bottom is shown during it opened, but i think there is no solution.

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 22 Nov 2019, 11:37 AM
Hello, Martin,

I am glad that the provided information was helpful.

As to the animation, I am not sure whether I understand your requirement correctly. However, if you need to disable the animation and show the whole content at once, you need to set the RadCollapsiblePanel.EnableAnimation property to false via code. This property is not available in Visual Style Builder. 
    this.radCollapsiblePanel1.EnableAnimation = false;
Should you have further questions please let me know.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Martin
Top achievements
Rank 1
answered on 22 Nov 2019, 11:46 AM

Hi Dess,

 

sorry you misunderstand me! :-)

I mean at runtime when the animation starts the header-bottom-border is shown during the animation and disappears only when the panel is expanded.

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 22 Nov 2019, 12:07 PM

Hello, Martin,

I am really sorry for the misunderstanding. The provided clarification is greatly appreciated. However, I am not sure what exactly you mean with header-bottom-border. This is actually the border of the container which is collapsed in this state:

When you expand RadCollapsiblePanel, it gets stretched vertically and the border moves to the bottom of the container.

I have attached my sample project with a RadCollapsiblePanel using the default theme. Could you please specify the exact steps how to reproduce the problem? 

Alternatively, you can submit a support ticket from your Telerik account and modify the project in a way which demonstrates the missing border in expanded state. Thus, we would be able to investigate the precise case and assist you further. Thank you in advance.

I am looking forward to your reply.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Martin
Top achievements
Rank 1
answered on 22 Nov 2019, 12:44 PM

Thank you for your reply.

Your Header-Element need a border! And from this the bottom-border is show only in collapsed-state.

That is how i defined it in my theme.

And when the animation (expand) starts this border is hide when the animation finished, so you see 2 bottom-borders during the animation.

I hope now it´s clear! ;-)

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 22 Nov 2019, 02:52 PM

Hello, Martin,

I have updated my sample project to show a border for the header element as follows: 

            this.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.DrawBorder = true;
            this.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.BorderBoxStyle = BorderBoxStyle.SingleBorder;
            this.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.BorderColor = Color.Red;
            this.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.BorderGradientStyle = GradientStyles.Solid;

However, the border is displayed properly when collapsing/expanding the panel. Please refer to the attached gif file. Am I missing something? Do I need to perform any changes to the project in order to replicate the double or missing border?

Would it be possible for you to submit a support ticket from your account and provide a sample project demonstrating the undesired behavior? So I can investigate the precise case. Thank you in advance. 

I am looking forward to your reply.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Martin
Top achievements
Rank 1
answered on 25 Nov 2019, 08:35 AM

Hi Dess,

sorry but we our license not include dedicated support.

I made a gif to show the problem!

There is no space between the Header and the PanelElement. And the Header has no bottom-border in the "expand"-state.

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 25 Nov 2019, 12:56 PM
Hello, Martin,
 
According to the provided gif file, the bottom border of the container stays for a few milliseconds during the expand animation before the complete expanded state is achieved. However, I am still unable to observe the same behavior on my end. Please refer to the attached sample project and give it a try? Is the problem reproducible in it on your end? What changes as code do I need to perform in order to replicate the undesired border? What is the theme that is applied to RadCollapsiblePanel in your gif file?

If you need to display/hide bottom border of the header element in RadCollapsiblePanel, not the container that hosts the inner control, feel free to manipulate the CollapsiblePanelElement.HeaderElement's border properties as it was previously demonstrated in my previous code snippet.

Off topic, if you don't have a license, I would recommend you to download a trial license which will enable 30 days support package. Thus, you will be able to test the support service that we offer and decide whether this controls suite would be appropriate for achieving your results and buy a license.

 

I am looking forward to your reply.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Martin
Top achievements
Rank 1
answered on 25 Nov 2019, 03:46 PM

When you edit the load-form to the following snippet you will see my problem.

Use the tssp-File i send you in the ticket 1443243.

ThemeResolutionService.LoadPackageFile(@"ESN_Theme.tssp");
ThemeResolutionService.ApplicationThemeName = "ESN_Theme";
InitializeComponent();
/*
this.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.DrawBorder = true;
this.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.BorderBoxStyle = BorderBoxStyle.SingleBorder;
this.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.BorderColor = Color.Red;
this.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.BorderGradientStyle = GradientStyles.Solid;
*/
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 27 Nov 2019, 09:01 AM

Hello, Martin,

Thank you for providing the theme. 

Now, I was able to observe the bottom border while the panel is expanding. I have noticed that for the CollapsiblePanelHeaderElement you set the bottom border to transparent with width 0 when the control is expanded. When it is collapsed there is 1px blue bottom border. Note that the element state is changed at the end of the expand/collapse operation. While an animation is ongoing you will see the applied style for the previous state. The attached gif file illustrates better what I mean.

Actually, the observed visible bottom border while the expand animation is ongoing as due to the enabled animation and the delay of the state applying.

The possible solution that I can suggest is to disable the animation by setting the RadCollapsiblePanel.EnableAnimation property to false.

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Martin
Top achievements
Rank 1
answered on 27 Nov 2019, 09:57 AM

I feared it. Ok thanks.

Maybe i find another solution! ;-)

Tags
CollapsiblePanel
Asked by
Gabriele
Top achievements
Rank 1
Answers by
George
Telerik team
Tim
Top achievements
Rank 1
Martin
Top achievements
Rank 1
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or