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>
<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.
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>
<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.