How to Populate Parent and Child's in RadDropDownTree?

[Venkata]

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

[Venkata]

any Help?

[Boyan Dimitrov]

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

 

 

[Venkata]

Thanks Boyan Dimitrov.. Your solutions worked for me..

[Diogo Mendonça]

Hi,

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

How can i do this?

[Boyan Dimitrov]

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

 

 

[Diogo Mendonça]

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 = [];

             }
         }
     };
 }

[Dimitar]

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

 

 

[Diogo Mendonça]

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?

[Dimitar]

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

 

 

[Farshad]

Thanks

but i want do this by clientside  ExpandMode like this:

<DataBindings>
        <telerik:DropDownNodeBinding Depth="0" ExpandMode="ClientSide"  />

 </DataBindings>

i can't find any help for this.

[Dimitar]

Hi,

ExpandMode="ClientSide" is the default behaviour - all nodes are loaded in the initial request and expand is performed on the client, without server interaction. You may test it with the scenario from the DropDownTree - Web Service Binding and Client Templates demo locally on your machine:
- If ExpandMode is ClientSide, 3 root items will be loaded initially and no items will be further loaded.
- If ExpandMode is WebService as on the demo, then these 3 root items will have toggle icons shown. And when the toggle icons are clicked, there will be requests to the webservice to load child items, if present.

Regards,
Dimitar
Telerik by Progress

[Farshad]

thanks Dimitar 
i have radtreeview with n Nodes.
when Right Click on every Node add some node to dropdowntree in other div at client side.

now that node is 5000 and long time to draw this. 

how to solve this. i want just root Nodes in first time. and on expand nodes draw childes.

excuse me for pure English.

[Dimitar]

Hello,

The demo from my last reply shows that in order to achieve the described loading behavior, WebService should be used.

Regards,
Dimitar
Telerik by Progress

[umesh]

Hi Boyan Dimitrov, 

I have made use of your code: loadtreeview(RadDropDownTree1, TreeNodeExpandMode.ServerSideCallBack);

the above code works fine, Here 'RadDropDownTree1' is hardcoded in .aspx file but i have to programmatically create raddropdowntree like this:

RadDropDownTree datatreeview = new RadDropDownTree();
datatreeview.ID = raddptreename;
datatreeview.Attributes["CssClass"] = "radwidth";
datatreeview.Attributes["runat"] = "server";
datatreeview.Attributes["OnLoad"] = "RadDropDownTree1_Load";
datatreeview.EmbeddedTree.NodeExpand += embeddedTree_NodeExpand;
form1.Controls.Add(datatreeview);
loadtreeview(RadDropDownTree1, TreeNodeExpandMode.ServerSideCallBack);

Note: Here i have actually trying to create raddropdowntree control in cs file an then load data to it using 'LoadOnDemand' 

The above code loads the parent node but when i expand the parent node it give me an error 'There was an error in the callback'.

Please help me fix this. the only change in my code is programmatic creation of RadDropDownTree.

[Tsvetomir]

Hi umesh,

I have modified the aforementioned project sample in order to create a RadDropDownTree in the code-behind and pass it to a PlaceHolder control on the mark-up.

You can check how to wire the OnLoad event to the control on server-side and I would suggest you to do that in the Page_Init() event handler.

Regards,
Tsvetomir
Progress Telerik