This is a migrated thread and some comments may be shown as answers.

reload data source for Kendo treeview

10 Answers 736 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
tiffany
Top achievements
Rank 1
tiffany asked on 23 Jan 2014, 10:21 PM
I'm new for Kendo treeview. In kendo.MVC.Example template, we can set up treeview data source from the data generated from controller. If I want to for example click button, and get new data by ajax, how can I reload the data source for the treeview? 

10 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 24 Jan 2014, 11:45 AM
Hello Sai,

Use the DataSource.data method to provide the new data to the dataSource.

Please note that posting the same message on different threads may be considered spam and backfire so that you don't get your response fast.

Regards,
Alex Gyoshev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Palanisamy
Top achievements
Rank 1
answered on 27 Nov 2015, 12:36 PM
While using this method kendo tree view was flickering more than one time. Kindly give solution
0
Palanisamy
Top achievements
Rank 1
answered on 27 Nov 2015, 12:37 PM

$.ajax(                {                    type: "POST",                    url: contextClientData.ContextSelectionDetails,                    dataType: "json",                    contentType: "application/json; charset=utf-8",                    data: JSON.stringify({ contextSearchValue: encodeURIComponent(contextSearchValue) }),                    success: function (result) {                        $("#treeview").data("kendoTreeView").dataSource.data(result);                    },                    complete: function (message) {                    },                    error: function (message) {                    }                });

 

 

I am getting search results. But treeview was flickering more than one time

0
Alex Gyoshev
Telerik team
answered on 30 Nov 2015, 08:13 AM

Hello Palanisamy,

Can you please provide a reproduction case for this, for example by hard-coding some sample data in a Dojo snippet?

Regards,
Alex Gyoshev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Palanisamy
Top achievements
Rank 1
answered on 08 Dec 2015, 04:25 PM

already added in snippet. Please provide sample for rebind from mvc json result .

$.ajax(
        {
                type: "GET",
                url: contextClientData.ContextSelectionDetails + "?contextSearchValue=" + encodeURIComponent(contextSearchValue) + "&isFS=" + isFavoriteSuppressed + "&isLD=" + isLinkDisable + "&isG=" + isGlobalContext,
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                $("#treeview").data("kendoTreeView").dataSource.data(result);
            },
            complete: function (message) {

            },
            error: function (message) {

            }
        });

0
Alex Gyoshev
Telerik team
answered on 10 Dec 2015, 07:14 AM

Hello Palanisamy,

The provided snippet is not runnable, nor does it provide data to show how the TreeView is bound. We cannot infer what you mean by "flickering" -- this is why I ask for a way to reproduce it, so that I can provide relevant assistance.

Regards,
Alex Gyoshev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Palanisamy
Top achievements
Rank 1
answered on 11 Dec 2015, 10:10 AM

Hi Alex,

              I will tell you the clear concept. Very first we are loading the data in tree view. After that in search button click,i am trying to bind the results from mvc controller as jsonresult. search results are coming correctly upto controller. After binding in treeview,results are coming unexpected manner. For example search results are 6 means,after binding in treeview ,results are coming as 10 or 15 or 100 with expanded and collapse manner. Keepon treeview expanding,collapsing(i mean refreshing). That should not be the case.

 

once i enter the text in textbox and click the search button, search results should come properly with expanded mode.Please see the attached image and below code.

 

--This is for loading the data in treeview
 
function loadTreeView() {

        if(!$("#btnSearch").hasClass("selected")) {
            $("#btnSearch").addClass("selected");
            $(".contextDiv").show();


            if (!isContextLoaded) {


            homogeneous = new kendo.data.HierarchicalDataSource({
                    transport: {
                            read:
                            {
                            url: function (options) {

                                return "/WC3/ContextSelection/BindContext";
                            }
                        }

                        },
                    schema: {
                                model: {
                                id: "id",
                                hasChildren: "haschild",
                                context: "context"
                            }
                            }
                });

        $kendoTreeView = $("#treeview").kendoTreeView({
                loadOnDemand: true,
                dataSource: homogeneous,
                template: kendo.template($("#treeview-template").html()),
                dataBound: treeViewDataBound,
                expand: expandTree,
                collapse: collapseTree,
                select: function (e) {
                e.preventDefault();
                }
            });

            registerEvents();
            }

        }
   }

----THis is search button click event

 $("#btnContextSearch").click(function() {
           var contextSearchValue = $("#contextSearch").val();
            if (contextSearchValue.length >= CHARACTER_LENGTH.SEARCH_MIN_LENGTH) {
                contextSearchClause(contextSearchValue);
            }

        });


--This is search method
 function contextSearchClause(contextSearchValue) {

        $.ajax(
        {
                type: "GET",
                url: "/WC3/ContextSelection/ContextSelectionDetails" + "?contextSearchValue=" + encodeURIComponent(contextSearchValue) + "&isFS=" + isFavoriteSuppressed + "&isLD=" + isLinkDisable + "&isG=" + isGlobalContext,
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (result) {
--- I am trying to bind the json result from mvc controller. upto controller search results coming correctly. But after binding here(in treeview),results are not coming properly. Treeview keep on expanding or collapsing. I mean refreshing. Can u look into this issue?

                    $("#treeview").data("kendoTreeView").dataSource.data(result);

                },
                complete: function (message) {

                },
                error: function (message) {

                }
            });
    }


--my controller method

 /// <summary>
        /// Get Context Selection Details
        /// </summary>
        /// <param name="contextSearchValue">contextSearchValue</param>
        /// <param name="isFS">Defines the favorite suppression</param>
        /// <param name="isLD">Defines the link disable</param>
        ///  <param name="isG">Defines the global context</param>
        /// <returns></returns>
        public ActionResult ContextSelectionDetails(string contextSearchValue, bool isFS, bool isLD, bool isG)
        {
            WebResponse<Collection<TreeNode>> objContextResponse = null;

            this.fosHttp.SetHeader(new UserRequestInfo().GetUserRequestInfo());
            objContextResponse = this.fosHttp.Get<WebResponse<Collection<TreeNode>>>(
                    string.Format(CultureInfo.CurrentCulture, WebConstants.GetContextSelection, this.BaseServiceLink, contextSearchValue, isFS, isLD, isG));

            //Use custom serialize as the JavaScript serialize doesn't support DataMember attributes   
            return new CustomJsonResult { Data = objContextResponse.Result };

        }

 

 Could you please provide the samples for this scenario?

 Scenario:

--------------

Note: 1. Use one jsonresult method for loading the data in treeview

2. Use another jsonresult method for rebinding the search results.

I need to load the data from mvc controller as jsonresult. After that while clicking search button, I need to rebind the search results from another jsonresult method.

 

Still if you are not getting, Please provide the samples for below scenarios.

1. loading the data in treeview from  jsonresult method.

2. Search functionality(After clicking search button, i need to rebind the searchresults from jsonresult method)

3. Use javascript kendo treeview and mvc. In controller use jsonresult method.

Or else i need below sceenario...

Code:

----------

  var homogeneous = new kendo.data.HierarchicalDataSource({
                    transport: {
                            read:
                            {
                            url: function (options) {

if(isSearch)

{

return url1;

}

else

{
                                return url2;

}
                            }
                        }

                        },
                    schema: {
                                model: {
                                id: "id",
                                hasChildren: "haschild",
                                context: "context"
                            }
                            }
                });

        $kendoTreeView = $("#treeview").kendoTreeView({
                loadOnDemand: true,
                dataSource: homogeneous,
                template: kendo.template($("#treeview-template").html()),
                dataBound: treeViewDataBound,
                expand: expandTree,
                collapse: collapseTree,
                select: function (e) {
                e.preventDefault();
                }
            });

 

In the above code i checked the condition for different read url. But always read url  taking the first one only.(I mean url1 only even isSearch Condition is true). Kindly provide the solution for this.

0
Palanisamy
Top achievements
Rank 1
answered on 11 Dec 2015, 11:38 AM

Hi Alex,

Below is the clear scenario. You should see my previous post also. You will get more idea.
I have a tree view which uses dynamic loading from server when expanded. In my case there are two different URL's from where the initial and the other data is to be fetched in the search click. I tried changing the read URL from script but it is defaulted back when the user tries to seacrhthe tree which should not be the case.

Below is my tree

 var homogeneous = new kendo.data.HierarchicalDataSource({
                    transport: {
                            read:
                            {
                            url: function (options) {

                                return "/WC3/ContextSelection/BindContext";
                            }
                        }

                        },
                    schema: {
                                model: {
                                id: "id",
                                hasChildren: "haschild",
                                context: "context"
                            }
                            }
                });

        $kendoTreeView = $("#treeview").kendoTreeView({
                loadOnDemand: true,
                dataSource: homogeneous,
                template: kendo.template($("#treeview-template").html()),
                dataBound: treeViewDataBound,
                expand: expandTree,
                collapse: collapseTree,
                select: function (e) {
                e.preventDefault();
                }
            });
I then change the read url in script as following 

 var tree = $("#treeview").data("kendoTreeView");
 tree.dataSource.transport.options.read.url =  "/WC3/ContextSelection/ContextSelectionDetails/";

But when we try search in the tree the URL is still "/WC3/ContextSelection/BindContext" instead of "/WC3/ContextSelection/ContextSelectionDetails/"

0
Palanisamy
Top achievements
Rank 1
answered on 11 Dec 2015, 01:10 PM

HI Alex,

I tried below way also.See my below code. My Search Url calling infinite times while searching. Please see the attachment for further reference.

Code:

------------

var isSearch; var searchUrl; var contextSearchValue;

 //Loading tree view data
    function loadTreeView() {
      searchUrl =  contextClientData.ContextSelectionDetails + "?contextSearchValue=" +encodeURIComponent(contextSearchValue) + "&isFS=" +isFavoriteSuppressed + "&isLD=" +isLinkDisable + "&isG=" +isGlobalContext;
        //if (!$("#btnSearch").hasClass("selected"))
        //{
            $("#btnSearch").addClass("selected");
            $(".contextDiv").show();

            homogeneous = new kendo.data.HierarchicalDataSource({
                    transport: {
                                read: {
                                    url: function (options) {
                                        if (isSearch) {
                                            return searchUrl;
                                        }
                                        else {
                                            return getUrl();
                                    }
                                        }

                                }
                    },
                    schema: {
                            model: {
                                    id: "id",
                                    hasChildren: "haschild",
                                    context: "context"
                            }
                        }
            });

            if (!isContextLoaded) {

                $kendoTreeView = $("#treeview").kendoTreeView({
                                                loadOnDemand: true,
                                                dataSource: homogeneous,
                                                template: kendo.template($("#treeview-template").html()),
                                                dataBound: treeViewDataBound,
                                                expand: expandTree,
                                                collapse: collapseTree,
                                                select: function (e) {
                                                                    e.preventDefault();
                                                            }
                                        });

                registerEvents();
            }
            else
            {

                $("#treeview").data("kendoTreeView").dataSource.read();
            }
      //}
 }

 


  $("#btnContextSearch").click(function() {
            contextSearchValue = $("#contextSearch").val();
            if (contextSearchValue.length >= CHARACTER_LENGTH.SEARCH_MIN_LENGTH) {
                contextSearchClause(contextSearchValue);
            }

        });

function contextSearchClause(contextSearchValue) {
        isSearch = true;       

        loadTreeView();

    }

0
Alex Gyoshev
Telerik team
answered on 15 Dec 2015, 01:31 PM

Hello Palanisamy,

Based on the latest code listing, it appears that the TreeView is initialized on every call of loadTreeView. Initializing the widget over the same element is not supported by the framework. A way to achieve the functionality that you want is to make the request to the server and use setDataSource to replace all the data in the TreeView with the received tree, if the server provides a complete hierarchy. I am afraid that the only example that we have about searching in the TreeView is for client-side searching when the data is fully loaded.

Regards,
Alex Gyoshev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
TreeView
Asked by
tiffany
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Palanisamy
Top achievements
Rank 1
Share this question
or