This is a migrated thread and some comments may be shown as answers.

Treeview created by template is not showing checkboxes

3 Answers 397 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
Ian asked on 03 Jul 2020, 06:29 PM

 

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?

3 Answers, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 07 Jul 2020, 12:37 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Ian
Top achievements
Rank 1
answered on 07 Jul 2020, 04:35 PM

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? 

0
Aleksandar
Telerik team
answered on 09 Jul 2020, 10:07 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
TreeView
Asked by
Ian
Top achievements
Rank 1
Answers by
Aleksandar
Telerik team
Ian
Top achievements
Rank 1
Share this question
or