Как вы переключаете флажок на панели Kendo UI PanelBar, который может расширяться или сворачиваться?

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


checkbox kendo-ui kendo-panelbar
person TJ Rockefeller    schedule 08.11.2017    source источник
comment
Ну мой друг. Иногда кендо так отстойно. Я пробовал что-то здесь, но не смог добиться того, что вы хотите. То, что делает этот виджет, настолько странно, что я не мог понять, что там происходит на самом деле. Не удалось сделать это ни с помощью пользовательского события click на входе, ни с css z-index. Ничего. Я предлагаю вам опубликовать это на их форумах, и пусть они занимаются своими собственными делами.   -  person DontVoteMeDown    schedule 08.11.2017
comment
@DontVoteMeDown Спасибо за предложение, но я использую Kendo UI Core, и на их форумах написано: «Вы можете участвовать в этих форумах, только если у вас есть пробная или коммерческая лицензия, и что вопросы сообщества можно направлять в kendo-ui». Категория переполнения стека. Итак, учитывая, что у меня нет лицензии на кендо-уи, на данный момент это самое подходящее место, чтобы задать этот вопрос.   -  person TJ Rockefeller    schedule 08.11.2017

Ответы (1)


arrow_upward
0
arrow_downward

Я смог найти обходной путь, просто не используя флажок. Вместо флажков я использовал мобильный переключатель Kendo и смог заставить переключатель переключаться, а панель панели не расширяться и не сворачиваться.

Ниже приведен измененный фрагмент. Изменились элементы panelBarTemplate, функции внутри конфигурации dataBound, а также были добавлены файлы css для мобильных устройств Kendo.

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>

person TJ Rockefeller    schedule 14.11.2017