Replacement for bindTo method

[AP]

I'm looking to update an application developed using the MVC extensions, with the KendoUI MVC extensions. The application is centered around the treeview control, and I'm having difficulties working out equivalent functions in the KendoUI treeview.

To load data into the treeview, I'm making an ajax call, and populating an array with Treeview objects. I've changed the controller code to use Kendo TreeViewItems (and changed the value property to Id), and I'm getting data passed to the client.

However, the original code used the bindTo method to bind the data to the treeview, which seems absent in teh KendoUI treeview.

The original code is:-

$.ajax({

            type: "POST",

            async: true,

            contentType: "application/json;charset=utf-8",

            url: "@Url.Content("~/Home/GetTreeItems")",

            data: '{"PID":"' + pid + '"}',

            dataType: "json",

            success: function(data){

                var treeview = $('#AjaxTreeView').data('tTreeView');

                $('#spinner').hide();

 

                PID=data.PID;

                pathwayData=data.elementList;

                elementCount=data.ElementCount;

 

                treeview.bindTo(data.nodeList);

                $('#treeShower').show();

 

            },

            error: function(){

                alert("An error has occurred");

            }

            });

I've changed the line which identified the treeview to :-

var treeview = $('#AjaxTreeView').data('kendoTreeView');

but the code fails as there isn't a bindTo method - what can I use instead?

Also, I'm using several of the treeview events, but again, the equivalents for some aren't clear.

In the original code I'm using

OnNodeDrop
OnNodeDragStart
OnNodeDragging
OnSelect
OnNodeDropped

It looks lie the select, and dragstart events will map, and the Drop event is probably the same, but what about the OnNodeDragging and OnNodeDropped events - what are the kendo equivalents?

Thanks

[Alex Gyoshev]

Hello Andrew,

bindTo: If you have a populated treeview, you can clear and re-populate it with the following two lines:

    treeview.remove(".k-item");
    treeview.append([ { text: "foo" } ]); // change the array to your actual data

client events: The following section describes the client-side events changes. It appears that the document has been improperly imported in docs.kendoui.com, but accessing it through github works fine at this moment.

$.ajax: Instead of manually querying the end-point with $.ajax, you can consider using the HierarchicalDataSource, as outlined in the binding to remote data example. This will also allow loading of nodes on-demand, speeding up the requests and the rendering.

If you need assistance with your particular application, please open a support thread and send a working sample that shows the problem that you encountered.

Regards,
Alex Gyoshev
the Telerik team

[AP]

Thanks,for your response.

I did try something along the lines you siggested (although still making the $.ajax call - as I'm not only retrieving data for the treeview, but other items as well), using a HierarchicalDataSource, although I couldn't see how to define this using server side code, so defined the treeview in javascript.

var treeSource = new kendo.data.HierarchicalDataSource({

           

       });

 

       $('#AjaxTreeView').kendoTreeView({

           dataSource: treeSource,

           dataTextField:  "Text"

 

 

 

       });

I then load the data into the datasource:-

treeSource.data(data.nodeList);

This does populate the treeview with something (after defining the dataTextField) - but not as the MVC treeview did. Child nodes aren't displayed, and the text is displayed encoded, which I don't want - as it's formatted HTMl , to show quite a lot of information.

The data is an array of TreeView objects - which specifies all this, but where in the MVC treeview, everything display fine, the Kendo treeview doesn't seem to map the data items across - and there deosn't seem to be a way to define how to map child nodes, and the encoded flag.

If you think this is best handled via a support tixket, let me know and I'll raise one - although a working project could be tricky, as it's based on data from our SQL Server database.

[Alex Gyoshev]

> Child nodes aren't displayed, and the text is displayed encoded, which I don't want - as it's formatted HTMl , to show quite a lot of information. 

Instead of sending the formatted HTML from the server, you might want to use the TreeView client templates -- this functionality lacked in the MVC extensions' treeview.

Regarding the child nodes -- are the plus/minus buttons shown? If not, then you'll need to add the hasChildren property. If they are added, but simply not expanded, you might need to serialize the expanded property from the server.

I have created a sample jsBin that should help you in describing your scenario (mocking the server-side requests). If you hit a problem, please try to reproduce in in the sample -- this way the communication will be optimal, and you won't need to send the complete project.

All the best,
Alex Gyoshev
the Telerik team

[AP]

Thanks for this,

I've tried altering my datasource definition to:-

var treeSource = new kendo.data.HierarchicalDataSource({

    schema:{

        model:{

            hasChildren:"HasChildren",

            Encoded:"Encoded"

        }

    }

And the expand arrow is now displayed, but the tree doesn't expand!

Whilst I appreciate there is new template functionality (which I may well have used if I was starting from scratch), the html generation is quite complex, and I don't want to re-write this, without an extremely good reason (as it's also used for other UI elements outside the treeview).

The server side TreeView object has an encoded property (along with enabled and expanded properties), how can I pass this to the treeview, to get it to render the text in html?

[Alex Gyoshev]

> And the expand arrow is now displayed, but the tree doesn't expand!

Consider upgrading to the latest internal build, as it contains some fixes in that regard.

Regarding the encoding of items, you can simply use the following treeview template to suppress all encoding:

    template: "#= item.text #" // or change `text` to the text field that you are using

Greetings,
Alex Gyoshev
the Telerik team

[AP]

Thanks for this.

The html is now displaying on the top level tree items, but even after updating to the layest internal build (version 2012.2.723), the tree won't expand.

The data is a collection of TreeView items returned via JSON, and looking at the data in Fiddler, child items are definately present (in the Items property).

Do I need to define anything else in the datasource to pick these up?

[Alex Gyoshev]

Hello Andrew,

You might need to serialize the hasChildren property from the server, so that the TreeView is notified that the given items have children. If you need further help, please open a support ticket and supply a working solution that shows the problem that you are experiencing.

All the best,
Alex Gyoshev
the Telerik team

[AP]

Thanks, I've created two sample applications and rasied a support ticket.

[muralidhar]

Hi,

I have same problem while binding HierarchicalDataSource to treeview. Treeview is displaying but it wont expand even after JSON object contains expanded property as true. We get the minus icon but treeview wont expand.While clicking manually on minus icon then it expands. Could you please help me how to expand a node programetically through JSON object.

Thanks,
Muralidhar.

[Brannon]

How would you refresh the children of a specific node in the TreeView instead of for the entire treeview?