When I double click, the entire grid is affected rather than just the row -double click bug

[Nazlican]

When I click on a row, the incoming data opens automatically when I click anywhere in the grid.

I did a debug, before clicking nowhere I clicked on an empty pane on the grid and down into my dbClickWorkFlow() method.

 

Is it possible to put the dbClickWorkFlow() method in another part of the Grid Html? It didn't work when I tried it. Or do you have any good suggestions to fix it? For instance, only one row should be affected. 

 

I had researched a lot of questions and found similar problems but it is not helpful.

It does not allow any good experience.

 

 

LIKE THAT, JUST ANGULAR KENDO GRID PROBLEMhttps://www.telerik.com/forums/grid-edit-popup-double-click-event-bug

I need help!

 

 

[Silviya]

Hello Nazlican,

Could you please confirm if the question is regarding Kendo UI for Angular? I am just checking because the linked forum thread is related to the Kendo UI for jQuery product.

And could you share in what way is the problem connected to the dialog component as marked in the ticket. This is so that we can have a better overall view of what is happening.

However, from what I can gather - maybe it would be worth taking a look at the MDN Double click event. Our Grid does not come with a built-in double click functionality, but the developer can attach their own custom dblclick event handler and logic.

I am afraid that the provided information is not enough for us to properly grasp the scenario, how are the Kendo UI for Angular components involved in it, and what the desired behavior is.

It would be very beneficial if you send us a more thorough description of the wanted behavior, the use case for it, and an isolated runnable project where we can observe the specific configuration. This will help us understand the requirements better, and try to provide a solution that is most suitable for the specific situation as far as the Kendo UI for Angular components are concerned.

Thank you in advance!

Regards,
Silviya
Progress Telerik

[Nazlican]

Hello @silviya, Actually, I have same issue with Angular. Actually when I click the row everything is working fine. But when I click outside of row, thats actually grid. I see my last data in there.

[Nazlican]

I ve updated my docs. please check it. Thank you

[Silviya]

Hello Nazlican,

Let me share some more information on how the Grid works.

Indeed the Grid does not provide a double click event out of the box. What it does have is a cellClick event which is fired when the user clicks a cell. The cellClick comes with its CellClickEvent object.

The dblclick event is a default HTML event. If the developer is listening for a double click event on a child element, then it could be nice taking into consideration that the event could propagate to the parent component. If this is an undesired effect it can be stopped with the stopImmediatePropagation method and then only the developer's custom logic would be triggered.

Since the dblclick event is not build-in, capturing a dataItem would require a workaround. We recommend storing the dataItem in a cellClick handler and reusing it in the dblclick handler.

public dataItem

public onDblClick(e){
     console.log('double click', this.dataItem)
}

public cellClickHandler({ isEdited, dataItem, rowIndex }): void {
   this.dataItem = dataItem;
    console.log('single click', dataItem)
...
}

It should be kept in mind that when using both dblclick event and cellClick - the cellClick will always be triggered first when the user double clicks a cell. The returned data in the cellClick handler is the one that is clicked recently. If we double click anywhere outside of the rows in the grid area, the double click event will be fired only.

If there are some additional conditions to be added, they would be considered a developer effort since the Grid doesn't have a dblclick event incorporated.

Also, if need be - the developer can distinguish between headers and other content by checking the event.target element in the dblclick event handler, e.g.: https://angular-xvc5bt-ilcavs.stackblitz.io

I hope I could be of some help.

Regards,

Silviya

 

 

[JORGE]

I am trying to access the example and I cannot access it, it does not load:
https://angular-xvc5bt-ilcavs.stackblitz.io

I have the same problem.

[Yanmario]

Hi Jorge,

This is the direct link to the example - https://stackblitz.com/edit/angular-xvc5bt-ilcavs?file=app%2Fapp.component.ts

I hope this helps.

Regards,
Yanmario
Progress Telerik