javascript - column - kendo ui grid angular 4

Cómo evitar que Kendo Panelbar colapse cuando hago clic en el botón que está ubicado en la barra del panel

Question

Tengo un botón que se coloca en Kendo Panelbar. Estaba escribiendo una función jQuery para que cuando el usuario haga clic en el botón, la barra del panel no colapse. Otra lógica que propongo es que no hay respaldo posterior cuando se hace clic en el botón. No puedo hacer que esto funcione. Ayuda apreciada! :) Aquí está el fragmento de código.

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

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

            }             
          });

Answer 1

Devuelva la forma false su botón haga clic en la función del controlador de eventos.

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

Se cambió el violín de la respuesta de chiapas

Answer 2

Logré encontrar una solución para tu problema creando una variable booleana que representa la posibilidad de expandir o colapsar el panelBar. Cuando haga clic en el botón, "bloqueará" el panel.

Luego, en los eventos de expansión o colapso, se verificará el valor de esta variable y se evitará preventDefault o no dependiendo de ello.

Aquí hay un violín

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>