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

AJAX bound TreeView item onSelect value issue

4 Answers 118 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.
Mattias
Top achievements
Rank 2
Mattias asked on 30 Mar 2010, 08:54 PM

Hi,

I’m using Telerik.Web.Mvcversion “2010.1.319.235” ( the issue bellow occurs in previous versions alsobut reading the forum and found you recommending later builds for similarproblems).


I have aTreeView that is populated using a AJAX bound to a method in the viewcontroller, the TreeView gets populated just fine, expands and fetches childrenwithout problem.


The issue I’mhaving is using the client side OnSelect event, I always get the selected itemtext correct for the selected node, but for the top level nodes I get lowerlevel nodes values. Searching through your forum I’ve tried different ways offetching the value.

This is my jsOnSelect function

function onSelect(e) 
    var tv = $("#ManufacturerModelTreeView").data("tTreeView"); 
    var item = $(e.item); 
 
    var txt = tv.getItemText(item); 
    var val = $.parseJSON(unescape(tv.getItemValue(item))); 
    var val1 = $.parseJSON(unescape(item.closest('.t-item').find(':input[name*="Value"]').val())); 
    var val2 = $.parseJSON(unescape(item.closest('.t-item').find(':input[name="itemValue"]').eq(0).val())); 
 
 
    $.ajax( 
        { 
            type: 'POST'
            url: '/TreeViewTest/ManufacturerModelFilter'
            traditional: true
            data: val, 
            success: function(result) { 
                //DOSTUFF 
            } 
        } 
    ); 

ViewTreeView declaration

Html.Telerik() 
    .TreeView() 
    .Name("ManufacturerModelTreeView"
    .ClientEvents( 
        ClientEvent => ClientEvent.OnSelect("onSelect"
    ) 
    .DataBinding( 
        DataBinding => DataBinding.Ajax().Select("ManufacturerModelTreeViewBinding""TreeViewTest"
    ).Render(); 

InitialTreeView hierarchy:

Alla
+---Volvo
    +---Cross Country
    +---Kombi
    +---Sedan
    +---Coupé
+---Ford

The valueof the nodes is a Url and JSON encoded simple class

public class ManufacturerModel 
    public string Manufacturer { getset; } 
    public bool IsGroup { getset; } 
    public string[] Models { getset; } 


SampleValues

//Alla   
new ManufacturerModel { Manufacturer = null, Models = null
//Volvo  
new ManufacturerModel { Manufacturer = "VOLVO", Models = null } 
//Cross Country  
new ManufacturerModel 
    { 
        Manufacturer = "VOLVO"
        IsGroup = true
        Models = new[] 
                     { 
                         "XC60"
                         "XC70"
                         "XC90" 
                     } 
    } 
 

But for “Alla”& “Volvo” I get the value of “Cross Country”, but for “Cross Country” andits children I get the correct values.

Is this an known issue or is theresomething obvious I’m missing?


The Telerik generated markup looks like this:

<UL style="DISPLAY: block" class="t-group t-treeview-lines" jQuery1269975337496="2"
<LI class="t-item t-first t-last"
<DIV class="t-top t-bot"><SPAN class="t-icon t-minus"></SPAN><SPAN class="t-in t-state-selected">Alla</SPAN></DIV
<UL class=t-group> 
<LI class=t-item> 
<DIV class=t-top><SPAN class="t-icon t-minus"></SPAN><SPAN class=t-in>Volvo</SPAN></DIV
<UL class=t-group> 
<LI class=t-item> 
<DIV class=t-top><SPAN class="t-icon t-plus"></SPAN><SPAN class=t-in>Cross Country</SPAN></DIV><INPUT class=t-input value=%7b%22Manufacturer%22%3a%22VOLVO%22%2c%22IsGroup%22%3atrue%2c%22Models%22%3a%5b%22XC60%22%2c%22XC70%22%2c%22XC90%22%5d%7d type=hidden name=itemValue></LI> 
<LI class=t-item> 
<DIV class=t-mid><SPAN class="t-icon t-plus"></SPAN><SPAN class=t-in>Kombi</SPAN></DIV><INPUT class=t-input value=%7b%22Manufacturer%22%3a%22VOLVO%22%2c%22IsGroup%22%3atrue%2c%22Models%22%3a%5b%22V50%22%2c%22V70%22%5d%7d type=hidden name=itemValue></LI> 
<LI class=t-item> 
<DIV class=t-mid><SPAN class="t-icon t-plus"></SPAN><SPAN class=t-in>Sedan</SPAN></DIV><INPUT class=t-input value=%7b%22Manufacturer%22%3a%22VOLVO%22%2c%22IsGroup%22%3atrue%2c%22Models%22%3a%5b%22S40%22%2c%22S60%22%2c%22S80%22%5d%7d type=hidden name=itemValue></LI> 
<LI class="t-item t-last"
<DIV class=t-bot><SPAN class="t-icon t-plus"></SPAN><SPAN class=t-in>Coupé</SPAN></DIV><INPUT class=t-input value=%7b%22Manufacturer%22%3a%22VOLVO%22%2c%22IsGroup%22%3atrue%2c%22Models%22%3a%5b%22C30%22%2c%22C70%22%5d%7d type=hidden name=itemValue></LI></UL><INPUT class=t-input value=%7b%22Manufacturer%22%3a%22VOLVO%22%2c%22IsGroup%22%3afalse%2c%22Models%22%3anull%7d type=hidden name=itemValue></LI> 
<LI class="t-item t-last"
<DIV class=t-bot><SPAN class="t-icon t-plus"></SPAN><SPAN class=t-in>Ford</SPAN></DIV><INPUT class=t-input value=%7b%22Manufacturer%22%3a%22FORD%22%2c%22IsGroup%22%3afalse%2c%22Models%22%3anull%7d type=hidden name=itemValue></LI></UL><INPUT class=t-input value=%7b%22Manufacturer%22%3anull%2c%22IsGroup%22%3afalse%2c%22Models%22%3anull%7d type=hidden name=itemValue></LI></UL


Regards,

/Mattias

4 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 31 Mar 2010, 02:29 PM
Hello Mattias,

I have used the latest internal build to replicate the issue, but no avail. Could you please try the attached internal build and let me know what the observation are ?

Sincerely yours,
Georgi Krustev
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.
0
Mattias
Top achievements
Rank 2
answered on 31 Mar 2010, 07:57 PM
I still have the same issue.

I created an simple MVC2 Visual Studion 2008 solution in short containing
  1. One View containing
    *TreeView
    *Client onSelect event
  2. One Controller containing
    *View action
    *Ajax databinding action
    *Ajax onSelect action
  3. One "master-page" containing
    *Telerik Stylesheet Registrar
    *Telerik Script Registrar

The solution can be downloaded from here
TreeViewTest.zip

Source values
TreeView Manufacturer Models
Alla null null
 +---Volvo Volvo null
     +---Cross Country  Volvo XC60, XC70, XC90
     +---Kombi Volvo V50, 70
     +---Sedan  Volvo S40, S60, S80
     +---Coupé  Volvo C30, C70
 +---Ford Ford null

But what i get client side is
TreeView Manufacturer Models
  Alla Volvo XC60, XC70, XC90
 +---Volvo Volvo XC60, XC70, XC90
     +---Cross Country  Volvo XC60, XC70, XC90
     +---Kombi Volvo V50, 70
     +---Sedan  Volvo S40, S60, S80
     +---Coupé  Volvo C30, C70
 +---Ford Ford null

Regards,
/Mattias
0
Accepted
Georgi Krustev
Telerik team
answered on 01 Apr 2010, 11:46 AM
Hi Mattias,

Thank you for the attached test project.

I was able to observe and localize the problem. To fix it you should replace this code snippet in the telerik.treeview.js file:
getItemValue: function(item) {
           return $(item).closest('.t-item').find(':input[name="itemValue"]').eq(0).val() || this.getItemText();
       }

with this one:
getItemValue: function(item) {
            return $(item).closest('.t-item').find('>:input[name="itemValue"]').val() || this.getItemText();
        }

The fix will be included in the next release of the components.

Kind regards,
Georgi Krustev
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.
0
Mattias
Top achievements
Rank 2
answered on 01 Apr 2010, 02:21 PM
Worked like a charm!

/Mattias
Tags
TreeView
Asked by
Mattias
Top achievements
Rank 2
Answers by
Georgi Krustev
Telerik team
Mattias
Top achievements
Rank 2
Share this question
or