treeview checked by code

8 posts, 1 answers
  1. Lihong
    Lihong avatar
    20 posts
    Member since:
    Feb 2011

    Posted 23 Feb Link to this post

    Hello,

    I'm using Kendo.UI [2016.1.217.commercial].

    And, I encountered a problem about TreeView. I want set some data items checked by code, these data items did not have expanded. What should I do?

    I used " dataItem.set('checked', true) ", but it won't work.

  2. Lihong
    Lihong avatar
    20 posts
    Member since:
    Feb 2011

    Posted 24 Feb in reply to Lihong Link to this post

    Any update?
  3. Kendo UI is VS 2017 Ready
  4. Lihong
    Lihong avatar
    20 posts
    Member since:
    Feb 2011

    Posted 24 Feb in reply to Lihong Link to this post

    Any update/suggestion for this question?

    For example, there are two data items, they have same parent node, and they haven't expanded, I want to checked them by code.

    dataItem1.set('checked', true);

    dataItem2.set('checked', true);

    But, only dataItem2 is checked on screen. And if I expand dataItem2 by click, all checked is gone.

    Could you help me?

  5. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 25 Feb Link to this post

    Hi,

    As long as the children are already loaded, the checked state should be preserved even if the parent is not expanded. Could you check this example and let me know if I am missing something?

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Lihong
    Lihong avatar
    20 posts
    Member since:
    Feb 2011

    Posted 29 Feb in reply to Daniel Link to this post

    Hi,

    I had made a demo here "http://dojo.telerik.com/UVOBa/5".

    I'm using "template" of "checkboxes".

    After I expanded root "Andrew Fuller" by code, and I checked "S14" by code, without expand it. Then I expanded "S14" by click, its checked state was gone, and checked state of its children were also gone. Why?

    var members = [{
              EmployeeId: 1,
              FullName: "Andrew Fuller",
              HasEmployees: true,
              Employees: [{
              EmployeeId: 11,
              FullName: "Nancy Davollo",
              HasEmployees: false
            }, {
              EmployeeId: 12,
              FullName: "Janet Leverling",
              HasEmployees: false
            }, {
              EmployeeId: 13,
              FullName: "Margaret Peacock",
              HasEmployees: false
            }, {
              EmployeeId: 14,
              FullName: "S14",
              HasEmployees: true,
                Employees: [{
                  EmployeeId: 141,
              FullName: "M141",
              HasEmployees: false
                }, {
                  EmployeeId: 142,
              FullName: "R142",
              HasEmployees: false
                }, {
                  EmployeeId: 142,
              FullName: "A142",
              HasEmployees: false
                }]
            }, {
              EmployeeId: 15,
              FullName: "Steven Buchanan",
              HasEmployees: true,
                Employees: [{
                  EmployeeId: 151,
              FullName: "Michael Suyama",
              HasEmployees: false
                }, {
                  EmployeeId: 152,
              FullName: "Robert King",
              HasEmployees: false
                }, {
                  EmployeeId: 152,
              FullName: "Anne Dodsworth",
              HasEmployees: false
                }]
            }, {
              EmployeeId: 16,
              FullName: "Laura Callahan",
              HasEmployees: false
              }]
            }];
            
            
            var homogeneous = new kendo.data.HierarchicalDataSource({
              data: members,
              schema: {
                model: {
                  id: "EmployeeId",
                  hasChildren: "HasEmployees",
                  children: "Employees"
                }
              }
            });

            var treeview = $("#treeview").kendoTreeView({
              animation: false,
              dataSource: homogeneous,
              dataTextField: "FullName",
              checkboxes: {
                checkChildren: true,
                template: function () {
                  return "<input type='checkbox'/>";
                }
              }
            }).getKendoTreeView();
            
            var dataSource = treeview.dataSource;
            var node = dataSource.get("1");
            treeview.expand(treeview.findByUid(node.uid));
            node = dataSource.get("14");
            node.set("checked", true);
            node = dataSource.get("15");
            node.set("checked", true);

  7. Lihong
    Lihong avatar
    20 posts
    Member since:
    Feb 2011

    Posted 29 Feb in reply to Lihong Link to this post

    Sorry, the demo link is "http://dojo.telerik.com/UVOBa/4"
  8. Lihong
    Lihong avatar
    20 posts
    Member since:
    Feb 2011

    Posted 29 Feb in reply to Lihong Link to this post

    Thank you.

    I had resolved by myself. I set "loadOnDemand" to "false" for option. Because my "HierarchicalDataSource" is array.

  9. Answer
    Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 02 Mar Link to this post

    Hello again,

    The checkbox template should be based on the items checked field in order for the checked state to be shown correctly(updated example).

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready