Я пытаюсь создать панель с несколькими расширяемыми параметрами с флажками на каждом уровне. Проблема, с которой я сталкиваюсь, заключается в том, что если вы нажмете флажок, который является частью расширяемой панели, флажок не переключается. Ниже приведен упрощенный пример, показывающий проблему. В приведенном ниже примере невозможно установить флажок для 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>
Я нашел решение для предотвращения расширения и свертывания при установке флажка здесь https://stackoverflow.com/a/31879672/4708150, но даже если раскрытие и свертывание отключены, флажок по-прежнему не переключается.