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

admin管理员组

文章数量:1394138

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

            }             
          });

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

            }             
          });

• javascript
• jquery
• kendo-ui
• kendo-panelbar

Share Improve this question Follow edited Jan 27, 2016 at 13:47 HereToLearn_ asked Aug 6, 2015 at 14:54 HereToLearn_HereToLearn_ 1,18055 gold badges2626 silver badges4949 bronze badges 11

• 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 Commented Aug 6, 2015 at 15:01
• do you think ready function would be a good place for it ? – HereToLearn_ Commented Aug 6, 2015 at 15:06
• No, it may be independent. Place it like this – chiapa Commented Aug 6, 2015 at 15:07
• Thanks ! ya that makes sense for this function to be independent. – HereToLearn_ Commented Aug 6, 2015 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. jsfiddle/vjjt2L0p – HereToLearn_ Commented Aug 6, 2015 at 15:23

 |  Show 6 more ments

2 Answers 2

Sorted by: Reset to default 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

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./2015.2.805/styles/kendo.mon-fiori.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik./2015.2.805/styles/kendo.fiori.min.css" />

    <script src="//kendo.cdn.telerik./2015.2.805/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik./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>

本文标签：