How to hide panel item (header)?

[Ralf]

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

[Boyan Dimitrov]

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

[Ralf]

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

[Princy]

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.

[Boyan Dimitrov]

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

[Ralf]

Hello Boyan and Princy,

great! That solves my cases. Thank you!

Best regards

Ralf

[ghini]

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

[Nencho]

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