NileshKRathod Ответов: 1

Kendo UI tree view : как добавить текстовое поле и поле со списком внутри древовидного представления

We have a kendo tree-view already implemented in our web application. In our new requirement we have to add some additional controls inside tree view.

>>    Scenario 1: Once user select a check box from tree view one textbox should be shown near to selected checkbox (based on some business logic). The required data for control will be there in JS object.

>>    Scenario 2: Once user select a check box from tree view one combo box should be shown near to selected checkbox (based on some business logic). The required data for control will be there in JS object. These controls should be created at any level of tree view (based on certain business logic which is already there in code)

I am looking for an inbuilt functionality in kendo-ui where I can add textbox or combo-box inside the tree-view control.


Что я уже пробовал:

I go through a lot of threads available on kendo site but not get any similar implementation.

Karthik_Mahalingam

было бы лучше создать пользовательский элемент управления, а не копаться в библиотеке кендо, чтобы настроить его.

Valery Possoz

Вы правы, но кендо довольно приятно, когда используется правильно. См. мой ответ ниже.

Karthik_Mahalingam

у вас есть решение.

1 Ответов

Рейтинг:
4

Valery Possoz

Привет,

Это довольно просто, просто используйте шаблон checkbox, немного css и javascript.
Я загрузил образец здесь:
Kendo UI® Dojo by Progress[^]

Сначала в CSS определите два класса для отображения или скрытия поля:

<style type="text/css">
.txtBoxHidden{
  display:none;
}
.txtBoxVisible{
  display:inline;
}
</style>


Затем в скрипт загрузки дерева добавьте немного javaScript:

<script>
  
$("#treeview").kendoTreeView({
  checkboxes: {
    template: "<input type='checkbox' name='checkedFiles[#= item.id #]' value='true' id='#= item.id #' /><input type='text' class='txtBoxHidden' id='txtEditBox#= item.id #'/>"
  },
  dataSource: [
    { id: 1, text: "foo", items: [
      { id: 2, text: "bar" }
    ] }
  ]
});
  
$(':checkbox').change(function() {
    var id = 'txtEditBox' + $(this).attr('id');
    var className = document.getElementById(id).className; 
    if (className == 'txtBoxHidden') {
	  	document.getElementById(id).className = 'txtBoxVisible';
    }
    else {
	  	document.getElementById(id).className = 'txtBoxHidden';
    }
});
  
</script>


Тада!

Валери

NileshKRathod

Спасибо, что дали мне представление об этом. Я буду реализовывать его на основе этой идеи.