Флажок Kendo Treeview отмечен вместе с выбранным узлом - PullRequest
Новая
       65

Флажок Kendo Treeview отмечен вместе с выбранным узлом

0 голосов
/ 09 апреля 2020

Мне удается установить только флажок, можно установить только один раз, но мне нужна помощь, чтобы найти решение, если флажок установлен, также будет выбран узел k-state-selected. Благодарим Вас за помощь!

Здесь я приведу простую демонстрацию

1 Ответ

0 голосов
/ 10 апреля 2020

Проверьте это: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>
<body>
  
    <div id="treeview"></div>
    <script>
        $("#treeview").kendoTreeView({
            checkboxes: true,
            check: function(e){
              var dataItem = this.dataItem(e.node);
              var rootNodes = $("#treeview").getKendoTreeView().dataSource.data();
              traverse(rootNodes, function(node) {
                if (node != dataItem) {
                  node.set("checked", false);
                  //node.select($());
                  //node.select().find("span.k-state-selected")
                }
              });
            },
          	select: function(e) {
              var dataItem = this.dataItem(e.node);
              dataItem.checked = true;
              $(e.node).find('input').prop('checked', 'checked');
              this.trigger('check', e);
            },
          dataSource: [ { id: 3, text: "about.html" },
                       { id: 4, text: "index.html"},
                       { id: 5, text: "logo.png"},                        
                       { id: 7, text: "mockup.jpg" },
                       { id: 8, text: "Research.pdf"},
                       { id: 10, text: "February.pdf" },
                       { id: 11, text: "March.pdf" },
                       { id: 12, text: "April.pdf" }]
        });
      
        function traverse(nodes, callback) {
          for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            var children = node.hasChildren && node.children.data();
            callback(node);
            if (children) {
              traverse(children, callback);
            }
          }
        }
      
      	$("#treeview").on('change', 'input', function() {
          let $li = $(this).closest('li');
          $("#treeview").data('kendoTreeView').select($li);
        });
    </script>
</body>
</html>

Я добавил следующий код: 

// To the grid options
select: function(e) {
    var dataItem = this.dataItem(e.node);
    dataItem.checked = true;
    $(e.node).find('input').prop('checked', 'checked');
    this.trigger('check', e);
},

// After grid initialization
$("#treeview").on('change', 'input', function() {
    let $li = $(this).closest('li');
    $("#treeview").data('kendoTreeView').select($li);
});

Первый фрагмент кода гарантирует, что при выборе элемента, нажав на его ярлык, флажок будет проверил также. Это событие также вызывает событие check, чтобы снять отметки с других элементов.

Последнее гарантирует, что измененный флажок вызовет событие select, выполнив то же действие, что и выше.

Надеюсь это помогает.

...