Hi,
I am new to Kendo and are trying to add a custom command to a grid.
I have been going over examples and this forum and found multiple examples that has the following:
columns.Command(command =>
{
command.Custom("Details").Text("Show Details").Action("Details", "Billing");
});
When I try to use this, I get the following error:
'GridCustomActionCommandBuilder<myModel>' does not contain a definition for 'Action' and the best extension method overload 'UrlHelperExtensions.Action(IUrlHelper, string, object)' requires a receiver of type 'IUrlHelper'
I then tried this example from http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/configuration:
columns.Template(@<text>@Html.ActionLink("Edit", "Home", new { id = item.ProductID })</text>);
But get this error:
Cannot convert lambda expression to type 'string' because it is not a delegate type
Please can someone please help me with this.
I am using existing samples but don't know what is wrong.
Thank you
I have a ToolBar with a Click handler defined, and some items, kind of like below
Html.Inteum().ToolBar().Name(tab.Name).Events(events => events.Click(
"TabItem_Click"
))
.Items(items =>
{
items.Add().Type(CommandType.SplitButton).Text(
"blahblah"
).Url(
"someURL"
);
}
function
TabItem_Click(e) {
e.preventDefault();
LoadPageAsync(e.target.data().button.options.url);
return
false
;
}
What I'm hoping to do is to prevent navigation to a new page when you click on a button, and instead load that target up asynchrnously. But the navigation is never prevented. How do I keep the navigation from happening?
I have a grid that I initalize via the .NET wrapper. I can do the following:
columns.Bound(r => r.SampleColumn).ClientGroupHeaderTemplate("#= myFunction2(data, 50) #")
But I can't do this:
columns.Bound(r => r.SampleColumn).Filterable(f => f.Cell(c => c.Template("#= myFunction1(data, 100) #")))
I get a JS error. Any idea why? I would like to pass in an additional variable on the view.
In using the grid, with filterable (.Filterable(ftb => ftb.Mode(GridFilterMode.Row))), the icons and/or styles seem to be missing. I am using the CDN source for my includes:
<link href=
"~/Content/Site.css"
rel=
"stylesheet"
type=
"text/css"
/>
<link href=
"http://uilibrary.Vensure.com/Styles/reset.css"
rel=
"stylesheet"
type=
"text/css"
>
<script src=
"~/Scripts/modernizr-2.6.2.js"
></script>
<script src=
"~/Scripts/jquery-3.0.0.min.js"
></script>
<script src=
"http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"
></script>
<script src=
"http://kendo.cdn.telerik.com/2016.2.607/js/kendo.web.js"
></script>
<script src=
"http://kendo.cdn.telerik.com/2016.2.607/js/kendo.aspnetmvc.min.js"
></script>
<link href=
"http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css"
rel=
"stylesheet"
/>
<link href=
"https://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.metro.min.css"
rel=
"stylesheet"
>
<link href=
"https://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.min.css"
rel=
"stylesheet"
>
<link href=
"https://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.metro.min.css"
rel=
"stylesheet"
>
Can you tell me what, if anything, am I missing from these? Because the filterable missing icons and other UI elements makes the screen thus far look pretty ugly.
Also, when clicking on the filterable boxes, which should show dropdowns for filter criteria (Starts With, Contains, etc...) all I get instead is a javascript error: Uncaught TypeError: f.getClientRects is not a function
The error appears to be thrown by jquery, of which you'll see I am using version 3.0.0.
Any help, suggestions, or advice would be greatly appreciated.
Hi,
Is it possible to have two Edit buttons in a Grid, One for In-Line edit & another for Edit in Pop-Up mode. Thanks,
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