Изменить имя узла Kendo TreeView с помощью Javascript - я не вижу, как это сделать

Я хочу изменить имя родительского узла, который я выбираю

  1. Я знаю, как добавить новый родительский узел с добавлением JavaScript

    var selectedNode = treeview.select();
treeview.append({ ReportGroupName: $("#addNodeText").val()

  2. Я знаю, как отобразить выбранный узел в текстовом поле

     $("#groupNameSelected").val(nodeName);

    - который называется с select: onSelect,

Тем не менее, я хочу изменить текст узла

Я гуглил и смотрел на API, я хочу чистый javascript или jquery способ просто обновить древовидное представление

Я настраивал код так

var treeview = $("#treeview").data("kendoTreeView");
var selected = treeview.select(), item = treeview.dataItem(selected);

if (item) {
   console.log('Selected item: ' + item.ReportGroupName + ' : ' + item.Id + ' (uid: ' + item.uid + ')');
}

Но как мне просто изменить текст выбранного узла в виде дерева?

Обновить:

Я нашел этот код на форуме Telerik.
Это действительно меняет текст, но ПОСЛЕ того, как я пытаюсь записать данные в виде дерева

 console.log(mydatasource.data());  // i expect this to change as adding nodes does update this ...



function refreshTreeNode(data)
{
    var currentText = $("#treeview").data("kendoTreeView").select().find('span.k-in').first().text();
    var node = $("#treeview").data("kendoTreeView").select().find('span.k-in').first();
    var nodeSpan = $("#treeview").data("kendoTreeView").select().find('span.k-in > span.k-sprite').first();
    node.text('');
    node.append(nodeSpan);
    node.append(data);
}

Изменения в данных не происходят в данных древовидной структуры, только в пользовательском интерфейсе, который я вижу, это изменение. Зачем?

Источник

1 ответ

Решение

Причина, по которой он только изменяет пользовательский интерфейс, заключается в том, что данные, хранящиеся в источнике данных, не изменяются.

Вместо этого лучшее решение зависит от того, что вы знаете о данных, а именно:

  1. Источник данных (вам нужно иметь доступ к источнику данных, чтобы использовать datasource.get() и set())
  2. Идентификатор записи (вы можете использовать datasource.get(id) для получения данных из источника данных, если вы знаете идентификатор)
  3. Uid записи (если вы этого не сделаете, вы можете использовать свойство uid, чтобы увидеть их, попробуйте inspect element)

Инструкция для примера ниже:

  1. Развернуть все узлы
  2. Выберите любой узел
  3. Введите имя для замены на
  4. Нажмите кнопку "Изменить имя"
  5. Чтобы увидеть обновление в источнике данных Нажмите кнопку "Проверить источник данных" и откройте консоль, после чего вы сможете найти ее там. 

<!DOCTYPE html>
<html>

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

  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css" />
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.silver.min.css" />
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css" />

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>

<body>

  <div id="treeview"></div>
  <input type="text" id="changeNameTo"></input>
  <button id="changeNameNow">Change Name</button>
  <button id="checkDataSource">Check Datasource Data on console</button>
  <script>
    var dataSource = new kendo.data.HierarchicalDataSource({
      transport: {
        read: {
          url: "http://demos.telerik.com/kendo-ui/service/Employees",
          dataType: "jsonp"
        }
      },
      schema: {
        model: {
          id: "EmployeeId",
          hasChildren: "HasEmployees"
        }
      }
    });

    $("#treeview").kendoTreeView({
      dataSource: dataSource,
      dataTextField: "FullName"
    });


    $("#changeNameNow").on("click", function() {
      //get the data from datasource using id (if you know the id)
      //dataSource.get(2).set("FullName",$("#changeNameTo").val());

      //if you don't, try utilize data-uid
      dataSource.getByUid($(".k-state-selected").parent().parent().attr("data-uid")).set("FullName", $("#changeNameTo").val());
    });

    $("#checkDataSource").on("click", function() {
      console.log(dataSource.data());
    });
  </script>
</body>

</html>

Источник
Другие вопросы по тегам