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" })

Hello,
here is another case where I get dates picked corretly but when posted to the server the date is one day behind the picked date.
I have placed a single grid in a razor view. The first field (TestItem) of the grid is populated with a custom dropdown-editor and the 2nd field (TestDate) with a custom dateEditor. The grid itself uses api-controller CRUD actions.
<div class="full-height full-width"> <div id="sample-grid" class="full-height"></div></div>@section scripts { <script type="text/javascript"> function ItemDropDownEditor(container, options) { $('<input required data-text-field="System" data-value-field="Code" data-bind="value:' + options.field + '"/>') .appendTo(container) .kendoDropDownList({ autoBind: false, dataSource: gridDataSource(actions.sample.getTestItems, 50) }); } function TestdateEditor(container, options) { $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>') .appendTo(container) .kendoDatePicker({}); } $(function () { // Client side kendo data source passed to kendo grid. Uses AllSamplesController for CRUD operations. var sampleGridDataSource = new kendo.data.DataSource({ batch: true, pageSize: 20, schema: { model: { id: "Id", fields: { Id: { type: "number", editable: false }, TestItem: { defaultValue: { Code: "001", System: "none"} }, TestDate: { type: "datetime" }, } } }, transport: { read: { url: actions.common.rootUrl + "api/Allsamples/?anlagenId=" + amplify.store("SelectedItemId"), type: "Get" }, create: { url: actions.common.rootUrl + "api/Allsamples/?anlagenId=" + amplify.store("SelectedItemId"), type: "PUT", contentType: 'application/json;charset=utf-8' }, update: { url: actions.common.rootUrl + "api/Allsamples/?anlagenId=" + amplify.store("SelectedItemId"), type: "PUT", contentType: 'application/json;charset=utf-8' }, destroy: { url: actions.common.rootUrl + "api/Allsamples", type: "DELETE", contentType: 'application/json;charset=utf-8' }, parameterMap: function(data, operation) { if (operation != "read") { return kendo.stringify(data.models); } } }, requestEnd: function(e) { if (e.type == "create") { this.read(); } }, change: function(e) { //if (e.action == "itemchange" || e.action == "add" || e.action == "remove") if (e.action == "itemchange") { window.sampleViewModel.setIsDirty(true); } } }); var sampleGrid = $("#sample-grid").kendoGrid({ dataSource: sampleGridDataSource, scrollable: true, navigatable: true, sortable: true, columnMenu: true, selectable: "row", editable: { confirmation: "Delete the selected record?", }, pageable: { pageSizes: [10, 20, 50], refresh: true, }, filterable: true, resizable: true, height: 500, columns: [ { field: "TestItem", title: "TestItem", width: "120px", editor: ItemDropDownEditor, template: "#=Items.System#", }, { field: "TestDate", title: "TestDate", width: "100px", type: "date", format: "{0:dd.MM.yyyy}", editor: TestdateEditor, filterable: { ui: "datepicker" } }, ] }).data().kendoGrid; sampleGridDataSource.bind('dataBound', function(e) { this.element.find('tbody tr:first').addClass('k-state-selected'); }); var jsonModel = @Html.Raw(Json.Encode(Model)); var sampleViewModel = new sampleViewModel(jsonModel, sampleGrid); kendo.bind($("body"), sampleViewModel); }); </script>}
Does anybody have an idea what causes the offset of one day?
Best regards
Manu
Hello,
I'm looking to add a embedded link column to a kendo grid for a networked file or folder. (ex:123Fake.txt has an embedded hyperlink of \\Server1\Folder1\123Fake.txt )
The server that will run the site is in the same network as Server1 so I don't see security as a problem. After a day of trying to setup a example and getting nowhere I need a hand with how to do this properly. If it isn't possible then confirmation it's not possible will work too.
thanks


Hello!
Could you please provide a sample project similar to this one, but with a foreign key column? I was trying to implement this on my own, but wasn't successful.
http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/how-to/grid-bind-to-datatable
Best regards,
Kaan

Hi!
I have an editor template (DATETIMEEDIT.cshtml) for date times, which I use in a Grid and also in an ordinary form:
@model DateTime?
@(Html.Kendo().DateTimePickerFor(m => m)
.TimeFormat("HH:mm")
.HtmlAttributes(new { style = "width:100%;" })
)
The editor is bound to the Grid in this way:
var c = columns.Bound(fieldName);
c.EditorTemplateName("DATETIMEEDIT");
c.Format("{0:dd.MM.yyyy HH:mm}");
And this is how the editor is integrated into the HTML form:
@Html.EditorFor(v => dateTime, "DATETIMEEDIT", fieldName)
When I update the date and time, the Grid sends it back to the server as "3/21/2016 5:35:00 PM", and the form as "21.03.2016 17:35".
However, I need a reliable DateTime exchange format between the server and the client. "dd.MM.yyyy HH:mm" (24 hour) would be ok, but any other consistant solution would be alright too because if the server receives an unpredictable format, then I can't convert it into a C# DateTime object. Maybe there is another preferrable way to handle date times between the client and server? I don't even know why the Grid uses the American format as default because I work on a German workstation here.
Best,
Kaan

I have noticed many glaring omissions and incomplete documentation when trying to look up how to use some of these components. For example, for the MVC Grid documentation found at http://demos.telerik.com/aspnet-mvc/grid/remote-data-binding it shows in the cshtml code:
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>() .Name("grid") .Columns(columns => { columns.Bound(p => p.OrderID).Filterable(false); columns.Bound(p => p.Freight); columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}"); columns.Bound(p => p.ShipName); columns.Bound(p => p.ShipCity); }) .Pageable() .Sortable() .Scrollable() .Filterable() .HtmlAttributes(new { style = "height:550px;" }) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Read(read => read.Action("Orders_Read", "Grid")) ))Notice the Read method on the DataSource method, pointing to a GET Action called "Orders_Read" in the "Grid" controller. Of course looking at the controller code example only shows:
using System.Web.Mvc;using Kendo.Mvc.UI;using Kendo.Mvc.Extensions;namespace Kendo.Mvc.Examples.Controllers{ public partial class GridController : Controller { public ActionResult Remote_Data_Binding() { return View(); } }}No Orders_Read action there, and no clue as to what other actions the DataSource object can make use of in this Grid context. I assume the user is supposed to go look up the DataSource component now, which may or may not have an HtmlHelper. I've noticed that about a few other components... needing to do something, trying to find hhelp and it takes one to the Kendo UI documentation, where the syntax and building of these components is vastly different than the HTML Helpers of the MVC libraries.
So what is the best way to actually learn how to use these components? I'm looking for all levels of help, basic, intermediary, and advanced. Like using an MVC Grid and the MVVM model together from C# ASP.NET...
We have an Issue with the Server-side filtering feature from the kendoAutoComplete. This autocomplete is contained in a html form tag. When the request is performed on the asp.net mvc endpoint the DataSourceRequest is completly empty, becuase all the values for this object are in HttpContext.Request.Form, from where the DataSourceRequestAttribute doesn't parse it from. What should we do, to get the DataSourceRequest correctly bound?
HTML Code
<form class="navbar-form" role="search" method="post" action="@Url.Action("Results","Search")">
// some other controls
<div class="input-group">
<span class="k-widget k-autocomplete k-header k-state-default myClass">
<input type="text" id="autoCompleteSearch" name="autoCompleteSearch" class="form-control" />
</span>
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
JS Code:
$('#autoCompleteSearch').kendoAutoComplete({
minLength: 1,
dataTextField: 'Caption',
dataValueField: 'Value',
filter: "contains",
dataSource: {
serverFiltering: true,
transport: {
read: {
type: "post",
dataType: "json",
url: '@Url.Action("AdvancedSearchAutoComplete_Read", "AjaxValues")?searchType=' + window.searchType
}
},
schema: {
data: "Data"
}
}
});
Server-side:
[System.Web.Mvc.HttpPost]
public JsonResult AdvancesSearchAutoComplete_Read(int searchType, [DataSourceRequest] DataSourceRequest request)
{
//...
}
Thank you in advance!

Hello,
is it possible to remove the title and the Update and Cancel button so that I can use my own template?
(if yes how to call the upade and cancel with javascript)
I want to have my own Toolbar with update and cancel and some other bottons and also e special title bar...
robert
Hello,
I am a beginner with kendo UI and have a problem with the following input box:
<input data-role="datepicker" data-format="dd.MM.yyyy" data-bind="enabled: isEnabled, value: DateToSave" />The date is picked correctly (displayed on the page), but after saving to the server the value in the server table is one day off. The displayed value on the page (after saving) is also one day off from the picked value.
These are the project infos:
- Telerik ASP.NET MVC 4 (v2013.3.1119)
- culture: "de-AT"
editorTemplate and DateTimeModelBinder
@model DateTime?<div class="span-datepricker"> <input name="datepicker" /></div><script> $(document).ready(function () { // create DatePicker from input HTML element $("input[name='datepicker']").kendoDatePicker(); });</script>
using System;using System.Globalization;using System.Web.Mvc;namespace Presentation.Host.App_Start{ public class DateTimeModelBinder : IModelBinder { private const string DateTimePattern = "ddd MMM dd yyyy HH:mm:ss 'GMT'zzz"; public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext) { string value = bindingContext.ValueProvider.GetValue(bindingContext.ModelName).AttemptedValue; if (!string.IsNullOrWhiteSpace(value)) { int timeZoneInfoIndex = value.IndexOf(" (", StringComparison.Ordinal); if (timeZoneInfoIndex > 0) { value = value.Substring(0, timeZoneInfoIndex); return DateTime.ParseExact(value, DateTimePattern, CultureInfo.InvariantCulture).AddDays(1); } return DateTime.Parse(value); } return null; } }}ViewModel:
.....public DateTime? DateToSave { get; set; }...If you could give me some hints where to start looking I'd be thankful.
Best regards.
Manu