reload data source for Kendo treeview

11 posts, 1 answers
  1. Answer
    tiffany
    tiffany avatar
    24 posts
    Member since:
    Jan 2014

    Posted 23 Jan 2014 Link to this post

    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? 
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 24 Jan 2014 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Palanisamy
    Palanisamy avatar
    43 posts
    Member since:
    Jul 2015

    Posted 27 Nov 2015 in reply to Alex Gyoshev Link to this post

    While using this method kendo tree view was flickering more than one time. Kindly give solution
  5. Palanisamy
    Palanisamy avatar
    43 posts
    Member since:
    Jul 2015

    Posted 27 Nov 2015 in reply to Alex Gyoshev Link to this post

    $.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

  6. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 30 Nov 2015 Link to this post

    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!
     
  7. Palanisamy
    Palanisamy avatar
    43 posts
    Member since:
    Jul 2015

    Posted 08 Dec 2015 in reply to Alex Gyoshev Link to this post

    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) {

                }
            });

  8. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 10 Dec 2015 Link to this post

    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!
     
  9. Palanisamy
    Palanisamy avatar
    43 posts
    Member since:
    Jul 2015

    Posted 11 Dec 2015 in reply to Alex Gyoshev Link to this post

    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.

  10. Palanisamy
    Palanisamy avatar
    43 posts
    Member since:
    Jul 2015

    Posted 11 Dec 2015 in reply to Alex Gyoshev Link to this post

    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/"

  11. Palanisamy
    Palanisamy avatar
    43 posts
    Member since:
    Jul 2015

    Posted 11 Dec 2015 in reply to Alex Gyoshev Link to this post

    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();

        }

  12. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 15 Dec 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready