[Solved] how to bind the TreeView by Ajax?

[Duo]

I have a tree view bounded to model.
on runtime i change my repository of data, what i need to do is remove some nodes from the tree view or call the ajax method to rebind the tree view.

i have read  this method.but i need some change, like Grid's Rebind.

http://www.telerik.com/community/forums/aspnet-mvc/treeview/client-side-rebind.aspx

i modify the code ,but i found that is not work.

how can i make it work?

View Code:

   

<%= Html.Telerik().TreeView()<br>        .Name("AjaxTreeView")<br>        .DataBinding(dataBinding => dataBinding<br>            .Ajax().Select("AjaxLoading", "Home")<br>        )<br>    %><br>    <br>    <p><br>        <button type="submit" onclick="return DataBinding()" class="t-button t-state-default"><br>            ReBind !</button><br>    </p><br><br><br>    <script type="text/javascript"><br>        function DataBinding() {<br>            var treeview = $('#AjaxTreeView').data('tTreeView');<br>            treeview.ajaxRequest({ filter: "testfilter" });<br>            return false;<br>        }<br>    </script>

Controller Code

       

[AcceptVerbs(HttpVerbs.Post)]<br>        public ActionResult AjaxLoading(TreeViewItemModel node,string filter)<br>        {<br>            TreeViewItem data = getData(filter);<br><br><br>            return new JsonResult { Data = nodes };<br>        }

the best effect i want,the code like this.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <%= Html.Telerik().TreeView()
        .Name("AjaxTreeView")
    %>
    
    <p>
        <button type="submit" onclick="return DataBinding()" class="t-button t-state-default">
            ReBind !</button>
    </p>


    <script type="text/javascript">
        function DataBinding() {
            var treeview = $('#AjaxTreeView').data('tTreeView');
            treeview.bind(filter)//click the button,and use controller method bind the treeview in ajax; 
        }
    </script>


</asp:Content>



best regards

[chris]

Hello Duo,

I think the ajaxRequest MEthode does not work with parameters. Try to change the selecturl in the ajay property(treeview.ajax.selectUrl). Then you must change in the querystring  the filter parameter to your new value and call treeview.ajaxRequest().
Hope this helps.

chris

[Duo]

the problem is how to change the selecturl in ajax property?

[chris]

Hi Duo,

try this:

function changeCategory(url,filter) {
        var newAdditionalURL = "";
        var tempArray = url.split("?");
        var baseURL = tempArray[0];
        var aditionalURL = tempArray[1];
        var temp = "";
        if (aditionalURL) {
            tempArray = aditionalURL.split("&");
            for (var i in tempArray) {
                if (tempArray[i].indexOf("filter") == -1) {
                    newAdditionalURL += temp + tempArray[i];
                    temp = "&";
                }
            }
        }
        var rows_txt = "filter=" + filter+ temp;
        var finalURL = baseURL + "?" + rows_txt + newAdditionalURL;
        return finalURL;
    }

HIH
chris

[Duo]

function TreeRebind(filter) {

    $.ajax({

        type: "Post",

        url: "FolderPathTree/ArchivesTypeNodesForSearch",

        data: "{"+filter+"}",

        contentType: "application/json; charset=utf-8",

        dataType: "json",

        success: function (data) {

            $('#TreeView').data('tTreeView').bindTo(data);

        },

        error: function (err) {

            alert("False:"+err);

        }

    });

 

}

i make it work in my way, but thank you too!