Kendo UI tree view : how to add text box and combo box inside tree view

Question

5.00/5 (1 vote)

See more:

, +

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.

What I have tried:

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

Posted 13-Feb-17 23:15pm

NileshKRathod

Updated 16-Feb-17 9:49am

Add a Solution

Comments

Karthik_Mahalingam 14-Feb-17 5:57am

it would be better to build a custom control rather than digging kendo library to customize it.

Valery Possoz 16-Feb-17 15:51pm

You have a point but Kendo is pretty nice when used correctly. See my answer below.

Karthik_Mahalingam 16-Feb-17 22:20pm

you have got a solution.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Valery Possoz · Accepted Answer · 2017-02-16T09:49:00

Hello,

It is pretty simple, just use the checkbox template, a bit of css and javascript.
I have uploaded a sample here:
Kendo UI® Dojo by Progress[^]

First in CSS define two class to show or hide the box:

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

Then in the script loading the tree add a little 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>

Tada!

Valery