Treeview dataSource how to refresh?

[zheng]

@(Html.Kendo().TreeView()
.Name("treeview")
.TemplateId("treeview-template")
.HtmlAttributes(new { @class = "demo-section" })
.DataTextField("name")
.DataUrlField("Link")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("GetTreeMenu", "Menu")
)
)
)

How can i refresh the datasource?
When i  changed the menu'name or del it ,the db has changed ,but not changed the monitor?
i don't know how to refresh th datasource?
 

[Dimiter Madjarov]

Hello Zheng,


You could refresh the dataSource by calling it's read method.
E.g.

var tree = $("#treeview").data("kendoTreeView");
tree.dataSource.read();

Please let me know if this was the information that you were looking for.

 

Regards,
Dimiter Madjarov
Telerik

[zheng]

Hi Dimiter ,
Thank you! Sorry to reply a little late .
tree.dataSource.read(); But under the ie that it is no use !
 So i want to at the end of url add a time stamp,

.Read(read => read.Action("GetTreeMenu", "Menu"))
//change like this
//.Read(read => read.Action("GetTreeMenu?time="+DateTime.Now.ToString()+"&"+, "Menu"))
//but is no work

At last I through get the js code is compiled.
changed the url like this("GetTreeMenu?time="+ new Date().getTime() +"&"),
 Then To replace it himself ! Now it can refresh.
If you have a good solution, please tell me, thank you !
Thanks,
Zheng
 

[Dimiter Madjarov]

Hello Zheng,


You could pass the additional data (i.e. the timestamp) either using object route values
E.g.

.Read(read => read.Action("GetTreeMenu", "Menu", new { name = "test", id = 2 }))

OR
via the Data method, which specifies the JavaScript function, which will return the additional parameters.
E.g.

.Read(read => read.Action("GetTreeMenu", "Menu").Data("additionalInfo"))

function additionalInfo() {
    return {
        name: "test",
        id: 2
    }
}

In both cases, you should add the two additional parameters to you Action.
E.g.

public JsonResult GetTreeMenu(... , string name, int id) {...}

I hope that these approaches will work in the current scenario. I wish you a great day!

 

Regards,
Dimiter Madjarov
Telerik

[Eugene]

Hi Dimiter, is there a way to add the Data parameters based on the node that is currently being expanded? Can the read data be set from client side expand event?

@(Html.Kendo().TreeView()
            .Name("treeEquipmnetMakes")
            .HtmlAttributes(new { @class = "treeEquipmentMakes" })
            .DataTextField("Name")
            .DataSource(dataSource => dataSource
               .Read(read => read.Action("EquipmentModels", "Admin"))
            )
            .Events(e => e.Select("treeItemSelect")
                          .Change("treeItemChange")
                          .Expand("treeItemExpand")
            )

        )

        <script>
            function treeItemExpand(e) {
                var dataItem = this.dataItem(e.node);
                var dataText = "type=" + dataItem.ModelType;
                var ds = e.sender.dataSource;

                ds.options.data.push(dataText);
            }

Thanks
Eugene

[Dimiter Madjarov]

Hello Eugene,


I answered this question in the support thread. I'll post the code here for convenience too. Yes, you could achieve this if the additionalInfo is a global object which is accessible in both functions.
E.g.

<script>
    var additional = {};

    function expand(e) {
        var age = this.dataItem(e.node).Age;
        var name = this.dataItem(e.node).Name;
        additional.name = name;
        additional.age = age;
    }

    function additinalData() {
        return additional;
    }
</script>

Regards,
Dimiter Madjarov
Telerik

[Shah]

Hi Dimiter,

I have added new record to treeview from context menu, the newly created record is now populated in treeview by using

tree.dataSource.read();

However, this make the treeview collapsed, how should we keep the treeview being expanded even aftre new record inserted?

 

code:

$.ajax({
                    type: "POST",
                    url: form.attr('action'),
                    data: form.serialize(),
                    success: function (data) {
                        $("#divLoading").hide();
                        if (data.result) {
                            $("#dialog").dialog('close');
                            
                            var treeview = $("#treeview").data("kendoTreeView");
                            treeview.dataSource.read();
                            //var node = treeview.findByUid(selectedNode.uid);
                            //ExpandNode(node);
                            //treeview.select(node);
                            //currentSelectedNode = node;
                         
                           
                        } else {
                            // alert('false');
                            alert(data.message);
                        }
                    },
                    dataType: 'json'
                });

[Dimiter Madjarov]

Hello Shah,

A possible solution for the current case is demonstrated in the following sample project.

Regards,
Dimiter Madjarov
Telerik