Custom Tool visibility depending on model

[Zoltan]

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") {
...

[Boyan Dimitrov]

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

[Zoltan]

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]
                }
             });
        }
...