Treeview created by template is not showing checkboxes

[Ian]

 

I have a page where I am adding multiple treeviews dynamically, using a kendo template.

They are created in a loop from a javascript object.

I build the structure (ul, li, etc.), then after creating the multiple tress, run the $(...).kendoTreeView() with checkbox options.

The treeviews are formatted but as single select and not with checkboxes.

I have created an example (https://dojo.telerik.com/otelaBEL/2).

What is going wrong?

[Aleksandar]

Hi Ian,

When initializing the TreeView from existing HTML you need to have the inputs for the checkboxes rendered in the existing HTML as well.

I have modified the provided example by adding an input for the checkboxes in the template:

<script id="template" type="text/x-kendo-template">
    <div class="search-facet"  id="sf_#= kendo.toString(replaceString(name)) #">
    	<div>#=name #</div>
    	<div class="container">
      	<ul id="tv_#= kendo.toString(replaceString(name)) #" class="search-facet-tree">
        	<li><input type='checkbox' name='cbx_All' value='true' />All
          	<ul>
            #for (var i=0;i<entries.length;i++){#
            	<li><input type='checkbox' name='cbx_[#= entries[i].html #]' value='true' /><span class="search-facet-option">#= entries[i].html #</span><span class="search-facet-option-count">  (#= entries[i].count #)</span></li>
              #} #
            </ul>
        	</li>
        </ul>
    	</div>
    </div>
</script>

You can then initialize the TreeView instances with the checkChildren functionality enabled:

$(".search-facet-tree").kendoTreeView({
      checkboxes: {
        checkChildren:true
      }
    });

Here is the updated dojo for you to review.

Regards,
Aleksandar
Progress Telerik

[Ian]

Thanks, that seems to have fixed the first problem. But now when I run an onChecked event the id of the checked node is undefined.

I have tried setting id properties on each object, am I missing something else? 

[Aleksandar]

Hello Ian,

I am not entirely sure I understand your scenario. Please bear with me while I explain. 

If the TreeView is bound to a remote dataSource the id is defined in the dataSource.schema configuration.

homogeneous = new kendo.data.HierarchicalDataSource({
          transport: {
            read: {
              url: serviceRoot + "/Employees",
              dataType: "jsonp"
            }
          },
          schema: {
            model: {
              id: "EmployeeId",
              hasChildren: "HasEmployees"
            }
          }
        });

Then, in the check event handler,  when you get a reference to checked node and the corresponding the dataItem you can obtain information to of the id:

check:function(e){
            console.log(e.node);
            var dataItem = e.sender.dataItem(e.node);
            console.log(dataItem)
          }

Here is a dojo, demonstrating the above.

In the scenario with the template, the Treeview is initialized from static HTML thus there is no dataSource defined and no id set. You can still get a reference to the checked node and the corresponding dataItem and its fields, as demonstrated in this dojo. In both scenarios, each node has a unique uid assigned that is also available.

I am not sure I understand why you need to use a template to render HTML structure of the TreeView and then initialize the TreeView. If you have an endpoint returning homogeneous data you can use this data directly via the dataSource, as demonstrated in the Data Binding section of the documentation and in the Remote binding demo.

If the above is not helpful please elaborate more on the scenario you have so I can propose a possible solution

Regards,
Aleksandar
Progress Telerik