AJAX bound TreeView item onSelect value issue

[Mattias]

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 { get; set; }
    public bool IsGroup { get; set; }
    public string[] Models { get; set; }
}

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

[Georgi Krustev]

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.

[Mattias]

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

[Georgi Krustev]

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.

[Mattias]

Worked like a charm!

/Mattias