Sortable including Inputs Issue

[Guru]

If the items being sorted are <input> they seem to become unclickable/editable, you can get to the with the tab key but not the mouse. Is this expected behavior or is there a way to keep inputs or other widgets being sorted from being unreachable with the mouse?

Note: we plan to have several kinds of form inputs in our sortable sections not just input elements, this is only a first test run using sortable so far...

Here is the basic structure we are sorting if it helps:
div (sortable container)
     div (repeating sortable item)
            button (handler)
            (some inputs and images, inputs can only be accessed with tab key when kendoSortable is applied)

Herre is a telerik dojo example of the behavior:
http://trykendoui.telerik.com/ASeD

[Guru]

For anyone else with this issue: was able to get around this by having the user select when "Sort mode" is on or off. When they turn it on we apply kendoSortable() to the container and when the turn it off (aka go back into editable mode) we get the sortable container and call .destroy() (flush, repeat).

Even though this works I would like if possible for the inputs to be sortable and editable without having to do edit/sort modes for all of the sortable areas in our app if its possible.

[Beryl]

How?

[Georgi Denchev]

Hello, Beryl,

The proposed workaround is to have some sort of button which on click either creates the widget(a normal initialization, nothing special is required) or destroys it.

You can check the Destroying Widgets article for more information:

https://docs.telerik.com/kendo-ui/intro/widget-basics/destroy#destroying-widgets-manually 

As a side note, in the newer versions of Kendo UI, there is a property called "ignore" which allows you to specify which elements should not be affected by the sortable.

Here is an updated Dojo of the initial question which uses "ignore":

https://dojo.telerik.com/@gdenchev/uXIFuQoG 

[Elijah]

In case it helps, my workaround for this issue was to register a .click() handler on the input elements which calls $(this).focus().

[Elijah]

[quote]Elijah said:In case it helps, my workaround for this issue was to register a .click() handler on the input elements which calls $(this).focus().[/quote]

Be warned though that this workaround isn't perfect as it prevents user from clicking the mouse on a specific character of the input field to place the cursor there (instead whole text field gets highlighted).

[Alexander Valchev]

Hi guys,

I can confirm that this is a bug in the framework which will be fixed in the next internal build.

Actually the problem starts from the Kendo Draggable component which does not allow focusing of input elements located inside the draggable object either. We will provide an 'ignore' option (for both Sortable and Draggable) which will accept a selector that specifies which items (children of the draggable container) will be ignored. Ignored items will be focus-able with the mouse. In other words you will be able to say ignore: "input" to make the inputs focus-able.

I hope the information will help. I will mark this thread as requires additional answer and will write you back when the next build is uploaded.

Regards,
Alexander Valchev
Telerik

 

 

[Guru]

Elijah, thx for your input that is another interesting direction to consider.

[Guru]

Alexander, thx, good to know I was fairly on point about expecting it not to disable elements. Thanks for the update.

For us specifying which inputs in the item are ignored would be ok - (we have several in each item (sortable forms that have an underlying sort order property per form)) - we would be applying ignore to about 6-8 fields per repeating container item. No big deal, still better than having to wire-up "mode" toolbars.

Once the update is out I will postback about my use of it.

[Alexander Valchev]

Hi guys,

The internal build containing aforementioned fix is available for download. Please download it and give it a try.

Regards,
Alexander Valchev
Telerik

 

 

[Mike]

I'm using the ignore option for the input fields and now I can click to edit them, but I can't tab between inputs like I can when the Sortable framework is not applied.

Thanks,
Mike

[Mike]

I retract my last post.  It looks like it was my onblur event was calling the pushUpdate on the grid and that was causing the tabbing issue.

[Shahar]

I've downloaded the latest internal build (04467telerik.kendoui.professional.2014.2.1112.commercial) which seems to be from 12/11/2014 but this still doesn't work (Sortable with inputs).
I've also tried the latest build (from October) which didn't work either.

[Alexander Valchev]

Hello Shahar,

Could you please provide a small but run-able Kendo Dojo test page that demonstrates your scenario?

Regards,
Alexander Valchev
Telerik

 

 

[Tayger]

Hello 

I'm working with the "ignore" option inside a Sortable object as well. It works fine but I just realized that I can only define a single type for the ignore option, like: ignore: "input" . I wanted to expand the ignore option like: ignore: {"input", "text"}, but that ends up in an error. 

Question: Is there a way to define more than one option for "ignore"?

[Alexander Valchev]

Hi Tayger,

Yes you can. The syntax is ignore: "input, text".
Note that the ignore value should represent a valid CSS selector. Do you have "text" tags on the page?

Regards,
Alexander Valchev
Telerik

 

 

[Tayger]

Thank you Alexander, that helped! I tried and was on the wrong way with: ignore: ("input", "textarea", …) Your example works perfect. In between I found the solution with class. I put a class "editable" directly to all editable items and can control it with: ignore : ".editable". First I wanted head back to your solution then I realized I need to disable items when they have a certain state what could be controlled excellent with the class "editable". But then I realized that checkboxes are completly ignored whether they are named by the ignore option or not. You can always click on them. It would be nice if all input-like elements would be ignored and could be turned on/off by the ignore option.

Thanks anyway, learned something new!

[Matthew]

I used a handler and still had to specify an ignore, which seems counter intuitive. My working code was:

 

<div kendo-sortable k-handler="'.grabhandle'" k-ignore="':not(.grabhandle)'">

 

If a handler is supplied, shouldn't the default ignore be anything that is not the handler? But instead I had to add that. Can this be an enhancement?

[Alexander Valchev]

Hello Matthew,

I understand your point but technically it is not possible to omit the ignore option at present. The problem is that the draggable objects are build according to the filter. The handler is used to determine just when the drag action will start.
We will discuss changing this in order to make the configuration more intuitive for the users, but at present I cannot commit when and if that will happen.

Regards,
Alexander Valchev
Telerik