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

[Solved] Getting the value of Node in Treeview

4 Answers 177 Views

TreeView

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

This question is locked. New answers and comments are not allowed.

AMS asked on 11 Mar 2010, 09:54 AM

    
            Hi i am trying to get the value of the clicked treeview node as a parameter and then append the child nodes underneath it by making a client side call. but i get only the item.text() property but not the item.value() property. 

            Any suggestions???? 

            <script type="text/javascript"> 
        
                    function onSelect(e) { 
        
                        debugger; 
        
                        var tv = $("#TreeView").data("tTreeView"); 
        
                        var item = $(e.item); 
        
            //$console.log('OnSelect :: ' + item.text());  
        
            //its not giving me the item.value() here..... 
        
                        $.post('/Resource/GetJSONTree2', { SubjectID: $("#Subject").val(), SelectedStdID: item.value() }, function(data) { 
        
                onPass(data, status); 
        
            }); 
        
            } 
        
            function onPass(data, status) 
        
            { 
        
               //what will be code here to append json as a child to the selected node? 
        
            } 
        
            function onDataBinding(e) { 
        
                var treeview = $('#TreeView').data('tTreeView'); 
        
                var jsonObject = [ 
        
                            { Value: "1", Text: "Product 1", Expanded: true, 
        
                                Items: [ 
        
                                  { Value: "4", Text: "Product 4", Expanded: true, 
        
                                      Items: [ 
        
                                        { Value: "6", Text: "Product 6" }, 
        
                                        { Value: "7", Text: "Product 7" } 
        
                                    ] 
        
                                  }, 
        
                                  { Value: "5", Text: "Product 5" } 
        
                              ] 
        
                            }, 
        
                            { Value: "2", Text: "Product 2 (unavailable)", Enabled: false }, 
        
                            { Value: "3", Text: "Product 3" } 
        
                        ]; 
        
                treeview.bindTo(jsonObject); 
        
            } 
        
            </script> 
        
            <p> 
        
                <%  Html.Telerik().TreeView() 
        
                    .Name("TreeView") 
        
                    .ClientEvents(events => events 
        
                        .OnDataBinding("onDataBinding") 
        
                        .OnSelect("onSelect") 
        
                    ) 
        
                        .Render();  
        
                %> 
        
            </p>

4 Answers, 1 is accepted

answered on 11 Mar 2010, 10:18 AM

Hello Abbid ,

In order to render the item values, you need to set the "LoadOnDemand" attribute of the node to true:

        { Value: "7", Text: "Product 7", LoadOnDemand: true }

Then, you will be able to get the value using the following JavaScript:

        function onSelect(e) {
            $(e.item).closest('.t-item').find(':input[name*="Value"]').val();
        }

Regards,
Alex Gyoshev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 28 Mar 2010, 03:09 PM

i'm fix for self this trable:

I'm add some code:

                    //I'M ADD THIS CODE  ->>>>>>>         
                               if (!item.LoadOnDemand)         
                                    html.cat('<input type="hidden" class="t-input" name="itemValue" value="')         
                                        .cat(item.Value)         
                                        .cat('" />');         
            //->>>>>>>         

in JavaScript file telerik.treeview.js:

                        // client-side rendering         
                $.extend($t.treeview, {         
                    getGroupHtml: function(data, html, isAjax, isFirstLevel) {         
            (..)         
            //I'M ADDED THIS CODE -------------------------------------------------------         
                               if (!item.LoadOnDemand)         
                                    html.cat('<input type="hidden" class="t-input" name="itemValue" value="')         
                                        .cat(item.Value)         
                                        .cat('" />');         
            //------------------------------------------------------------------------------------         
                                if (item.Items && item.Items.length > 0)         
                                    this.getGroupHtml(item.Items, html, isAjax, false);         
                                else if (item.LoadOnDemand)         
                                    html.cat('<input type="hidden" class="t-input" name="itemValue" value="')         
                                        .cat(item.Value)         
                                        .cat('" />');         
                     
                                html.cat('</li>');         
                            }         
                        }         
                     
                        html.cat('</ul>');         
                    }         
                });         

You can fix this an official code?

Fanks.