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

Custom Tool visibility depending on model

2 Answers 24 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Zoltan
Top achievements
Rank 1
Zoltan asked on 04 Apr 2017, 11:31 AM

Hello,

I'm using visualTemplate to see from my model (dataItem) whether entity is of one type or the other to use, among other things, corresponding image for the entity.

I'm also using (Editable) Tools under ShapeDefaults to have some custom tools for the entities in the model.

Now, I would like that depending on the entity type from the model I can choose which custom tool will be shown to the user. How can I do this?

 

For more clarity, mvc razor part:

.ShapeDefaults(sd => sd
     .Visual("visualTemplate")
     .Editable(e => e
          .Tools(t =>
           {
                 t.Custom().Name("firstTypeCustomButton");
                 t.Custom().Name("secondTypeCustomButton")
           }
...

 

Javascript template:

function visualTemplate(options) {

...

    if ( options.dataItem.EntityType == "myFirstType") {
         group.append(new dataviz.diagram.Image({
                    source: "@Url.Content("~/Images/first-type-image.png")",
...
    else if ( options.dataItem.EntityType == "mySecondType") {
...

2 Answers, 1 is accepted

Sort by
0
Accepted
Boyan Dimitrov
Telerik team
answered on 06 Apr 2017, 11:43 AM

Hello Zoltan,

The shapes.editable.tools is an array that contains the array of tools which will be shown as soon as a shape is selected. Given this I would suggest to use the select event, get the shape object and assign a new array of tools associated with this shape. Please refer to the http://dojo.telerik.com/Ezako/2 example. 

Regards,
Boyan Dimitrov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Zoltan
Top achievements
Rank 1
answered on 07 Apr 2017, 11:57 AM

Thank you, that works great.

Just to mention... when using MVC razor helper for diagram then nothing shouldn't be inside ShapeDefaults/Editable/Tools for this to work:

.ShapeDefaults(sd => sd
     .Editable(e => e
          .Tools(t =>
           {
                // leave this empty if adding tools from javascript directly
           }
...

 

I used onSelect event to add triggers. Another important thing was not to forget to redraw selected item:

function onSelect(e) {
...
    var tools = e.selected[0].options.editable.tools;
    if (tools.length == 0) { // this means tools are adding for the first time. Add them only once.
        if (myConditionToIdentifyCorrectItem) {
            var toolObject1 = { name: "myCustomTool", type: "button", icon: "info" };
            ...
            e.selected[0].redraw({
                editable: {
                    tools: [toolObject1, toolObject2]
                }
             });
        }
...
Tags
Diagram
Asked by
Zoltan
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Zoltan
Top achievements
Rank 1
Share this question
or