I check on site some examples for drag-drop in diagram bug that is only available for ASP.Net AJAX but I need them in ASP.NET MVC. I attached a link as well for reference.
https://demos.telerik.com/aspnet-ajax/diagram/examples/interactions/defaultcs.aspx
So, anybody helps me that it is available for ASP.NET MVC or not.
Hi,
I would like to know if there is a way to define custom shapes or to get predefined shapes as in Syncfusion (i.e. question or diamond) when using diagram with ASP.NET MVC
thanks
Ray
Hi everybody,
I am continuing my diagram development and facing the following issue.
I need to have a Yes No check on the component (as per the drawing), I would like to know if it is doable and if it can be linked to the component data.
thanks for the support
Ray
Hi,
I have searched with no luck so far if it is possible to scroll (with horizontal and vertical scrollbars) a large diagram.
thanks for any help
Ray
I have created a Diagram (using the example from https://demos.telerik.com/aspnet-mvc/diagram) to show a workflow which is great, but i have an issue which im not sure is supported by the Diagram control.
I have a single parent box and then i can have one or more children from the parent, which works fine. If I have two children from the parent I want both children to then link to a single (same) child. I cant seem to be able to link a child to multiple parents. Is this possible?
I've attached an example image to show what's required.
I found an example using an older code base of kendo that allows for HTML content inside of a diagram but seems to have been removed under current release (see link below). Is there a way to add HTML content to a diagram?
https://jsfiddle.net/Orbifold/mfcar358/
Second question I have is how to do a newline character inside content to split text on two rows? I tried \r\n, etc. but nothing works.
var diagram = $('#diagram')
.kendoDiagram({
shapes: [{
width: 150,
height: 100,
content:{
text:"I want to split this\r\n into two rows",
align: "center middle"
}
}]
})
.getKendoDiagram();
Hi Team,
I was trying to export the diagram to pdf, but it shows error.
Please help.
Razor Code :
@using Kendo.Mvc.UI<
br
>@{<
br
> ViewBag.Title = "Workflow Chart";<
br
>}
<
p
><
br
><
script
src
=
"https://kendo.cdn.telerik.com/2017.3.913/js/pako_deflate.min.js"
></
script
></
p
><
p
><
button
class
=
"btn btn-primary"
id
=
"btnExportPdf"
>Export to PDF</
button
></
p
><
p
>@(Html.Kendo().Diagram()<
br
> .Name("workflowOverviewDiagram")<
br
> .Pdf(pdf => pdf<
br
> .FileName("KendoUIDiagramExport.pdf")<
br
> .ProxyURL(Url.Action("Pdf_Export_Save", "WorkflowMaintenance", new { area = "Maintenance"}))<
br
> )<
br
> .DataSource(dataSource => dataSource<
br
> .Read(read => read.Action("GetWorkflowStopData", "WorkflowMaintenance", new { area = "Maintenance", workflowDefinitionId = Model.OtcId }))<
br
> .Model(m => m.Children("Items"))<
br
> )<
br
> .Editable(false)<
br
> .Layout(l => l<
br
> .HorizontalSeparation(400)<
br
> .VerticalSeparation(200)<
br
> .Type(DiagramLayoutType.Tree).Subtype(DiagramLayoutSubtype.Down)<
br
> )<
br
> .ShapeDefaults(sd => sd.Visual("visualTemplate"))<
br
> .ConnectionDefaults(cd => cd<
br
> .EndCap("ArrowEnd")<
br
> .Stroke(s => s<
br
> .Color("#979797")<
br
> )<
br
> )<
br
> .ZoomRate(0)<
br
> .Selectable(false)<
br
> .Events(events => events.DataBound("onDataBound"))<
br
><
br
>)</
p
><
p
><
script
></
p
><
p
>$("#btnExportPdf").click(function () {<
br
> $("#workflowOverviewDiagram").getKendoDiagram().saveAsPDF();<
br
> });</
p
><
p
></
script
></
p
>
Error :
kendo.all.js:52580 Uncaught Error: Cannot output NaN to PDF
at e (VM4745 kendo.all.min.js:52)
at VM4745 kendo.all.min.js:52
at Function.e.withIndent (VM4745 kendo.all.min.js:52)
at D (VM4745 kendo.all.min.js:52)
at e (VM4745 kendo.all.min.js:52)
at Function.e.indent (VM4745 kendo.all.min.js:52)
at VM4745 kendo.all.min.js:53
at Function.e.withIndent (VM4745 kendo.all.min.js:52)
at z.render.render (VM4745 kendo.all.min.js:53)
at e (VM4745 kendo.all.min.js:52)
Hi Team,
I have a simple MVC diagram, which works on Chrome but throws error on Internet Explorer. I do not have a clue. Please find the code below in Razor View. Please help.
It says onDataBound is undefined and cannot find property bringIntoView.
@model dotGrantsApps.Areas.Maintenance.Models.WorkflowViewModel
@using Kendo.Mvc.UI
@{
ViewBag.Title = "Workflow Chart";
@Html.Hidden("hdnWorkflowId", Model.OtcId);
}
@(Html.Kendo().Diagram()
.Name("workflowOverviewDiagram")
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetWorkflowStopData", "WorkflowMaintenance", new { area = "Maintenance", workflowDefinitionId = Model.OtcId }))
.Model(m => m.Children("Items"))
)
.Editable(false)
.Layout(l => l
.HorizontalSeparation(400)
.VerticalSeparation(200)
.Type(DiagramLayoutType.Tree).Subtype(DiagramLayoutSubtype.Down)
)
.ShapeDefaults(sd => sd.Visual("visualTemplate"))
.ConnectionDefaults(cd => cd
.EndCap("ArrowEnd")
.Stroke(s => s
.Color("#979797")
.Width(2)
)
)
.ZoomRate(0)
.Selectable(false)
.Events(events => events.DataBound("onDataBound"))
)
<script>
function visualTemplate(options) {
var dataviz = kendo.dataviz;
var g = new dataviz.diagram.Group();
var dataItem = options.dataItem;
var layout = new dataviz.diagram.Layout(new dataviz.diagram.Rect(0, 0, 210, 75), {
alignContent: "center",
spacing: 4
});
g.append(new dataviz.diagram.Rectangle({
width: 210,
height: 75,
stroke: {
width: 0
},
fill: {
gradient: {
type: "linear",
stops: [{
color: "#133781"
}]
}
}
}));
g.append(layout);
var texts = dataItem.WorkflowStopName.split(" ");
for (var i = 0; i < texts.length; i++) {
layout.append(new dataviz.diagram.TextBlock({
text: ' ' + texts[i],
color: "#fff"
}));
}
layout.reflow();
return g;
}
function onDataBound() {
this.bringIntoView(this.shapes);
}
</script>
Hi Team,
I am new to Kendo MVC and have a requirement. I want to achieve the below diagram is it possible ?
I am getting the shapes.
Please note the connector positions. They are not overlapping. every connector is different direction so that it looks good.
Please help.
Attached is the diagram I want to get.