How to prevent Kendo Panelbar from collapsing when I click button which is places on the panelbar itself

Question

I have a button which is placed on Kendo Panelbar. I was writing a jQuery function so that when user clicks on the button panelbar does not collapse. Other logic that I put on is that there is no post-back when button is clicked. I can't get this to work. Help appreciated ! :) Here is the code snippet.

$("#panelBarCarDetails").kendoPanelBar({
        expandMode: "multiple"

        $('#btnTakeOwnership').click(function (e) {
            if (e.target) {
                e.preventDefault();

            }             
          });

That inner code shouldn't be there, you are defining the panelBar in it, you can't place that function there, it must be outside — chiapa, Aug 06 '15 at 15:01
No, it may be independent. Place it [like this](http://jsfiddle.net/3hmfqfuv/) — chiapa, Aug 06 '15 at 15:07
Thanks ! ya that makes sense for this function to be independent. — HereToLearn_, Aug 06 '15 at 15:12
Do you know @chiapa how do preventDefault of the Kendo PanelBar when button click ? I tried this code but it did not work. http://jsfiddle.net/vjjt2L0p/ — HereToLearn_, Aug 06 '15 at 15:23
That code can never work, give me a sec. The Kendo UI demos page is unavailable now. What have you got, a panelBar with a button in it? And if you click the button, the panelBar collapses? — chiapa, Aug 06 '15 at 15:25
I have got a Kendo PanelBar. On it I have a button and I dont want the panelbar collapse/expand when user clicks on this button. User can click on panelbar anywhere but the button and panelbar will behave like expected. — HereToLearn_, Aug 06 '15 at 15:33
You mean you have something [like this](http://dojo.telerik.com/@joaosimoes/ERufI)? — chiapa, Aug 06 '15 at 15:40
Not really. So in your example suppose lets say I want to put a button on Projects panelbar. So I would placed it somewhere like this:
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/85318/discussion-between-chiapa-and-heretolearn). — chiapa, Aug 06 '15 at 15:56

Lukasz S · Answer 1 · 2016-11-16T16:30:06.133

3

Return false form your button click event handler function.

$('#btnTakeOwnership').click(function (e) {
        if (e.target) {
            e.preventDefault();
        }             
        return false;
      });

Changed fiddle from chiapas answer

edited Nov 16 '16 at 16:30

answered Nov 16 '16 at 14:42

Lukasz S

648
1
10
29

chiapa · Accepted Answer · 2015-08-07T14:15:04.103

I managed to find a solution for your problem by creating a boolean variable that represents the possibility to expand or collapse the panelBar. When you click the button, it will "lock" the panel.

Then, on expand or collapse events, it will check this variable's value and preventDefault or not depending on it.

Here's a fiddle

var canExpandCollapse = true;
 $(document).ready(function () {
     $("#panelbar").kendoPanelBar({
         expandMode: "multiple",
         collapse: cancelExpandCollapse,
         expand: cancelExpandCollapse
     });
 });

 function cancelExpandCollapse(e) {
     if (!canExpandCollapse) {
         e.preventDefault();
         canExpandCollapse = true;
     }
 }

 $("#wu").click(function (e) {
     canExpandCollapse = false;
 });

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common-fiori.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.fiori.min.css" />

    <script src="//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>

<div id="example">
    <ul id="panelbar">
        <li> <span class="k-link k-state-selected">My Teammates</span>

            <br/>
            <p>Some trash here</p>
            <p>Some trash here</p>
            <br/>
            <br/>
        </li>
        <li id="">Projects
            <button id="wu">Click me, I won't expand/collapse</button>
            <ul>
                <li>New Business Plan</li>
                <li>Sales Forecasts
                    <ul>
                        <li>Q1 Forecast</li>
                        <li>Q2 Forecast</li>
                        <li>Q3 Forecast</li>
                        <li>Q4 Forecast</li>
                    </ul>
                </li>
                <li>Sales Reports</li>
            </ul>
        </li>
        <li>Programs
            <ul>
                <li>Monday</li>
                <li>Tuesday</li>
                <li>Wednesday</li>
                <li>Thursday</li>
                <li>Friday</li>
            </ul>
        </li>
        <li>Communication</li>
    </ul>
</div>

This is awesome! Thanks a lot for working through this with me :). It works like charm ! — HereToLearn_, Aug 07 '15 at 14:11
Have you tried to just put return false in button click function? like [jsfiddle](http://jsfiddle.net/sofqcdpk/) — Lukasz S, Nov 16 '16 at 11:26
@LukaszSalamon, could you show how? The link you posted has the same code as the solution — chiapa, Nov 16 '16 at 11:35

How to prevent Kendo Panelbar from collapsing when I click button which is places on the panelbar itself

2 Answers2

Linked