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 am using a parameter to allow manually editing group rotation angle, when an angle has been set, moving the affected shape/group causes the height to at least 3x it's original size and width to fluctuate up and down. Also, when a shape has been rotated, the selector doesn't rotate, causing an offset between the shape and it's selector.
Note: I noticed that moving the group after rotation triggers the ItemRotate event;

                    if (dataItem.Align.toUpperCase() === "left".toUpperCase()) {
                        g.append(new dataviz.diagram.Rectangle({
                            width: dataItem.width,
                            height: dataItem.height,
                            fill: dataItem.Color
                        }));

                        g.append(new dataviz.diagram.Rectangle({
                            width: dataItem.width * 0.25,
                            height: dataItem.height,
                            fill: "Red"
                        }));
                        g.rotate(dataItem.Angle, new dataviz.diagram.Point(30, 30));


                    }
I have tried :
Setting the rotation on each shape instead of the group, with the same results. see below
setting rotation angle in shape defaults but each group's Angle varies and was unable to set it dynamically using the dataItem's Angle.
var rect = new dataviz.diagram.Rectangle({
                            width: dataItem.width * 0.25,
                            height: dataItem.height,
                            fill: "Red"
                        });
rect.rotate(dataItem.Angle, new dataviz.diagram.Point(30, 30));

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.

 

Hi Team,

      I was trying to export the diagram to pdf, but it shows error.

Please help.

Razor Code :

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.