Make only a certain level selectable

In DropDown tree how can I Make only a certain level selectable?

Example:

- France
     - Paris
     - Bordeaux 
- Italy
     - Roma
     - Firenze

I need that user can view the hierarchical structure but he can select only the cities (Paris, Roma etc..)


1 Reply 1 reply marked as answer

SP Sowmiya Padmanaban Syncfusion Team December 22, 2020 12:48 PM UTC

Hi Gabriele Guidi,  
  
Greetings from Syncfusion support. 
  
We have checked your requirement with DropdownTree component. Currently, we don’t have any direct event to achieve your requirement. We have used TreeView component as a popup element of DropdownTree component. 
  
You can achieve your requirement by binding the nodeSelecting event of TreeView component. nodeSelecting event will trigger before the selection of node. 
  
Please, refer the below code snippet. 
  
<div id='container' style="margin:0 auto; width:250px;"> 
    <ejs-dropdowntree id="treedata" created="created"> 
        <e-dropdowntree-fields dataSource="ViewBag.data" child="ViewBag.child" value="code" text="name"></e-dropdowntree-fields> 
    </ejs-dropdowntree> 
</div> 
<script> 
    function created() { 
        var dropdownTree = document.getElementById("treedata").ej2_instances[0]; 
        dropdownTree.treeObj.nodeSelecting = function (args) { 
            if (args.node.classList.contains("e-level-1")) { 
                args.cancel = true; 
            } 
        } 
    } 
</script> 
  
Please, refer the sample link below. 
  
  
Please, refer the below links for DropdownTree component. 
  
  
  
Please let us know, if you need any further assistance. 
  
Regards,  
Sowmiya.P 


Marked as answer
Loader.
Up arrow icon