Error when attempting to change datasource on treeview

[aborg]

I have quite the odd script going to try and get something working that is fairly hacked together. I have 2 DropDownLists, one is a standard DropDownListFor and the other is a KendoDropDownList that I have used some javascript I found on these forums to insert a KendoTreeView into it's contents. What I'm trying to achieve is to change the datasource of the treeview based on the selection of the first DropDownList. I have accomplished this but I am now getting an error when trying to update the datasource on the treeview. The error occurs in kendo.web.min.js and is in the following block:

_attachUids: function(b, d) {

            var e = this, f, g = c.attr("uid");

            b = b || e.root, d = d || e.dataSource, f = d.view(), b.children("li").each(function(b, c) {

                c = a(c).attr(g, f[b].uid), e._attachUids(c.children("ul"), f[b].children)

            })

With this error text:

1. Uncaught TypeError: Cannot read property 'uid' of undefined kendo.web.min.js:8376
   1. (anonymous function)kendo.web.min.js:8376
   2. jQuery.extend.eachjquery-1.7.1.js:661
   3. jQuery.fn.jQuery.eachjquery-1.7.1.js:271
   4. i.extend._attachUidskendo.web.min.js:8375
   5. i.extend.initkendo.web.min.js:8372
   6. (anonymous function)kendo.web.min.js:708
   7. jQuery.extend.eachjquery-1.7.1.js:661
   8. jQuery.fn.jQuery.eachjquery-1.7.1.js:271
   9. a.fn.(anonymous function)kendo.web.min.js:707
   10. (anonymous function)Create:249
   11. jQuery.event.dispatchjquery-1.7.1.js:3261
   12. elemData.handle.eventHandle

Here is the offending code that this is called from:

@Html.LabelFor(model => model.Incident.RequestType)

@Html.DropDownListFor(model => model.Incident.RequestType, new SelectList(Model.RequestTypes, null, "Name"))

@Html.ValidationMessageFor(model => model.Incident.RequestType)

               <script>

                   $(function() {

                       $('#Incident_RequestType').change(function () {

 

                           var elems = document.getElementsByTagName('*'), i;

                           for (i in elems) {

                               if ((' ' + elems[i].className + ' ').indexOf(' k-input ')

                                       > -1) {

                                   elems[i].innerHTML = '';

                               }

                           }

                            

                          // Get new datasource

                          var subjectDataSource = new kendo.data.HierarchicalDataSource({

                               transport: {

                                   read: {

                                       dataType: "json",

                                       type: "POST",

                                       url: "/Incident/GetSubjectsByRequestType/",

                                       data: { //additional parameters sent to the remote service

                                           requestType: function () {

                                               return $("#Incident_RequestType").val();

                                           }

                                       }

                                   }

                               },

                               schema: {

                                   model: {

                                       id: "RequestType",

                                       hasChildren: "HasChildren",

                                       children: "Children"

                                   }

                               }

                           });

 

                          // Update datasource on treeview

                           subjectDataSource.read();

                           $("#treeview").kendoTreeView({

                               dataSource: subjectDataSource,

                               dataTextField: ["Title", "Title"],

                               loadOnDemand: false

                           }).data("kendoTreeView");

                       });

                   });

                   

               </script>

I cannot figure out what to do to get this working without throwing the error. The datasource does get updated and it all seems to work okay in Chrome but the error is getting thrown and IE complains about it when debugging. Any help would be appreciated.

Thanks,

Brian

[Daniel]

Hi Brian,

The most likely reason for the problem is that the TreeView is initialized multiple times. You should either destroy it with the destroy method before creating it again or use the setDataSource method instead to set the new dataSource.

Regards,
Daniel
the Telerik team