Telerik Forums
UI for ASP.NET MVC Forum
1 answer
66 views

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.

Ivan Danchev
Telerik team
 answered on 03 Jun 2021
1 answer
49 views

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

Georgi Denchev
Telerik team
 answered on 22 Mar 2021
2 answers
157 views

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

 

Tsvetomir
Telerik team
 answered on 17 Mar 2021
2 answers
98 views

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

Raymond
Top achievements
Rank 1
Veteran
 answered on 02 Sep 2020
1 answer
140 views

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.

Viktor Tachev
Telerik team
 answered on 24 Jan 2020
2 answers
47 views
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));
Tjay
Top achievements
Rank 1
 answered on 04 Dec 2018
1 answer
96 views

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();
Tsvetina
Telerik team
 answered on 17 Sep 2018
1 answer
100 views

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)

 

 

Milena
Telerik team
 answered on 28 Aug 2018
2 answers
58 views

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>

 

 

Sanjukta
Top achievements
Rank 1
 answered on 22 Aug 2018
12 answers
84 views

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.

Sanjukta
Top achievements
Rank 1
 answered on 20 Aug 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?