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

Toggle PanelBar

2 Answers 67 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 31 Jul 2014, 05:21 PM
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 Answers, 1 is accepted

Sort by
0
David
Top achievements
Rank 1
answered on 31 Jul 2014, 05:40 PM
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.
0
Kamen Bundev
Telerik team
answered on 01 Aug 2014, 10:53 AM
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.

 
Tags
PanelBar
Asked by
David
Top achievements
Rank 1
Answers by
David
Top achievements
Rank 1
Kamen Bundev
Telerik team
Share this question
or