TreeView Disable Nodes Programmatically

2 posts, 1 answers
  1. ICT
    ICT avatar
    4 posts
    Member since:
    Oct 2017

    Posted 19 Nov Link to this post

    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>

  2. Answer
    Dimitar
    Admin
    Dimitar avatar
    225 posts

    Posted 21 Nov Link to this post

    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.
Back to Top