How to Populate Parent and Child's in RadDropDownTree?

10 posts, 1 answers
  1. Venkata
    Venkata avatar
    126 posts
    Member since:
    Nov 2009

    Posted 27 Aug 2014 Link to this post

    Hi,
    I want to Populate Parent Nodes from the Database in RadDropDownTree When Page being Load..
    When you Expand i want to Populate Child Nodes from the Database..
    How can i do this?
    I went through this example but could not achieve(i am using Database not the Webservice)
    http://demos.telerik.com/aspnet-ajax/dropdowntree/examples/populatingwithdata/webserviceandclienttemplates/defaultcs.aspx 

    Thanks In advance
  2. Venkata
    Venkata avatar
    126 posts
    Member since:
    Nov 2009

    Posted 29 Aug 2014 Link to this post

    any Help?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 01 Sep 2014 Link to this post

    Hello,

    Please find attached a sample project that implements very similar scenario. It is used server-side binding. In the embeddedTree_NodeExpand event handler you can retrieve the child items from the data base and add the nodes to expanded nodes collection.

    A very important aspect of this approach is that to set ExpandMode = TreeNodeExpandMode.ServerSideCallBack for the nodes created and loaded in the embeddedTree_NodeExpand method. This way all nodes loaded on demand will have the plus sign icon on the left and they will load their child nodes on demand and etc.

    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Venkata
    Venkata avatar
    126 posts
    Member since:
    Nov 2009

    Posted 02 Sep 2014 in reply to Boyan Dimitrov Link to this post

    Thanks Boyan Dimitrov.. Your solutions worked for me..
  6. Diogo Mendonça
    Diogo Mendonça avatar
    4 posts
    Member since:
    Jul 2006

    Posted 18 Mar 2015 Link to this post

    Hi,

    I want to populate RadDropDownTree on 'load on demand' with filtering active. 

    How can i do this?
  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 20 Mar 2015 Link to this post

    Hello,

    You can use the attachment from my last response in this thread and set the RadDropDownTree EnableFiltering="true". Please note that the filtering functionality is performed on the client-side and it will filer only the items that currently exist in the drop down list. 

    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Diogo Mendonça
    Diogo Mendonça avatar
    4 posts
    Member since:
    Jul 2006

    Posted 24 Mar 2015 in reply to Boyan Dimitrov Link to this post

    Hello Boyan,

    I understand your answer to my question, but i have other problem. In our case, the RadDropDownTree have more than 5.000 nodes, so the size of my page is too large. Do you have any recomendation? 

    It's possible to do raising the client events and load new datasource from webservice?

    One sample of my code ( we need to filtering with accent sensitive in portuguese dictionary )

    function raise_filterNodes(sender) {
         sender._manager._filterNodes = function (H) {

             var a = $;
             var m = "rtLIHidden";
             var F = this._embeddedTree.get_allNodes(), y = F.length, G, D;
             var custom_regex = Telerik.Web.UI.RadDropDownTree.Manager._regExEscape(H);

             if (H === "") {

                 if (this._filter == Telerik.Web.UI.DropDownTreeFilter.StartsWith) {
                    G = new RegExp("^\\s*" +custom_regex, "im");
                 } else {
                    G = new RegExp(custom_regex, "gim");
                 }

                 for (D = 0; D < y; D++) {
                 var A = F[D];
                 var E = this._matchNode(A, H, G);
                 if (H === "") {
                     this._filteredVisibleNodes.push(A);
                     } else {
                     if (E) {
                         this._handleVisibleParents(A);
                         this._filteredVisibleNodes.push(A);
                         } else {
                         this._handleHiddenNode(A);
                         }
                     }
                  }

                 var J = this._filteredVisibleNodes.length;
                 //this._embeddedTree._expandNodes(this._filteredVisibleNodes); // Não expande 
                 var C = this._filteredHiddenNodes.length;
                 for (D = 0; D < C; D++) {
                     var z = this._filteredHiddenNodes[D];
                     a(z._element).addClass(m);
                     z._properties.setValue("visible", false);
                 }

                 for(D = 0; D < J; D++) {
                     var B = this._filteredVisibleNodes[D], I = B._element;
                     if (a(I).hasClass(m)) {
                         a(I).removeClass(m);
                         } B._properties.setValue("visible", true);
                     B._ensureSiblingsAppearance();
                     } this._filteredVisibleNodes =[];
                 this._filteredHiddenNodes = [];


             } 
             else if(!isNaN(H)) // Optimizacao - Se for inteiro (ID) nao pesquisa
             { 
                return false; 
             }  
             else if (isNaN(H)) { // Optimizacao - Só pesquisa texto com 3 ou mais letras
                 if (H.length > 2) {

                    custom_regex = custom_regex.replace(/a/gim, '[a\u00e0\u00c0\u00e1\u00c1\u00e2\u00c2\u00e3\u00c3]');
                    custom_regex = custom_regex.replace(/e/gim, '[e\u00e8\u00c8\u00e9\u00c9\u00ea\u00ca]');
                    custom_regex = custom_regex.replace(/i/gim, '[i\u00ec\u00cc\u00ed\u00cd\u00ee\u00ce]');
                    custom_regex = custom_regex.replace(/o/gim, '[o\u00f2\u00d2\u00f3\u00d3\u00f4\u00d4\u00f5\u00d5]');
                    custom_regex = custom_regex.replace(/u/gim, '[u\u00f9\u00d9\u00fa\u00da\u00fb\u00db]');
                    custom_regex = custom_regex.replace(/c/gim, '[c\u00e7\u00c7]');


                     if (this._filter == Telerik.Web.UI.DropDownTreeFilter.StartsWith) {
                         G = new RegExp("^\\s*" + custom_regex, "im");
                     } else {
                         G = new RegExp(custom_regex, "gim");
                     }

                     for (D = 0; D < y; D++) {
                         var A = F[D];
                         var E = this._matchNode(A, H, G);
                         if (H === "") {
                             this._filteredVisibleNodes.push(A);
                         } else {
                             if (E) {
                                 this._handleVisibleParents(A);
                                 this._filteredVisibleNodes.push(A);
                             } else {
                                 this._handleHiddenNode(A);
                             }
                         }
                     }

                     var J = this._filteredVisibleNodes.length;
                     this._embeddedTree._expandNodes(this._filteredVisibleNodes);
                     var C = this._filteredHiddenNodes.length;
                     for (D = 0; D < C; D++) {
                         var z = this._filteredHiddenNodes[D];
                         a(z._element).addClass(m);
                         z._properties.setValue("visible", false);
                     }

                     for (D = 0; D < J; D++) {
                         var B = this._filteredVisibleNodes[D], I = B._element;
                         if (a(I).hasClass(m)) {
                             a(I).removeClass(m);
                         } B._properties.setValue("visible", true);
                         B._ensureSiblingsAppearance();
                     } this._filteredVisibleNodes = [];
                     this._filteredHiddenNodes = [];

                 }
             }
         };
     }
  9. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 26 Mar 2015 Link to this post

    Hello,

    I am afraid that this is not a supported scenario. The RadDropDownTree Filtering functionality cannot be combined with WebService as specified in the Filtering help article.

    Since filtering is done on the client, you could try loading all nodes and disable node’s text highlighting. And to achieve better performance, I would recommend you to use the MinFilterLength property as well. These two steps should result faster filtering.

    Regards,
    Dimitar
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  10. Diogo Mendonça
    Diogo Mendonça avatar
    4 posts
    Member since:
    Jul 2006

    Posted 27 Mar 2015 in reply to Dimitar Link to this post

    Hello Dimitar,

    Thank you for your answer. I set propertity Highlight to None and MinFilterLength to 3 and the Filtering performance is really better. Thanks for the recommendation. 

    But in reality the real problem is the page size. The view state and the html rendered exceed 2 Mb so the page load is very slow. My first shot is load on demand, but if it is not possible, i really need other option.

    Do you have any recommendation?




  11. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 30 Mar 2015 Link to this post

    Hello,

    I am afraid that this scenario could not be achieved with RadDropDownTree. I would suggest you to try limiting the data that would be loaded by the control. If your scenario allows it, you may try prompting the user to load a RadDropDownTree with records from A to M or another from N to Z, which would reduce the number of records loaded on the client.

    Regards,
    Dimitar
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017