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

How to hide panel item (header)?

7 Answers 135 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Ralf
Top achievements
Rank 1
Ralf asked on 03 Jul 2013, 01:48 PM
Hello,

I have a panelbar and four panel items on my page. I need to hide one panel (header) server side and make it visible with javascript.

The panel item must be rendered, but invisible. So the user cannot see the header and click on it. Only if some client side validation was done the item (header) should be visible like Ajax Control Tool Kit do.

I'm not using header templates.

How to do?


Regards
Ralf

7 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 08 Jul 2013, 11:18 AM
Hello Ralf,

Thank you for contacting Telerik Support.

Please find attached a sample project that implements very similar scenario - when user clicks on "Hide on server side" button will hide the middle RadPanelBar item. Then if user clicks the button with text "show on client side" will show that item again on the client-side without any post-back to the server.

Hope that this will be helpful.


Regards,
Boyan Dimitrov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Ralf
Top achievements
Rank 1
answered on 09 Jul 2013, 10:06 AM
Hello Boyan,

thank you for the example. It helps to solve my case.

I have another question. Is it possible to change de ExpandMode on lient side? I need to have a single expand mode on default, and when the user clicks on a button the expand mode should be switched to multi expand without a postback.

Best regards,

Ralf
0
Princy
Top achievements
Rank 1
answered on 11 Jul 2013, 12:20 PM
Hi Ralf,

Please have a look at the following JavaScript code to set the ExpandMode as MultipleExpandedItems.

JavaScript:
var radpanelbar = $find('<%=RadPanelBar1.ClientID %>');
radpanelbar._multipleExpandedItems = true;

Thanks,
Princy.
0
Boyan Dimitrov
Telerik team
answered on 11 Jul 2013, 03:21 PM
Hello,

Indeed you can do that by using the built-in method of RadPanelBar client-side object set_expandMode() and pass as parameter the desired ExpandMode enumeration value. In your case that would be:
//JavaScript
panelBar.set_expandMode(Telerik.Web.UI.ExpandMode.MultipleExpandedItems)


Regards,
Boyan Dimitrov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Ralf
Top achievements
Rank 1
answered on 12 Jul 2013, 12:37 PM
Hello Boyan and Princy,

great! That solves my cases. Thank you!

Best regards

Ralf
0
ghini
Top achievements
Rank 2
answered on 30 Nov 2016, 08:40 AM

Hi Boyan,
in your example hide the item but the white space remains between one element and the other.
How can I hide an item without the white space?

Thanks

0
Nencho
Telerik team
answered on 02 Dec 2016, 01:56 PM
Hello ghini,

In order to hide the place, where the HeaderTemplate was previously displayed - you can use display:none instead of the visibility:hidden css style rule for the sampleCssClass:

<style type="text/css">
    html .RadPanelBar .sampleCssClass {
        display: none;
    }
</style>

Hope this would help.

Regards,
Nencho
Telerik by Progress
Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
Tags
PanelBar
Asked by
Ralf
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Ralf
Top achievements
Rank 1
Princy
Top achievements
Rank 1
ghini
Top achievements
Rank 2
Nencho
Telerik team
Share this question
or