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
16 Answers, 1 is accepted
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.
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":
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).
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
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.
The internal build containing aforementioned fix is available for download. Please download it and give it a try.
Regards,
Alexander Valchev
Telerik
Thanks,
Mike
I've also tried the latest build (from October) which didn't work either.
Could you please provide a small but run-able Kendo Dojo test page that demonstrates your scenario?
Regards,
Alexander Valchev
Telerik
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"?
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
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!
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?
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