How do you toggle a checkbox on a Kendo UI PanelBar that can expand or collapse?

Question

I am trying to make a panel bar with several expandable options with checkboxes at each level. The problem I am running into is that if you click on a checkbox that is part of an expandable panel, the checkbox does not toggle. Below is a simplified example that shows the problem. In the example below it is impossible to toggle the checkbox for Main 1

const panelBarTemplate = `
    <span class='k-state-default'>
        <span>#: item.text #</span>
        <input type='checkbox'
            id=#: item.id #
            class='k-checkbox'
            # if (item.isVisible) { #checked='checked'# } # />
        # var ItemCheckboxLabelClass = "k-checkbox-label" #
        # if (item.items) { ItemCheckboxLabelClass = "k-checkbox-label expandable-item" } #
        <label class="#: ItemCheckboxLabelClass #" for=#: item.id # />
    </span>
`;

var canExpandCollapse = true;

$('#side-bar-panel').kendoPanelBar({
  template: panelBarTemplate,
  dataSource: [{
    text: 'Main 1',
    id: 'Main1',
    isVisible: true,
    expanded: true,
    items: [{
      text: 'Sub 1',
      id: 'Sub1',
      isVisible: true
    }, {
      text: 'Sub 2',
      id: 'Sub2',
      isVisible: false
    }]
  }],
  dataBound: function() {
    $('.expandable-item').click(function() {
      canExpandCollapse = false;
    });
  },
  expand: cancelExpandCollapse,
  collapse: cancelExpandCollapse
});

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

<link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.flat.min.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<ul id="side-bar-panel">
</ul>

I found a solution for preventing expanding and collapsing when clicking on the checkbox here https://stackoverflow.com/a/31879672/4708150, but even though expanding and collapsing is disabled, the checkbox is still not being toggled.

Answer 1

I was able to find a workaround by just not using a checkbox. Instead of checkboxes I used a Kendo mobile switch and was able to get the switch to toggle and the panel bar not expand or collapse.

Below is the modified snippet. Items that changed are the panelBarTemplate, the functions inside of the dataBound configuration, and the css files for Kendo mobile were added.

const panelBarTemplate = `
    <div>
        <span>#: item.text #</span>
        <input type='checkbox'
            id=#: item.id #
            # var ItemCheckboxClass = "my-checkbox" #
            # if (item.items) { ItemCheckboxClass = "my-checkbox expandable-item" } #
            class="#= ItemCheckboxClass #"
            # if (item.isVisible) { #checked='checked'# } # />
    </div>
`;

var canExpandCollapse = true;

$('#side-bar-panel').kendoPanelBar({
  template: panelBarTemplate,
  dataSource: [{
    text: 'Main 1',
    id: 'Main1',
    isVisible: true,
    expanded: true,
    items: [{
      text: 'Sub 1',
      id: 'Sub1',
      isVisible: true
    }, {
      text: 'Sub 2',
      id: 'Sub2',
      isVisible: false
    }]
  }],
  dataBound: function() {
    //initialize mobile switch if not already initialized.
    $('.my-checkbox').each(function(index, item) {
      let mobileSwitch = $(item);
      let mobileSwitchData = mobileSwitch.data('kendoMobileSwitch');
      if (!mobileSwitchData) {
        mobileSwitch.kendoMobileSwitch();
      }
    });

    //disable expanding and collapsing when clicking on a mobile switch
    //that is attached to an expandable panel.
    $('.expandable-item').siblings('.k-switch-container').click(function() {
      canExpandCollapse = false;
    });
  },
  expand: cancelExpandCollapse,
  collapse: cancelExpandCollapse
});

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

<link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.flat.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.flat.mobile.min.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<ul id="side-bar-panel">
</ul>