Deselect shape dynamically

[Edward]

I can select a shape dynamically with the select method, can deselect a shape dynamically too? 

[Mihaela]

Hi Edward,

The method select() could be used for deselection of a shape, as it is described in the documentation below:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/diagram/shape/methods/select

A shape could be deselected by passing an argument "false" in the select() method, as per the example below:

shape.select(false);

Let me know if you need any further assistance or in case of any other questions.

Regards, Mihaela Lukanova Progress Telerik

[Edward]

Hi Mihaela,

I missed that it since I was using diagram's select instead of the shape one, thanks for your information!

I have two more questions about selecting diagram's items:

1. Can I have that list of selecting shapes? In the select event, e.selected will not includes shapes that was already selected, but I am working on a customized selection mode and I need that information.

2. Can I start a selection frame inside the bounding box of some selected shapes? (By the way, I also want to keep that bounding box until the new selection is done, what I am doing now is select those selected shapes again once they were deselected, do you have any better suggestion to implement this feature?)

Thanks again!

[Mihaela]

Hello Edward,

Thank you for your questions.

1. In order to capture the selected shapes, you could subscribe to the select() event of the Kendo UI Diagram widget and filter the shapes by the property "isSelected":

$("#diagram").kendoDiagram({
    ...
    select: function(e){
        var shapes = this.shapes;
        var selectedShapes = shapes.filter(function(value, index ) {
            return value.isSelected
        });
    }
    ...
});

Here is a Dojo sample, for your reference:

https://dojo.telerik.com/IRETizED

      2. Would you please elaborate further regarding the selection within the bounding box of selected shapes? It would be great if you could share a screenshot in order to get a better understanding of your requirement.

Based on my assumptions, I suspect that you would like to be able to drag a shape inside the bounding box of already selected shapes. However, such a functionality is not available due to the fact that the draggable consumes the click and start drag events. Hence, it takes precedence over the selection.

Thank you for your cooperation.

Meanwhile, let me know if you have any other queries.

 

Regards, Mihaela Lukanova Progress Telerik

[Edward]

Hi Mihaela,

1. Thank for reply but this is not what I meant, but I took a look at my project I found that in normal diagram usage, my problem will not happen and my question probably beyond your support.

In Sample 1.jpg in the attachment, you can see 4 shapes with thicker border was selected, but I am able to make a new selection of 6 shapes and keep that original selection. What I have done is re-select those 4 shapes once they were deselected caused by mouse click outside the bounding box. I am able to to make this kind of selection while holding shift and make normal selection (which will deselect the 4 shapes without re-select) without holding any keys.

That is why I said selecting shapes. In the select event, in the second selection, only 2 shapes on the top will be included in e.selected, and what I want is the information of all 6 shapes in my new selection frame. I need them because I wish to make a new kind of selection while holding ctrl, that will invert the selection state of all 6 shapes in the second selection (and keep selections not in the second selection frame, this part is not shown in my sample).

I hope I make my statement clear this time.

2. Your assumption was basically correct, but instead of dragging shapes (in my case all shapes are static), what I want is to start a new selection like something in Sample 2.jpg and indeed, the draggable consumes the click and makes it impossible.

Thanks for the reply again!

[Mihaela]

Hello Edward,

Thank you for the screenshots and the detailed description.

1. This behavior is expected since the diagram stores the selected shapes until they are deselected. You could get all currently selected elements with the method "e.sender.select()" and store them in a global variable in order to keep the information of all selected items.

2.  I completely understand your requirement, but with the current diagram configuration, the reversal of the events would be burdensome work and would fall beyond the scope of the support services.

Feel free to let me know if you have any other questions. I would be happy to assist.

 

Regards, Mihaela Lukanova Progress Telerik

[Edward]

Mihaela,

I am afraid that your method could not solve my problem, since what I need is actually "what is in the selection area but already selected" instead of all selected shapes. It seems impossible with current diagram configuration now though.

I will come back if I find any solution, Thanks for your help!