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

TreeView Disable Nodes Programmatically

1 Answer 254 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
ICT
Top achievements
Rank 1
ICT asked on 20 Nov 2017, 04:53 AM

Hi,

 

I am trying to work out how I can disable nodes in a TreeView based on whether the node is checked. For some reason I'm not able to retrieve the TreeView as such I am unable to iterate through the nodes and get the ones that are checked.

Here is my code:

Controller

public class HomeController : Controller
    {
        CalendarEventsEntities2 db = new CalendarEventsEntities2();
        
        private SchedulerMeetingService meetingService;

        public ActionResult SideNavMenu()
        {
            return View();
        }

     

}

View

<div class="demo-section k-content">
    @(Html.Kendo().TreeView()
        .Name("treeview")
        .DataTextField("Name")
        .DataUrlField("LinkURL")
        .Checkboxes(true)
       .HighlightPath(true)
        .DataSource(dataSource => dataSource
            .Read(read => read
                .Action("Menu", "Home")
                
            )
        
        )
    )
</div>
<script>
        $(document).ready(function() {

            
            var treeView = $("#treeview").data("kendoTreeView");
            var nodes = treeView.dataSource.view();
          
          for (var i = 0; i < nodes.length; i++) {
              alert('uuu');
            var node = nodes[i];

            //sets the parent node check property to true
            node.set("checked",true);


            if (node.checked) {
                

              if (node.hasChildren){

                var children = node.loaded() && node.children.data();

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

                  node.children.at(i).set("enabled", false);

                }

              } else {

                if (node.hasChildren) {

                  for (var i = 0; i < node.children.length; i++) {

                    node.children.at(i).set("enabled", true);

                  }
                }

              }

            }

          };

        });

</script>

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 21 Nov 2017, 04:15 PM
Hello,

There is an existing demo for the Kendo UI TreeView, where similar behavior to the one described is demonstrated:

The above implementation relies on the TreeView's check event, on which the state of the TreeView nodes is being preserved in a collection and then the output is being shown in a result div element below the widget. 

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
TreeView
Asked by
ICT
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or