Load a TreeView from a DropDownList onChange event

[Davi Rodrigues]

Morning folks!

What I'm trying to do is...when I change the item of the dropdownlist, I'll need to REload the TreeView with the selectedValue of the dropDownList.

In my case, as I'm a new kendoui user, I'm not going on the right track, for sure.

Any ideas?

Here's my JS dumb script...hope you can help me!

<script type="text/javascript">

    function onChange(e) {
        $.ajax({
            url: "/Nav/MontaMenu/",
            dataType: "json",
            cache: false,
            type: 'GET',
            data: { nomePastaSelecionada: this.text(), caminhoPastaSelecionada: this.value() },
            success: function (result) {

                $('#treeview').kendoTreeView();

                var tvProjeto = $('#treeview').getKendoTreeView();

                tvProjeto.destroy();

                var dataSource = new kendo.data.DataSource({
                    data: result
                });

                dataSource.fetch(function () {
                    tvProjeto.setDataSource({
                        data: dataSource
                    });
                });
            }
        });
    }
</script>

[Dimiter Madjarov]

Hello Davi,


In the current implementation the data is passed correctly to the AJAX request. In the success event if the TreeView was already initialized, you don't need to destroy it and create it again. You could just set the new data for it's dataSource.
E.g.

success: function (result) {
    var tvProjeto = $('#treeview').data("kendoTreeView");
    tvProjeto.dataSource.data(result);
}

Please let me know if this approach is working in the current scenario or I could assist you further.

 

Regards,
Dimiter Madjarov
Telerik

[Davi Rodrigues]

Good morning Dimiter, 

Well...it seemed to work fine for just one node level...why it doesn't load the inner nodes?!

Regards,
Davi Rodrigues

[Dimiter Madjarov]

Hello Davi,


I am not aware of the current TreeView implementation and the format of the returned data. Please make sure the format of the result  variable is correct and the TreeView is initialized with the loadOnDemand option set to false. This means that all nodes will be fetched initially. Here is a small JS Bin example, which demonstrates this. 


I wish you a great day!

Regards,
Dimiter Madjarov
Telerik