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.

Well my friend. Sometimes kendo sucks so much. I have tried something here but could not achieve what you want. It's so wierd what that widget does, that I could no realize what really happens there. Could not do it with a custom click event in the input neither with css z-index. Nothing. I suggest you to post it in their forums and let they handle their own bs. — DontVoteMeDown, Nov 08 '17 at 19:55
@DontVoteMeDown Thanks for the suggestion, but I am using Kendo UI Core, and on their forums it says, "You can participate in these forums only if you have a trial or commercial license", and that "Community questions can be directed to the "kendo-ui" StackOverflow category". So, given that I don't have a license with kendo-ui, for now this is the most appropriate place to be asking this question. — TJ Rockefeller, Nov 08 '17 at 20:51

score 0 · Accepted Answer · answered Nov 14 '17 at 18:16

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>

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

1 Answers1