Treeview load via ajax gives error when pushing items to options.success method.

[IT Valk Solutions]

Hi,

I am trying to create a kendo TreeView (html version) using the following code:

01.var div = $("#divColours");
02.var oid = "12312312", rnd = ((new Date()).getTime()).toString();
03.div.kendoTreeView({
04.  dataTextField: "label",
05.  dataSource: new kendo.data.DataSource({
06.    type: "json",
07.    serverFiltering: false,
08.    transport: {
09.      read: function (options) {
10.        $.ajax({
11.          url: "Controllers/GenericController.ashx?rnd=" + rnd,
12.          dataType: "json",
13.          data: { "parms": ko.toJSON({ cmd: "coloursroot", sysoid: oid }) },
14.          contentType: "application/json; charset=utf-8",
15.          success: function (payLoad) {
16.            if (payLoad.Success) {
17.              var i = ko.toJSON(payLoad.Items);
18.              options.success(i);
19.            } else {
20.            };
21.          },
22.          error: function (jqXHR, textStatus, errorThrown) {
23.            debugger;
24.          },
25.          complete: function () {
26.          }
27.        })
28.      } //read
29.    },
30.    schema: {
31.      model: { hasChildren: false }
32.    } //transport
33.  }) //datasource
34.});

At line 17 my payload items array (which actually is a JSON array)  is converted to string and this is the result:

[{"label":"Zwart","value":"4","haschildren":"true"},{"label":"Wit","value":"1","haschildren":"true"},{"label":"Grijs","value":"7","haschildren":"true"},{"label":"Bruin","value":"8","haschildren":"true"},{"label":"Beige","value":"9","haschildren":"true"},{"label":"Rood","value":"10","haschildren":"true"},{"label":"Geel","value":"11","haschildren":"true"},{"label":"Groen","value":"12","haschildren":"true"},{"label":"Blauw","value":"13","haschildren":"true"},{"label":"Overige kleuren","value":"14","haschildren":"true"}]

Next I set the "options.success" with the result and this is giving me an exception (this exception occurs in the custom kendo js):
"Unable to get value of the property 'toLowerCase': object is null or undefined."

I have tried many things (like using integers for "value" and booleans for "haschildren") but could not find a solution to this problem. Also changed the model, but no success either.

Even when I (manually) change the result to a simplified array like :
"[{"label":"Zwart"},{"label":"Wit"},{"label":"Grijs"},{"label":"Bruin"},{"label":"Beige"},{"label":"Rood"}]"
The same error occurs!

Please help.

Regards,
Robert

[Alex Gyoshev]

Hello Robert,

The TreeView requires the use of a HierarchicalDataSource rather than a DataSource. Here is a jsBin sample that mocks the call to the server and binds properly. Note that with the current schema, the hasChildren property will always be false (and items will never show an expand arrow). If you want to have load-on-demand functionality, see this jsBin.

Greetings,
Alex Gyoshev
the Telerik team

[IT Valk Solutions]

Hi Alex,

Thanks for your reply. Indeed, I forget to change the datasource... Coding blindness I guess. :)

One other question relating this same treeview.
Now that the root is loaded I want to use another Ajax call to load the children. I expected to get the identifier in the read method and give that identifier to my load method. But something else occurs: When I click a node an error occurs that the attribute "uid" does not exist. This is before the transport.read method is called.

I have changed the model to:

schema: {
  model: { uid:"value", hasChildren: "haschildren" }
} //transport

But this doesn't help.

So I have 2 questions:
1. How do I set up a second Ajax call to load the children? The examples I can find only use 2 different datasources.
2. How can I get the selected item to pass as parameter to my load children method?

Thanks again!
Regards,
Robert

[Alex Gyoshev]

Hello Robert,

If you have a custom id field, it should be specified in the id model configuration. This way it gets passed in the options.data object. Here's the updated jsBin.

Regards,
Alex Gyoshev
the Telerik team

[IT Valk Solutions]

Hi Alex,

Unfortunally, this does not work: I still get the kendo exception "uid" is not defined the moment I click on a treenode. I can see it works in jsBin but it doesn't work in real live.

This is my code now:

01.div.kendoTreeView({
02.  dataTextField: "label",
03.  dataSource: new kendo.data.HierarchicalDataSource({
04.    type: "json",
05.    serverFiltering: false,
06.    transport: {
07.      read: function (options) {
08.        debugger;
09.        $.ajax({
10.          url: "Controllers/GenericController.ashx?rnd=" + rnd,
11.          dataType: "json",
12.          data: { "parms": ko.toJSON({ cmd: "coloursroot", sysoid: oid }) },
13.          contentType: "application/json; charset=utf-8",
14.          success: function (payLoad) {
15.            if (payLoad.Success) {
16.              options.success(payLoad.Items);
17.            } else {
18.            };
19.          },
20.          error: function (jqXHR, textStatus, errorThrown) {
21.            debugger;
22.          },
23.          complete: function () {
24.          }
25.        })
26.      } //read
27.    },
28.    schema: {
29.      model: { id: "value", hasChildren: "haschildren" }
30.    } //transport
31.  }) //datasource
32.});

As you can see I changed the model to include the "id".

The "uid" exception occurs when I click any treenode. The order of events:
1. click any treenode.
2. transport.read is executed again (why?) I have no options.data.value object available at this time.
3. Exception in kendo custom js: "Unable to get value of the property 'uid': object is null or undefined"
4. transport.read is executed again, options.data.value is filled which the selected value (that's correct I suppose).
5. upon ajax load success: the treeview is NOT updated, but I guess this is because of the "uid" exception.

[Alex Gyoshev]

Hello Robert,

We are not aware of such an issue. You may try to upgrade the project to the latest internal build which solves some issues with custom transport handlers. If that doesn't help, please provide a sample that reproduces the problem, either by modifying the jsBin example or as a sample project.

Kind regards,
Alex Gyoshev
the Telerik team

[IT Valk Solutions]

Hi Alex,

At this moment I cannot provide an external link to my services but I have created a jsFiddle. 
This fiddle works fine and the only difference with your jsBin is that an Ajax call is used and jsFiddle just echoes the data.

The strange part here is that my real code is exactly the same except for the url. My real url points to my webservice however, the returned data is not used! Instead the "test" array is used like the jsFiddle code.

Any ideas? I am using the same kendo build as the jsFiddle and jsBin examples.

** Addition May 4th **
I tried using some of your public json but I can't get this to work in jsFiddle/jsBin, maybe you can?

01.div.kendoTreeView({
02.  dataTextField: "date",
03.  // the treeview requires the use of a HierarchicalDataSource
04.  dataSource: new kendo.data.HierarchicalDataSource({
05.    type: "json",
06.    serverFiltering: false,
07.    transport: {
08.      read: function (options) {
09.        $.ajax({
10.          url: "http://demos.kendoui.com/content/dataviz/dashboards/stock-data-2011.json",
11.          dataType: "json",
12.          success: function (payLoad) {
13.            options.success(payLoad);
14.          },
15.          error: function (jqXHR, textStatus, errorThrown) {
16.            alert(errorThrown);
17.          },
18.          complete: function () {
19.            alert("completed");
20.          }
21.        })//ajax
22.      } //read
23.    }, //transport
24.    schema: {
25.      model: {
26.        id: "close",
27.        hasChildren: "haschildren"
28.      }
29.    } //schema
30.  }) //datasource
31.});

This also indicates another bug (?) which occurs not only in the treeview but also in the combobox: Once the loading animation is started and the read of data fails or no data is available, there is no way to stop the loading animation?

Regards,
Robert

[IT Valk Solutions]

Hi Alex,

I have tried using your json inside my website using this javascript code:

01.url = "http://demos.kendoui.com/service/Employees";
02.div.kendoTreeView({
03.  dataTextField: "FullName",
04.  dataSource: new kendo.data.HierarchicalDataSource({
05.    serverFiltering: false,
06.    transport: {
07.      read: {
08.        //debugger;
09.        url: url,
10.        dataType: "jsonp"
11.      } //read
12.    },
13.    schema: {
14.      model: { id: "EmployeeID", hasChildren: "HasEmployees" }
15.    } //transport
16.  }) //datasource
17.});

The initial load of the treeview works fine, I can see "Andrew" in the list. The url I use comes from your demo for remote data.
However, the same problem occurs! Very strange. In my jsFiddle page is works fine.

Any ideas?
Regards

[Alex Gyoshev]

Hello Robert,

The problem with the last example is that the id field is misspelled (it should be with a lowercase d). After changing this, the example starts working.

The stock data JSON file cannot be loaded through cross-domain requests, so binding to it isn't possible.

> there is no way to stop the loading animation
We have logged this problem for fixing.

> The strange part here is that my real code is exactly the same except for the url. My real url points to my webservice however, the returned data is not used!
Please verify that the datasource is properly configured, as well as that the service returns valid JSON, with the proper content-type header. See if the service is called with the proper arguments by the datasource, and that the returned data is correct through the Network tab of the developer console. If the problem persists, please send a reproduction that shows the problem.

Regards,
Alex Gyoshev
the Telerik team

[IT Valk Solutions]

Hi Alex,

I have found the source of the problem: In my 'real' page I create the div like this:

<div onclick="javascript:CreateTree();">Create tree</div>

Of course, this was just for testing purposes but this is also the root of the problem: Because of the onclick event the tree tries to be created again and again (I suppose). After removing the onclick the tree worked fine. I know I caused the issue but maybe it's something you can prevent as well?

Thanks for your support!

> there is no way to stop the loading animation
We have logged this problem for fixing.

Ok, how can I subscribe to the solution?

[Alex Gyoshev]

Hello Robert,

> I know I caused the issue but maybe it's something you can prevent as well?
We will consider possible ways of changing this. Until we do, you can check if the widget is already initialized before initializing it.

> Ok, how can I subscribe to the solution?
We do not provide public issue tracking at this time. We will strive to fix the ComboBox issue until the official SP release which should be out next week. The TreeView issue is fixed in the next internal build (published later today) -- and we also provided UI for reloading nodes with failed requests.

Greetings,
Alex Gyoshev
the Telerik team