[SOLVED] How to prevent Kendo PanelBar from collapsing when I click button which is placed on the PanelBar itself

How to prevent Kendo PanelBar from collapsing when I click button which is placed on the PanelBar itself

I have a button which is placed on a Kendo PanelBar. I was writing a jQuery function so that when user clicks on the button, the PanelBar does not collapse. I put some other logic in so that there is no post-back when the 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();

            }             
          });

Solution

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>