Progress® KendoReact Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 28 Jan 2022 16:55 by Neil
Neil
Created on: 25 Jan 2022 09:52
Category: KendoReact
Type: Feature Request
2
Tile Layout drag and drop by header only feature request
When reorderable is true, our users have complained that it is not possible to highlight text in the kendo grid component for example.
For now we have had to add a settings option for the user to turn the reorderable feature on and off depending on how they want to use the UI.
It would be a lot better user experience if there was on option to only drag the tile by the header, therefor allowing the user to still highlight and copy text areas and such.
8 comments
Neil
Posted on: 28 Jan 2022 16:55
Ok, i just had to add the k-resize-handle class to the condition and it works ok now. Thank you.
ignoreDrag={(e) => {
          return !e.target.classList.contains('k-card-title') 
&& !e.target.classList.contains('k-resize-handle');

        }}

Neil
Posted on: 28 Jan 2022 13:50

Hi<br /><br />Yes, the example you made has this behaviour.<br />https://stackblitz.com/edit/react-mzt3rl-pkwpss?file=app/main.jsx


If you click on the side of a tile to resize, it jumps bigger straight way before you drag and then sometimes hard to make small again. if it feels normal the first time ,try resizing again, it is not predictable.
There is big difference to how it is normally.
ADMIN
Filip
Posted on: 28 Jan 2022 13:40

Hi, Neil,

Can you share a runnable example that reproduces this behavior so that we can investigate and assist further?

Regards, FilipProgress 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/.

Neil
Posted on: 28 Jan 2022 09:19
There is a strange side affect to this. Now when i try to resize the tile, it has jumpy un-predictive behaviour.
Neil
Posted on: 26 Jan 2022 18:41
This is just what i wanted! I am not sure how i missed this when i was reading the docs myself. Thank you for this information!
ADMIN
Filip
Posted on: 26 Jan 2022 13:34

Hi, Neil,

After further investigation, I found that it is possible to drag and drop only using the header by passing a function to the ignoreDrag prop like shown in the following example:

https://stackblitz.com/edit/react-mzt3rl-pkwpss?file=app/main.jsx

I hope this helps.

Regards,
FilipProgress 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/.

Neil
Posted on: 25 Jan 2022 12:46
Sorry maybe i did not word this correctly. I meant highlight the text of a grid that is inside a tile componenet. Here is example https://react-mzt3rl.stackblitz.io/

I can double click on the text and then it highlights but the users do not know to do that, it is their normal experience to click and drag over text to highlight it, this is something their brains are used to doing on any other website or other computer software.
ADMIN
Filip
Posted on: 25 Jan 2022 11:40

Hello, Neil,

Thank you for reaching out to us. I made a small example using the reorderable prop and it seems that it is still possible to highlight the text:

https://stackblitz.com/edit/react-mzt3rl?file=app/main.jsx

Can you provide a working example showcasing this behavior?

Regards, FilipProgress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status
Category