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>