How to hide panel item (header)?

8 posts, 0 answers
  1. Ralf
    Ralf avatar
    77 posts
    Member since:
    Jun 2012

    Posted 03 Jul 2013 Link to this post

    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
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 08 Jul 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ralf
    Ralf avatar
    77 posts
    Member since:
    Jun 2012

    Posted 09 Jul 2013 Link to this post

    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
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 11 Jul 2013 Link to this post

    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.
  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 11 Jul 2013 Link to this post

    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.
  7. Ralf
    Ralf avatar
    77 posts
    Member since:
    Jun 2012

    Posted 12 Jul 2013 Link to this post

    Hello Boyan and Princy,

    great! That solves my cases. Thank you!

    Best regards

    Ralf
  8. ghini
    ghini avatar
    25 posts
    Member since:
    Sep 2012

    Posted 30 Nov in reply to Boyan Dimitrov Link to this post

    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

  9. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 5 days and 9 hours ago Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017