Как предотвратить падение панели Kendo, когда я нажимаю кнопку, расположенную на самой панели

У меня есть кнопка, которая находится на панели инструментов Kendo. Я писал функцию jQuery, чтобы при щелчках пользователя по панели кнопок не происходило свертывание. Другая логика, которую я использую, заключается в том, что при нажатии кнопки не происходит постбэк. Я не могу заставить это работать. Помощь оценена!:) Вот фрагмент кода.

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

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

            }             
          });
Источник

2 ответа

Решение

Мне удалось найти решение вашей проблемы, создав логическую переменную, которая представляет возможность развернуть или свернуть панель Panel. Когда вы нажимаете кнопку, она блокирует панель.

Затем, при событиях раскрытия или свертывания, он проверит значение этой переменной и preventDefault или нет в зависимости от этого.

Вот скрипка

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>

Источник

Вернуть false сформировать функцию обработчика событий нажатия кнопки.

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

Изменил скрипку из ответа Чьяпаса

Источник
Другие вопросы по тегам