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

Treeview Does Not Appear on Page

1 Answer 237 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Rich
Top achievements
Rank 1
Rich asked on 29 Jul 2013, 07:44 PM
First of all...this is my first Kendo app...I've been using Telerik controls for a couple of years, but we are upgrading and this is my first attempt here.

I have a simple app that I have extracted from my real page, that I cannot seem to get the treeview to show up on.  The data appears to be getting there, but I'm missing something on my definition, I just don't know what.

Here is the HTML:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CDefault.cs" Inherits="CDefault" %>

<%@ Register Assembly="ABL.Controls, Version=1.0.0.0, Culture=neutral, PublicKeyToken=d35011ca6b35a98a" Namespace="ABL.Controls" TagPrefix="cc1" %>

<!DOCTYPE html>
<html>
<head>

<title>View Document Library</title>

<!-- Kendo styles from the CDN! -->
<link href="https://da7xgjtj801h2.cloudfront.net/2013.1.319/styles/kendo.blueopal.min.css" rel="stylesheet" />
<link href="https://da7xgjtj801h2.cloudfront.net/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" />

</head>
<body id="pageBody">
<form id="form1" runat="server">
<div>
<div id="treeviewLeft" >
</div> 
<br />
<table>
<tr>
<td></td>
<td style="padding-left:120px">
<button class="k-button" id="btnUploadDocument">Upload Document</button>
</td>
<td style="padding-left:820px">
<button class="k-button" id="btnUseSelected">Use Selected</button>
&nbsp;&nbsp;
<button class="k-button" id="btnClose">Close</button>
</td>
<td></td>
</tr>
</table>
</div>
<!-- JavaScript at the bottom for fast page loading -->

<!-- Fix for IE < 8 that don't have built in JSON support -->
<script src="javascript/json2.js" type="text/javascript"></script>

<!-- Grab Google CDN's jQuery, with a protocol relative URL -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- IE HTML5 enabling script: -->
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<!--kendo web-->
<script src="https://da7xgjtj801h2.cloudfront.net/2013.1.319/js/kendo.web.min.js"></script>

<!-- libraries -->
<script src="libs/rotate/jQueryRotateCompressed.2.2.js" type="text/javascript"></script>
<script src="libs/jQueryFileDownload/jquery.fileDownload.js" type="text/javascript"></script>

<!-- local javascript -->
<script src="javascript/authentication.js" type="text/javascript"></script>
<script src="javascript/adcUtilities.js" type="text/javascript"></script>
<script src="javascript/CdefaultViewController.js" type="text/javascript"></script>

<%--<% End If%>--%>
</form>
</body>
</html>

AND here is the Controller file:
// Copyright 2013 Acuity Brands Lighting, Inc. All Rights Reserved.

// This is the view controller for the default.aspx web page.

$(function () {

$.ajax({
//Call for data goes here
url: 'Data/data.aspx',
dataType: 'json',
async: true,
success: function (returnedTreeNodeData)
{
$('#loadingIndicator').remove();
console.log("Get TreeviewNodeData CALL SUCCESS");
console.log("********** treeView data: JSON structure data, from the data.aspx Call **********");
console.log(JSON.stringify(returnedTreeNodeData, null, 1));
alert("Get TreeviewNodeData Success!");
treeView.dataSource.data(returnedTreeNodeData);
}
})

var treeView = $("#treeviewLeft").kendoTreeView({
expanded: true,
autoBind: true,
dataTextField: "Text",                                  //I've tried several things here...so far no joy.
items: "ChildNodes",
datasource: []
}).data("kendoTreeView");
});

AND here is where I get my data, which as I say appears to be getting to the Controller just fine.  BTW...this is a treeview Light version of what I'll eventually be sending.


#region DataClass

[Serializable]
public class TreeviewNodeData
{
private TreeNode tNode;
public TreeNode libraryNde
{
get
{
tNode = new TreeNode("Rep Library");
return tNode;
}
set
{ }
}

public List<TreeNode> topNde { get; set; }
}

#endregion


public partial class Data_data : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string hold_brand = string.Empty;
string output = "default";
JavaScriptSerializer jss = new JavaScriptSerializer();

TreeviewNodeData tvOut = new TreeviewNodeData();
List<TreeNode> tList = new List<TreeNode>();

TreeNode ABLParentNode = new TreeNode("ABL");
tList.Add(ABLParentNode);
TreeNode NonABLParentNode = new TreeNode("non-ABL");
tList.Add(NonABLParentNode);
tvOut.topNde= tList;

 output = jss.Serialize(tvOut);

//Output the response
Response.Clear();
Response.ContentType = "application/json";
Response.Write(output);
Response.End();
}
}


Anyone see what I'm missing or have any suggestions?  The page comes up with the buttons on the bottom, but nothing else is on the page.

Thanks.

1 Answer, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 31 Jul 2013, 02:20 PM
Hi Rich,


When specifying the dataSource configuration for the TreeView and binding it to local data, the TreeView should be aware of mainly two things:
  1. Which model field should be used to display the text of the node. This is configured via the dataTextField property of the TreeView.
  2. Which model field contains the collection of child nodes. This is configured by the schema.model.children configuration of the HierarchicalDataSource.

This is the reason for the issue in the current implementation too i.e. the data is correctly received (as you stated), but it is not bound correctly. The following online demo demonstrates the same case. Here is the relevant code for the current scenario:
var inline = new kendo.data.HierarchicalDataSource({
    data: [
        { categoryName: "Storage", subCategories: [
            { subCategoryName: "Wall Shelving" },
            { subCategoryName: "Floor Shelving" },
            { subCategoryName: "Kids Storage" }
        ] },
        { categoryName: "Lights", subCategories: [
            { subCategoryName: "Ceiling" },
            { subCategoryName: "Table" },
            { subCategoryName: "Floor" }
        ] }
    ],
    schema: {
        model: {
            children: "subCategories"
        }
    }
});
 
$("#treeview-right").kendoTreeView({
    dataSource: inline,
    dataTextField: [ "categoryName", "subCategoryName" ]
});

As mentioned above, the dataTextField is specifying the text fields, which should be used for each level of the TreeView and the schema.model.children property is specifying which field contains the children.

As a side notes, you could use the setDataSource method when the data is received. Also, make sure that the common.css file is included before the theme.css file. 

I hope that this information was helpful for you. I wish you a great day!

 

Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TreeView
Asked by
Rich
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or