This is a migrated thread and some comments may be shown as answers.

Customizing Diagram toolbar

6 Answers 195 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
john
Top achievements
Rank 1
john asked on 13 Jul 2016, 01:48 PM

Hello,

We are currently developing with the Diagram control.

I have a question, how do we customize the ribbon's toolbar above it? (see screenshot)

I am reading conflicting tutorials about this, some say it is a WIDGET, but then i read toolbar in some places.

Is there an example somewhere how to, for example add a button with an customized onclick?

Gr from John

6 Answers, 1 is accepted

Sort by
0
john
Top achievements
Rank 1
answered on 14 Jul 2016, 11:41 AM

Nvm,

I have found the necessary docs to do this.

The only thing i am trying to do is make a custom button that adds an custom shape.

gr john

0
Niko
Telerik team
answered on 15 Jul 2016, 11:24 AM

Hello John,

You could use the Custom option in the Tools definition. Here is an example:

.Editable(e => e.Tools(t => t.Custom().Type("button").Text("Custom").Click("customShape")))

Check out this example for a custom tool in the Kendo UI diagram - http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram#configuration-editable.tools.

Hope this helps. Please, let me know if you will need anything else.

Regards,
Niko
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
john
Top achievements
Rank 1
answered on 15 Jul 2016, 12:03 PM

Hello Niko,

i indeed need some help.

I have a diagram that's databound.

I am for now, using the mvc example that uses the visualTemplate(options) function to

format the shapes, in my case start, stop is circle, decision is diamond, rest is rectangle. Works fine.

But now, I need a Button(s) in my toolbar to add the different kind of shapes (and of course trigger the createshape function in homecontroller)

I have searched, but i cannot find how to invoke the internal default "createshape" function that comes with the standard button in example.

Can you advise what the best approach is for this please? Basically i need to 1 add a shape, 2 format it to one of three shape types, trigger databound function to add to database.

Btw i am using the EDITING example of diagram MVC version.

gr John

0
Niko
Telerik team
answered on 18 Jul 2016, 08:35 AM

Hello john,

Please, check out the createShape function. It seems like the method that will work best in your case. It will invoke the UI for adding a shape just as if the default tool was used.

Hope this helps.

Regards,
Niko
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
john
Top achievements
Rank 1
answered on 20 Jul 2016, 02:03 PM

It;s going great so far.

But.

I need the user to make shapes with different models.

We are making a workflow system tied into our crm system.

Each shape (workflow action) needs to take in different paramters filled in by the user, to complete step in crm system later.

Question is, how do i make a custom shape tied to a different model to accept these properties,

while maintaining a databound diagram?

gr John

0
Niko
Telerik team
answered on 21 Jul 2016, 11:10 AM

Hello john,

In order to customize the appearance of the popup, then you could go with 2 different approaches.

First is to use the shapeTemplate of the editable option to define the content of the dialog. There you could implement a specific form and collect enough data to create the respective shape. Then with the addShape method you could add the shape in the diagram.

Similar option with more control on your side, but a bit more complex is to implement a custom tool - http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram#configuration-connectionDefaults.editable.tools. In that case you need to additionally figure out the popup implementation. The rest should be same as the first approach.

Hope this give you enough directions. Please, let me know if you need more information on a specific entity from the diagram API.

Regards,
Niko
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Diagram
Asked by
john
Top achievements
Rank 1
Answers by
john
Top achievements
Rank 1
Niko
Telerik team
Share this question
or