How to add content text to shape control in diagram

[mickey0109]

Hello.
I am customizing the following demo source now.
The demo version of the source is located in the following path.

https://demos.telerik.com/aspnet-ajax/sample-applications/diagram-app/

https://demos.telerik.com/aspnet-ajax/sample-applications/diagram-app/DiagramAppSource.zip

But while working on it, I faced a big challenge.
The demo source did not have a function to give content property to the shapes displayed in the original diagram.
So, in order to put this function in here, I have tried a lot of effort by looking for various examples, but I couldn't implement the function.
So I want to get your help.
First, drag and drop a shape control from the toolbox to display it on the canvas, then select it and enter the body in the property editing window on the right to display the body in the shape.(at this time, add textbox on configPanel)
Also, the same function is realized for the connections.
I would be grateful if you posted the explanation and example code together.
Please help me.

[Rumen]

Hi Vladimir,

The RadDiagram is a server-side wrapper of the Kendo UI Diagram, meaning that it comes with the Kendo client-side functionality along with server-side representation wherever is possible. Basically, both of the controls have some logic that is not available in the other control for some reason, like the editing. The main problem behind that is the Kendo UI Diagram editing is available only for client-side bound diagrams and while the RadDiagram provides also server-side binding, the editing cannot be enabled until it is implemented also for the server-side scenario. I hope this explanation makes sense to you.

Optionally, you can implement your external editing logic, changing the content of the shape through its client-side API in a similar way:

 

function redrawShape() {
    var diagramWidget = $find("RadDiagram1").get_kendoWidget();
    var shape = diagramWidget.getShapeById("s1");
    shape.options.content.text = "new text value";
    shape.redraw(shape.options);
}

as explained in this forum thread.

The other possible option I could be to directly use the Kendo UI  Diagram widget in your application so you will be able to utilize its built-in Editing functionality. You can test it in the following live demo: http://demos.telerik.com/kendo-ui/diagram/editing

Last but not least, a feature request for implementing Editing functionality in RadDiagram has been already submitted in our Feedback portal but it is not very popular. You can vote on it in order to increase its priority here:
https://feedback.telerik.com/Project/108/Feedback/Details/162228.

Best Regards,
Rumen
Progress Telerik

[mickey0109]

Thank you. Rumen.
Your explanation is well understood.
I hope that you will continue to help in the future.
Best regard.

[Rumen]

You are welcome, Vladimir!

We are here to help. Do not hesitate to drop your questions!

 

Regards,
Rumen
Progress Telerik