Toggle PanelBar

3 posts, 0 answers
  1. David
    David avatar
    2 posts
    Member since:
    Jul 2014

    Posted 31 Jul 2014 Link to this post

    I am trying to setup a panel bar to open when clicked and closed when clicked again. I have tried everything I know to do and have tried the panelBar animation sample with the if statements but for some reason couldn't make it work. Can anyone tell me what I'm doing wrong? Here is my code:

    <div id="organizer">
            @(Html.Kendo().PanelBar()
         .Name("panelBar")
         .Animation(true)
          
         .ExpandMode(PanelBarExpandMode.Single)
         .Items(PanelBar =>
             {
                 PanelBar.Add()
                     .Expanded(false)                         
                     .Content(@<div>
                        <div class="col-md-5">
                            <div class="panel-body">
                                <div id="employeeInfo">
                                    <dl class="dl-horizontal">
                                        <dt>Office:</dt>
                                        <dd>Asheville, NC</dd>
                                        <dt>Department:</dt>
                                        <dd>FTG</dd>
                                        <dt>Position:</dt>
                                        <dd>Manager</dd>
                                        <dt>Phone: </dt>
                                        <dd>336-822-4442</dd>
                                        <dt>Email: </dt>
                                        <dd>victor.canipe@dhgllp.com</dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        <div class="myTable">
                            <div class="table-responsive">
                                <table class="table table-bordered table-condensed" style="margin-bottom:0px;">
                                    <tr>
                                        <th>Skills</th>
                                        <th>Industries</th>
                                        <th>Services</th>
                                    </tr>
                                    <tr>
                                        <td>Language</td>
                                        <td>Lorem Ipsum</td>
                                        <td>Lorem Ipsum</td>
                                    </tr>
                                    <tr>
                                        <td>Technology</td>
                                        <td>JAVA</td>
                                        <td>JAVA</td>
                                    </tr>
                                    <tr>
                                        <td>Technology</td>
                                        <td>Access</td>
                                        <td>Access </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="panel-footer">
                            <div class="col-md-2 col-md-push-6">
                                <a id="more"><i class="fa fa-info-circle"></i>More</a>
                            </div>
                        </div>
                    </div>
                     );
              })
            )
        </div>
  2. David
    David avatar
    2 posts
    Member since:
    Jul 2014

    Posted 31 Jul 2014 in reply to David Link to this post

    Don't know why but I have it working. I changed .ExpandMode(PanelBarExpandMode.Single) to .ExpandMode(PanelBarExpandMode.Multiple). Don't know what that has to do with toggle but it works, so I guess Single == no toggle and Multiple == toggle.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 01 Aug 2014 Link to this post

    Hello David,

    Yes, in ExpandMode Single there should be always one expanded item, thus you can't close it with a click on it. ExpandMode Multiple allows all interactions.

    Regards,
    Kamen Bundev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top