How To Prevent Kendo Panelbar From Collapsing When I Click Button Which Is Places On The Panelbar Itself

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 t

Solution 1:

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
     });
 });

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

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

<linkhref="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common-fiori.min.css" /><linkhref="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.fiori.min.css" /><scriptsrc="//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"></script><scriptsrc="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script><divid="example"><ulid="panelbar"><li><spanclass="k-link k-state-selected">My Teammates</span><br/><p>Some trash here</p><p>Some trash here</p><br/><br/></li><liid="">Projects
            <buttonid="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>

Solution 2:

Return false form your button click event handler function.

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

Changed fiddle from chiapas answer