CODEWITHSUNDEEP
asp.net-mvckendo-uitreeview
Massey
Massey

Reputation: 1125

How to dynamically change kendo UI treeview datasource

I have a kendo ui treeview and a dropdownbox on my asp.net mvc page. The dropdown box can have two values. Depending upon which one has been chosen, I want to change the datasource url, which is a method in a controller. The data type and structure of data from both the url will be the same. Essentially I want to change url: '@Url.Content("~/Document/GetMyDocument")' dynamically. The following is my treeview code:

<script>
    $("#treeview").kendoTreeView({
    checkboxes: {
    checkChildren: true,

},
dataSource: {
transport: {
    read: {
        url: '@Url.Content("~/Document/GetMyDocument")',
    type: "post",
    dataType: "json"
    }
},
schema: {
    model: {
    text: "Name",
    spriteCssClass: "fa fa-folder",
    children: "Files"
    }
}
},
    dataTextField: ["Name", "FileName"],
    dataValueField: ["id"],
    check: onCheck
});

Upvotes: 0

Views: 1255

Answers (1)

Petur Subev
Petur Subev

Reputation: 20223

You can specify the URL of the treeview dataSource as function

transport: {
  read: {
    url: function (e) {  }
  }
}

You can then listen for the change event of the DropDownList and call

$('#treeview').data('kendoTreeView').dataSource.read();

Inside the url function you can get the value of the DropDownList and resolve the url dynamically:

var ddl = $('#myDDl').data('kendoDropDownList');
var value = ddl.value();
return value == "someValue" ? "/foo/bar": "/bar/baz";

Upvotes: 0

Related Questions