Hello,
I am having difficulty incorporating the tree view into an existing project. This is the error that I am getting: "jQuery(...).kendoTreeView is not a function". When the page loads, it shows the diagram without any problems, but the tree view is just the text: "Item 1" and "Item 2." There is no functionality and the data from the datasource does not appear.
The only script files being loaded are the mindfusion.diagramming.js and jquery-1.10.2.js, so maybe there are other script files that need to be loaded, which are being prevented from doing so? Or maybe the order of the jquery files in the layout are incorrect? Could someone please advise me on what to do?
Here is my layout:
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - My ASP.NET Application</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) <link href="@Url.Content("~/Content/kendo/2016.2.607/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/kendo/2016.2.607/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/kendo/2016.2.607/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/kendo/2016.2.607/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/kendo/2016.2.607/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/kendo/2016.2.607/jquery.min.js")"></script> <script src="@Url.Content("~/Scripts/kendo/2016.2.607/jszip.min.js")"></script> <script src="@Url.Content("~/Scripts/kendo/2016.2.607/kendo.all.min.js")"></script> <script src="@Url.Content("~/Scripts/kendo/2016.2.607/kendo.aspnetmvc.min.js")"></script> <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script> </head><body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> </ul> </div> </div> </div> <div class="container body-content"> @RenderBody() <hr /> <footer> <p>© @DateTime.Now.Year - My ASP.NET Application</p> </footer> </div> </body></html>
And in my sample page:
@using MindFusion.Diagramming;
@using MindFusion.Diagramming.Mvc;
@using System.Drawing;
@using MindFusion.Diagramming.Layout;
@using SolidBrush = MindFusion.Drawing.SolidBrush;
@using LinearGradientBrush = MindFusion.Drawing.LinearGradientBrush;
@using Kendo.Mvc.UI;
@{
// initialize the DiagramView control
DiagramView view = new DiagramView("diagramView");
Diagram diagram = view.Diagram;
//Diagram's BackBrush property defines the default color with which the interior of the diagram will be filled
diagram.BackBrush = new SolidBrush(Color.Azure);
//LinkHeadShape and LinkHeadShapeSize properties define the default base shape and size for links' ending arrowhead
diagram.LinkHeadShape = ArrowHeads.Triangle;
diagram.LinkHeadShapeSize = 3;
//DiagramStyle style = new DiagramStyle();
//style.FontFamily = "Times New Roman";
//style.Brush = new LinearGradientBrush(Color.LightBlue, Color.Blue, 90);
//style.Stroke = new SolidBrush(Color.Black);
//diagram.Style = style;
Theme theme = new Theme();
ShapeNodeStyle style = new ShapeNodeStyle();
style.FontFamily = "Courier New";
//Default fill color for shapes
style.Brush = new LinearGradientBrush(Color.Pink, Color.Green, 90);
theme.RegisterStyle(typeof(ShapeNode), style);
diagram.Theme = theme;
// add some nodes and links to the view's Diagram
//ShapeNode objects can be drawn as various geometric shapes, as set through their Shape property.
//The Shape property can be set to one of the predefined shapes: RoundRect, Rectangle, Ellipse, Process, Procedure, Delay
ShapeNode node1 = diagram.Factory.CreateShapeNode(new RectangleF(55, 10, 40, 15));
node1.Shape = Shapes.Terminator;
node1.Text = "Start";
node1.Tag = node1.Id;
node1.Brush = new LinearGradientBrush(Color.Yellow, Color.Orange, 90);
ShapeNode node2 = diagram.Factory.CreateShapeNode(new RectangleF(50, 40, 50, 20));
node2.Text = "Receive order via e-mail";
node2.Tag = node2.Id;
ShapeNode node3 = diagram.Factory.CreateShapeNode(new RectangleF(50, 70, 50, 20));
node3.Text = "Copy and paste e-mail data into database";
node3.Tag = node3.Id;
ShapeNode node4 = diagram.Factory.CreateShapeNode(new RectangleF(55, 100, 40, 40));
node4.Shape = Shape.FromId("Decision");
node4.Text = "Shipping involved?";
node4.Brush = new LinearGradientBrush(Color.White, Color.Fuchsia, 90);
node4.Tag = node4.Id;
ShapeNode node5 = diagram.Factory.CreateShapeNode(new RectangleF(100, 135, 50, 20));
node5.Shape = Shape.FromId("Save");
node5.Text = "Print invoice and UPS label";
node5.Brush = new SolidBrush(Color.Chartreuse);
node5.Tag = node5.Id;
ShapeNode node6 = diagram.Factory.CreateShapeNode(new RectangleF(100, 165, 50, 20));
node6.Text = "Send e-mail to confirm shipping";
node6.Tag = node6.Id;
diagram.Nodes.Add(node6);
ShapeNode node7 = diagram.Factory.CreateShapeNode(new RectangleF(100, 195, 50, 20));
node7.Text = "Assemble package and ship";
node7.Tag = node7.Id;
ShapeNode node8 = diagram.Factory.CreateShapeNode(new RectangleF(55, 230, 40, 15));
node8.Shape = Shapes.Terminator;
node8.Text = "End";
node8.Brush = new LinearGradientBrush(Color.Yellow, Color.Orange, 90);
node8.Tag = node8.Id;
diagram.Factory.CreateDiagramLink(node1, node2);
diagram.Factory.CreateDiagramLink(node2, node3);
diagram.Factory.CreateDiagramLink(node3, node4);
//Add links
DiagramLink link4 = diagram.Factory.CreateDiagramLink(node4, node5);
link4.Text = "Yes";
diagram.Factory.CreateDiagramLink(node5, node6);
diagram.Factory.CreateDiagramLink(node6, node7);
diagram.Factory.CreateDiagramLink(node7, node8);
DiagramLink link8 = diagram.Factory.CreateDiagramLink(node4, node8);
link8.Text = "No";
ContainerNode node9 = diagram.Factory.CreateContainerNode(new RectangleF(200, 255, 100, 40));
node9.Caption = "hi";
node9.CaptionFormat.Alignment = StringAlignment.Center;
node9.CaptionHeight = 12;
node9.CaptionBrush = new SolidBrush(Color.Blue);
diagram.Nodes.Add(node9);
//Store the view in the ViewBag dictionary
//Registers an object with the control
ViewBag.DiagramView = view;
}
<div id="treeview-left">
@(Html.Kendo().TreeView()
.Name("treeview") //The name of the treeview is mandatory. It specifies the "id" attribute of the widget.
.Items(items =>
{
items.Add().Text("Item 1"); //Add item with text "Item1")
items.Add().Text("Item 2"); //Add item with text "Item2")
})
.Events(e => e
.Expand("treeview_expand")
.Collapse("treeview_collapse")
)
)
</div>
<script>
function treeview_collapse() {
//Handle the collapse event
}
function treeview_expand() {
//Handle the expand event
}
$(document).ready(function () {
$("#treeview-left").kendoTreeView({
dragAndDrop: true,
dataSource: [
{
text: "Furniture", expanded: true, items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
]
},
{
text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
]
}
]
});
});
</script>
@Html.DiagramView((DiagramView)ViewBag.DiagramView, new { style = "width:700px; height:500px" })
1 Answer, 1 is accepted
0
Hello Margaret,
The specified JavaScript error is usually caused by one of the following:
- a jQuery instance is loaded after the Kendo UI script file registrations
- the Kendo UI JavaScript files cannot be loaded, e.g. due to incorrect URLs
Please veirfy.
http://docs.telerik.com/kendo-ui/troubleshoot/troubleshooting-common-issues#widgets-are-unavailable-or-undefined
On a side note, I see that the web page tries to initialize two nested TreeView widgets - one from a <div> and one from the server-side TreeView declaration that is placed inside the <div>. Such a setup does not make sense. Please use two separate non-nested TreeViews, i.e. move the server declaration outside the <div> with a "treeview-left" ID.
Regards,
Dimo
Telerik
The specified JavaScript error is usually caused by one of the following:
- a jQuery instance is loaded after the Kendo UI script file registrations
- the Kendo UI JavaScript files cannot be loaded, e.g. due to incorrect URLs
Please veirfy.
http://docs.telerik.com/kendo-ui/troubleshoot/troubleshooting-common-issues#widgets-are-unavailable-or-undefined
On a side note, I see that the web page tries to initialize two nested TreeView widgets - one from a <div> and one from the server-side TreeView declaration that is placed inside the <div>. Such a setup does not make sense. Please use two separate non-nested TreeViews, i.e. move the server declaration outside the <div> with a "treeview-left" ID.
Regards,
Dimo
Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items