CODEWITHSUNDEEP
jqueryasp.net-mvc-4kendo-treeview
Katy
Katy

Reputation: 296

How to check the checkbox in kendo treeview initially based on a field of it's datasource

when I'm editing my kendo treeview, I need to show some of nodes checked and the others unchecked, so I want to set the state of check boxes based on a field of data source(which is called: "IsSelected") here is my code:

{    
    <div id="treeview"></div>
}

<script type="text/javascript">


    $(function () {
        var dataSource = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: "@Url.Action("GetItems", "myController")",
                    dataType: "json",
                    contentType: 'application/json; charset=utf-8',
                    traditional: true,
                    type: 'GET'
                }
            },
            schema: {
                model: {
                    id: "OrganizationChartId",
                    hasChildren: "HasChildren",
                    checked: "IsSelected"
                }
            }
        });

        $("#treeview").kendoTreeView({
            template: kendo.template($("#treeview-template").html()),
            checkboxes: {
                checkChildren: false
            },
            dataSource: dataSource,
            dataTextField: "OrganizationChartDesc",
            select: function (e) { console.log("Selecting: " + this.text(e.node)); },
            check: function (e) { console.log("Checkbox changed :: " + this.text(e.node)); },
            change: function (e) { console.log("Selection changed"); },
            collapse: function (e) { console.log("Collapsing " + this.text(e.node)); },
            expand: function (e) { console.log("Expanding " + this.text(e.node)); }
        });
    });
</script>

but unfortunately it doesn't work and checked: "IsSelected" makes all nodes selected. please guide me for fixing that.

Upvotes: 2

Views: 2107

Answers (1)

Iraj
Iraj

Reputation: 1522

I suggest you to use the same solution just like as the code below:

in your view file :

@using Kendo.Mvc.UI

<div class="k-rtl">

 @(Html.Kendo().TreeView()
 .Name("treeview")
 .BindTo((IEnumerable<TreeViewItemModel>)ViewBag.kendoTreeViewDataSource)
 .ExpandAll(false).LoadOnDemand(false)
 .Events(c => c.Change("TreeViewNodeSelected"))
 .
 .
 .
)

</div>

And in your action method in controller you should set "ViewBag.kendoTreeViewDataSource" like this :

public ActionResult IndexView()
{
  ViewBag.kendoTreeViewDataSource = GetDataSource();
  return View();
}

private IEnumerable<TreeViewItemModel> GetDataSource()
{
    var result = new List<TreeViewItemModel>();

    var yourDataList = .... //for exapmle select data from Database and put into a List of your class

   //you should convert your data into result
   // you can use linq query for mapping 
   result =   yourDataList.select(c=>new TreeViewItemModel{
        Id = c.OrganizationChartId ,
        Text = c.OrganizationChartDesc,
        Items = ... // this is for child node , you can use a recursive function for getting child value from your DataList

        Checked = IsSelected , // true for checked checkbox and false for unchecked
   }).ToList();    
}

Upvotes: 2

Related Questions