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

Customize hover template

3 Answers 277 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Jong
Top achievements
Rank 1
Veteran
Jong asked on 21 Jan 2021, 09:35 PM

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?

3 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 25 Jan 2021, 02:50 PM

 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:

I hope this helps.

Regards,
Georgi
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Jong
Top achievements
Rank 1
Veteran
answered on 25 Jan 2021, 03:04 PM

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!

0
Accepted
Georgi
Telerik team
answered on 26 Jan 2021, 12:20 PM

Hello Jong,

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

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

 

Regards,
Georgi
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Diagram
Asked by
Jong
Top achievements
Rank 1
Veteran
Answers by
Georgi
Telerik team
Jong
Top achievements
Rank 1
Veteran
Share this question
or