Kendo UI Tree View Add text box and combo box inside tree view

0
votes

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.

Please refer below screenshot to understand exact requirement.

enter image description here.

2
javascriptjquerykendo-uikendo-treeview

2 Answers

3
votes

There is not a built-in functionality for that, I think. It is a custom behaviour so you'll have to make it by yourself. You can achieve it using templates. Since you didn't added any code, I did a demo myself:

Widget configuration:

  $("#treeview").kendoTreeView({
    dataSource: {
      data: [{ 
        text: "Item 1",
        value: 1,
        showCombo: false,
        checked: false,
        items: [{
          text: "Item 1.1",
          value: 2,
          showCombo: true,
            checked: false
        },{
          text: "Item 1.2",
          value: 3,
          showCombo: true,
            checked: true
        }]
      }]
    },
    checkboxes: true,
    template: kendo.template($("#item-template").html())
  });

  $("#treeview")
    .on("change", "input.k-checkbox", function() {
        var $select = $(this).closest("div").find("select");

        if ($select.length > 0) {
        $select[($(this).is(":checked") ? "show" : "hide")]();
      }
    });

Template:

<script id="item-template" type="text/x-kendo-template">
# if (data.item.showCombo) { #
    #= data.item.text #
    <select # if (!data.item.checked) { # #="style='display:none'"# # } #>
    <option></option>
    <option>Mechanical Engineering</option>
    <option>Chemical Engineering</option>
    <option>Electrical Engineering</option>
  </select>
# } else { #
    #= data.item.text #
# } #
</script>

I hope it helps.

Demo

0
votes

You can use the template configuration of the Kendo Options object like DontVoteMeDown suggested. Here's a solution that better fits your requirements: Add another data entry to the tree nodes that require it:

{
   text: "Item 1.1",
    value: 2,
    checked: false,
    extraOptions: ["", "Electrical Engineer", "Software Engineer"] // <-- Like this
}

Then in the template you use it like this:

<script id="item-template" type="text/x-kendo-template">
    # if (data.item.extraOptions) { #
        #= data.item.text #
        <select>
        # for (let index in data.item.extraOptions) { #
            # if (index == +index) { #
                <option>#= data.item.extraOptions[index] #</option>
            # } #
        # } #
        </select>
    # } else { #
        #= data.item.text #
    # } #
</script>

You can see a demo on Plunker.