Kendo TreeList with checkboxes

Question

I'm using a Kendo UI TreeList control and need each parent node to be a checkbox. I have searched on how to use checkboxes in the TreeList but haven't found any examples yet. Does anyone know how to do this or if it is even possible?

Answer 1

i worked in treelist kendo UI and i have bind the parent id and also create another column name as "manualparentid" which is also parentid..might be i'm doing wrong but the you can put condition on template

//Created Separate Class
public class TreePermission
{
   public int menuid { get; set; }
   public int parentmenuid { get; set; }
   public string menuname { get; set; }
   public bool isadd { get; set; } 
   public int manualparentid { get; set; }
}


 Html.Kendo().TreeList<TSBBAL.BAL.TreePermission>()
.Name("GridRolePermissions")
.Columns(colums =>
{
    colums.Add().Field(e => e.menuname).Width(150).Title("Menu Name");
    colums.Add().Field(e => e.isadd).Width(100).Title("Add").TemplateId("addtemplate"); 
}).DataSource(data => data.AutoSync(false)
    .ServerOperation(true)
    .Model(m =>
    {
        m.Id(f => f.menuid);
        m.ParentId(f => f.parentmenuid);
        m.Field(f => f.menuname);
        m.Field(f => f.isadd);  
        m.Expanded(true);
    }).Read(read => read.Action("MenuList", "User"))
)

• created template addtemplate

    <script id="addtemplate" type="text/x-kendo-template"> <div class="col-md-6"> # if(manualparentid !=0) {# <input type="checkbox" onclick="CheckThePermission(#=menuid #,#=manualparentid #,'add')" id="chkadd_#=menuid #" mid="#=menuid #" pid="add_#=manualparentid #" name="chkadd" #= isadd ? checked='checked' : '' # /> #} else {# <input type="checkbox" onclick="CheckChildPermission(#=menuid #,'add')" id="chkadd_#=menuid #" mid="#=menuid #" pid="add_#=manualparentid #" name="chkadd" #= isadd ? checked='checked' : '' # /> #}# </div> 

    <script> function CheckThePermission(id,pid,obj) { //you will get the parent id } </script> 

Hope this helps...

Answer 2

You can replaces arrow (sprite background) with checkbox using CSS.

.k-i-expand, .k-plus, .k-plus-disabled {
   background: url(http://i.stack.imgur.com/zQtSf.png) top left !important;
}

.k-i-collapse, .k-minus, .k-minus-disabled {
   background: url(http://i.stack.imgur.com/5tDmY.png) top left !important;
}

Answer 3

Checkboxes on only the parents is easily done through templating. Here is an example template:

<script id="treelist-checkbox-template" type="text/x-kendo-template">
    # if ( hasChildren ) { #
        <input type='checkbox' name='checkedFiles[#= id #]' value='true' />
    # } #
</script>

Then use the template like this:

$("#treelist").kendoTreeList({
    dataSource: dataSource,
    height: 540,
    columns: [
        { template: kendo.template($("#treelist-checkbox-template").html()), width: 32 },
        { field: "Position", expandable: true },
        { field: "Name" },
        { field: "Phone" }
    ],
    // Other options here
});

Here is a working Dojo example of this: http://dojo.telerik.com/@mrtaunus/eXiVO

Answer 4

i'm using KendoTreeList Check boxes for Policies management kindly see my example i hope to be useful

Policy Model

  public class PolicyModel
{
    public PolicyModel(){}
    public string PolicyId { get; set; }
    public string PolicyName { get; set; }
    public string ParentID{ get; set; }
 }

PolicyTreeListModel

 public class PolicyTreeListModel
{
    public PolicyTreeListModel(){}
    public string id { get; set; }
    public string text { get; set; }
    public List<PolicyTreeListModel> items { get; set; }
    public bool expanded { get; set; }
 }

Policy webAPI Controller

    public class PoliciesController : ApiController
    {
        public IEnumerable<PolicyTreeListModel> GetPoliciesTree()
        {
            List<PolicyTreeListModel> ToReturen = new List<PolicyTreeListModel>();

            List<PolicyModel> DataFromDB = new List<PolicyModel>();
            using (var db = DBManager.CreateNewContext())
            {
                var data = db.Policies.ToList();
                foreach (var item in data)
                {
                    DataFromDB.Add(new PolicyModel() { PolicyId = item.PolicyId, PID = item.PID });
                }
            }
            foreach (var item in DataFromDB.Where(e => e.PID == null))
            {
                toreturen.Add(new PolicyTreeListModel()
                {
                    id = item.PolicyId,
                    text = item.PolicyName,
                    expanded = true,
                    items = GetSubItems(DataFromDB.ToList(), new List<PolicyTreeListModel>(), item.PolicyId)
                });
            }

            return ToReturen.OrderByDescending(e => e.text).ToList();
        }

     public List<PolicyTreeListModel> GetSubItems(List<PolicyModel> OrginalData,List<PolicyTreeListModel> SubItems,string PID)
        {
                foreach (var item in OrginalData.Where(e=>e.PID==PID))
                {
                    if (!SubItems.Any(e => e.id == item.PolicyId))
                        SubItems.Add(new PolicyTreeListModel() { id = item.PolicyId, text = item.PolicyName, expanded = true, items = GetItems(OrginalData, new List<Models.PolicyTreeListModel>(),item.PolicyId)});
                }
                return SubItems;
        }
    }

HTML Code

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link rel="stylesheet" href="styles/kendo.common.min.css" />
        <link rel="stylesheet" href="styles/kendo.default.min.css" />
        <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
        <link rel="stylesheet" href="styles/bootstrap.min.css" />
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
    </head>
    <body>
        <div class="col-lg-12">
            <div class="form-group" style="width:100%">
                <div class="form-inline" style="background-color: #428bca;">
                    <input class="k-textbox" placeholder="Search..." style="font-size:smaller;width:230px;margin-left:2px" id="searchTree" />
                    <label style="font-size:smaller;padding:2px;margin:2px;color:white"><input class="checkbox" style="font-size:smaller;padding:2px;margin:2px" id="chbAll" type="checkbox" value="" /><b>Select All</b></label>
                    <label style="font-size:smaller;padding:2px;margin:2px;color:white"><input class="checkbox" style="font-size:smaller;padding:2px;margin:2px" id="expandAll" type="checkbox" value="" /><b>Expand All</b></label>
                    <button class="btn btn-success" id="savePolicies" style="padding:5px;margin:2px;width:100px;font-family:sans-serif"><i class="fa fa-floppy-o" style="font-size:medium"> Save</i></button>
                    <button class="btn btn-default" id="clearPolicoies" style="padding:5px;margin:2px;width:100px;font-family:sans-serif"><i class="fa fa-eraser" style="font-size:medium;"> Clear</i></button>
                </div>
                <div id="policiestree" style="height:520px;width:100%;background-color: gainsboro;font-size:small;text-align:left;font-weight:bold"></div>
            </div>
        </div>
 <script>
            $(document).ready(function() {
     $("#policiestree").kendoTreeView({
                checkboxes: { checkChildren: true },
                dataSource: [],
            });
            $("#searchTree").on("input", function () {
                var query = this.value.toLowerCase();
                var dataSource = $("#policiestree").data("kendoTreeView").dataSource;
                filter(dataSource, query);
            });
            $("#chbAll").click(function () {
                chbAllOnChange();
            });
            $("#expandAll").attr("checked", true);
            $("#expandAll").click(function () {
                var treeView = $("#policiestree").data("kendoTreeView");
                if (this.checked) { treeView.expand(".k-item"); }
                else { treeView.collapse(".k-item"); }
            });
            function filter(dataSource, query) {
                var hasVisibleChildren = false;
                var data = dataSource instanceof kendo.data.HierarchicalDataSource && dataSource.data();
                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    var text = item.text.toLowerCase();
                    var itemVisible =
                        query === true // parent already matches
                        || query === "" // query is empty
                        || text.indexOf(query) >= 0; // item text matches query
                    var anyVisibleChildren = filter(item.children, itemVisible || query); // pass true if parent matches
                    hasVisibleChildren = hasVisibleChildren || anyVisibleChildren || itemVisible;
                    item.hidden = !itemVisible && !anyVisibleChildren;
                }
                if (data) {
                    // re-apply filter on children
                    dataSource.filter({ field: "hidden", operator: "neq", value: true });
                }
                return hasVisibleChildren;
            }
            function checkUncheckAllNodes(nodes, checked) {
                for (var i = 0; i < nodes.length; i++) {
                    nodes[i].set("checked", checked);

                    if (nodes[i].hasChildren) {
                        checkUncheckAllNodes(nodes[i].children.view(), checked);
                    }
                }
            }
            function chbAllOnChange() {
                var checkedNodes = [];
                var treeView = $("#policiestree").data("kendoTreeView");
                var isAllChecked = $('#chbAll').prop("checked");
                checkUncheckAllNodes(treeView.dataSource.view(), isAllChecked)
            }
            function GetPoliciesTree() {
                $.ajax({
                    url: "/api/Policies/GetPoliciesTree",
                    success: function (result) {
                        $("#policiestree").data("kendoTreeView").dataSource.data(result);
                    }
                });
            }
});
 </script>
    </body>
    </html>