Ej2 DropDownTree: How to disable selection of one dropdowntree item based on value

[ISMAIL HAMZAH]

Hello,

How to disable selection of one dropdowntree item based on value?

note:

I already have what value to disable the selection, but did not know how to do it. I imagine that the process will be happen at dataBound event? or you guys can suggest better place for doing that and how of doing that. Basically, I want to prevent user to select it self for the parent. Example below: I'm editing Shoe, and want to prevent user from selecting Shoe as its parent:

Best regards,

Ismail

[Sharon Sanchez Selvaraj]

Hi Ismail, 

 

Greetings from Syncfusion support. 

 

We have checked with your requirement and suspect that the parent nodes must be disabled initially. You can achieve your requirement by passing the parent node id’s to disableNodes method of TreeView in dataBound event of Dropdown Tree component. You can make custom changes as per your requirement. 

 

Refer to the code snippet: 

 

  dataBound: function (args) { 

    var ddt = document.getElementById("checkbox").ej2_instances[0]; 

    for (var i = 0; i < args.data.length; i++) { 

        if (args.data[i].hasChild) { 

          var nodeId = args.data[i].id.toString(); 

          disableNodeId.push(nodeId); 

        } 

      } 

      (ddt as any).treeObj.disableNodes(disableNodeId); 

  }, 

 

 

Refer to the sample: 

 

https://stackblitz.com/edit/zt2of5?file=index.ts 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Sharon Sanchez S. 

[ISMAIL HAMZAH]

Hi Sharon,

Thank you for your help. Your suggestion by using disableNodes of treeObj solve my problem

Thank you,

Ismail

[Keerthana Rajendran]

Hi Ismail, 

Most welcome. We are glad to hear that the provided suggestions helped you. Please get back to us if you need any further assistance. 

Regards, 

Keerthana R. 

[Abhinay Maurya]

How to replicate this in Angular ?
Can we do it using the html depending upon some parameter ?

[Indhumathy Loganathan]

Hi Abhinay, 

 

You can disable the required child nodes of Dropdown Tree component just by setting e-disable class in the datasource using htmlAttributes for specific nodes. Check the below code snippet. 

 

  // Data source for Dropdown Tree component 

  public countries: Object[] = [ 

    { 

      id: 1, 

      name: 'Australia', 

      hasChild: true, 

      expanded: true, 

    }, 

    { id: 2, pid: 1, name: 'New South Wales' }, 

    { 

      id: 3, 

      pid: 1, 

      name: 'Victoria', 

      htmlAttributes: { class: 'e-disable' }, 

    }, 

    { id: 7, name: 'Brazil', hasChild: true }, 

    { 

      id: 8, 

      pid: 7, 

      name: 'Paraná', 

      htmlAttributes: { class: 'e-disable' }, 

    }, 

    { 

      id: 9, 

      pid: 7, 

      name: 'Ceará', 

      htmlAttributes: { class: 'e-disable' }, 

    }, 

 

Sample: https://stackblitz.com/edit/angular-tes8g6?file=app.component.ts 

 

Please check the sample and get back to us if you need any further assistance. 

 

Regards, 

Indhumathy L 

[Zeeshan Zahoor]

How to disable Parent in hierarchichal data in react JS.

For Example:

parent (disable)

>>parent (disable)

>> >> Parent (disable)

>> >> >> Child (Enable)

>> >> >> Child (Enable)

>> >> >> Child (Enable)

parent (disable)

>>child (enable)

>>child (enable) 

>>child (enable)

[Keerthana Rajendran]

Hi Zeeshan,

We have prepared a React sample to disable parent items of the Dropdown Tree component as per your request.

Refer to the following sample.

https://stackblitz.com/edit/react-kvrjvh?file=local-data.json

Regards,

Keerthana R.

[Ryan Allan]

I'm working with the dropdowntree in ASP.NET MVC and I am attempting to disable parent node selection and while I have checkboxes active. I have added a css style to hide the checkboxes for items I don't want selected, but if you click in very certain areas of the parent item, it still causes a select event and adds the item to the list of selected items. For example, if you inspect the elements and click in the padding area of the e-list-text, it will fire a selected event on the parent row and add it to the list. There are other areas you can click in to cause the same behavior, like the very end of the row. How can I stop this from happening??? This even occurs if you add the e-disable class to the top level li element (it looks disabled but you can still click in these areas to fire off the selected event). Here is a shot of my example, I have hidden the checkbox on the parent node and only the checkboxes show on the children. If you click in the areas I highlighted though, the parent node will be selected and added to the list.

[Vishwanathan Muruganantham]

Hi Ryan,

Greetings from Syncfusion support

We have reviewed your query and understand that the checkbox is being checked when clicking the padding area, even if the node is disabled. We have prepared a sample to disable the parent item, but we were unable to replicate the issue. The check action was properly prevented when clicking the node. If the issue still persists, please share a video demonstrating the issue along with the sample code. These details will help us provide a prompt solution. Please try to replicate issue in given sample.

Refer to the below code snippet for reference.

 

…

     <div class="control-section">

    <div class="control-wrapper">

        @Html.EJS().DropDownTree("treedata").Placeholder("Select a Item").ShowCheckBox(true).Fields(field =>

            field.Value("Id").ParentValue("Pid").Text("Name").Expanded("Expanded").HasChildren("HasChild").DataSource(Model)).DataBound("onDataBound").Render()

    </div>   

</div>

 

<script>

    function onDataBound(args) {

        var dropDownTreeObj = document.getElementById('treedata').ej2_instances[0];

        let disableNodeId = [];

        for (var i = 0; i < args.data.length; i++) {

            if (args.data[i].HasChild) {

                var nodeId = args.data[i].Id.toString();

                disableNodeId.push(nodeId);

            }

        }

        dropDownTreeObj.treeObj.disableNodes(disableNodeId);

    }

</script>

<style>

    .e-list-item.e-expanded .e-checkbox-wrapper{

        visibility: hidden;

    }

</style> 

….

 

Sample: attached as zip file.

Please check the sample and let us know if you need any further assistance.

Regards,
Vishwanathan

Attachment: Dropdowntree_d280895a.zip

[Ryan Allan]

I have tested your sample and it works as expected. The properties for my dropdown tree match the settings in the sample but somehow my code doesn't work the same. Clicking in the row does not automatically toggle the checkbox like the sample does, let me try and see what is conflicting.

[Ryan Allan]

I have diagnosed the issue. It is because I had an ItemTemplate set which was somehow overriding the click behavior of the whole row. Keep this in mind for future users who may run into this issue.

[Subalakshmi Ramachandran]

Hi Ryan,

 

Based on your description, the checkbox toggle functionality in the Dropdown Tree works only in specific areas when an ItemTemplate is used. This happens because the class .e-list-text is responsible for enabling the toggle functionality.

When an ItemTemplate is applied, we recommend adding the .e-list-text class to the element inside your ItemTemplate and applying width: 100% to ensure the entire row responds to click events for toggling the checkbox.

Refer to the below code:

[index.cshtml]

<style>

    .custom .e-list-text {

        width: 100%

    }

 

</style>

 

    …….    @Html.EJS().DropDownTree("ddt").ShowCheckBox(true).ItemTemplate("<div><span class=\"ename e-list-text\">${name}</span></div>").Render()

 

 

This ensures the entire row is clickable for toggling the checkbox even when using a custom ItemTemplate.

 

Let us know if you have any further queries.

 

Regards,
Suba R.