Customize hover template

[Jong]

I'm trying to customize the shape hover template and add edit and delete buttons to allow users to click like the screenshot, and these buttons must display only when the mouse hovers on the shape.

I also need to capture user's click events from these buttons, because I need to open a custom window for edit and popup a confirm dialog.

Is there a way I can do this?

[Georgi]

 Hi Jong,

A possible solution would be to create the toolbar within the mouseEnter event handler.

e.g.

                    mouseEnter: function(e){
                        if (e.item instanceof kendo.dataviz.diagram.Shape) {
                            var diagram = this;
                            diagram._destroyToolBar();
                            diagram.select(e.item);
                            diagram._createToolBar();

                        }
                    }

For your convenience I have assembled a small sample which demonstrates the above:

• https://dojo.telerik.com/ONiZiHeM

I hope this helps.

Regards,
Georgi
Progress Telerik

[Jong]

Thank you for your answer!

Now, how can I customize the tool bar?

How can I remove the rotate buttons and add custom buttons?

And How can I capture the click events fired by the tool bar?

I need to open a custom window for edit and do other stuffs with the custom buttons.

 

Thank you!

[Georgi]

Hello Jong,

You can configure the tools of the toolbar using the following setting:

• https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/configuration/shapedefaults.editable#shapedefaultseditabletools

I have modified the sample to demonstrate how to add a custom toolbar tool:

• https://dojo.telerik.com/ONiZiHeM/3

 

Regards,
Georgi
Progress Telerik