Sortable including Inputs Issue

17 posts, 1 answers
  1. Guru
    Guru avatar
    112 posts
    Member since:
    Jul 2011

    Posted 26 Mar 2014 Link to this post

    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
  2.
  3. Guru
    Guru avatar
    112 posts
    Member since:
    Jul 2011

    Posted 27 Mar 2014 Link to this post

    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.
  5. Elijah
    Elijah avatar
    3 posts
    Member since:
    Aug 2012

    Posted 28 Mar 2014 in reply to Guru Link to this post

    In case it helps, my workaround for this issue was to register a .click() handler on the input elements which calls $(this).focus().
  7. Elijah
    Elijah avatar
    3 posts
    Member since:
    Aug 2012

    Posted 28 Mar 2014 in reply to Elijah Link to this post

    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().


    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).
  8.
  9. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 28 Mar 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Guru
    Guru avatar
    112 posts
    Member since:
    Jul 2011

    Posted 28 Mar 2014 in reply to Elijah Link to this post

    Elijah, thx for your input that is another interesting direction to consider.
  13. Guru
    Guru avatar
    112 posts
    Member since:
    Jul 2011

    Posted 28 Mar 2014 in reply to Alexander Valchev Link to this post

    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.
  14.
  15. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 09 Apr 2014 Link to this post

    Hi guys,

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

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  17. Mike
    Mike avatar
    15 posts
    Member since:
    Apr 2013

    Posted 07 May 2014 in reply to Alexander Valchev Link to this post

    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
  19. Mike
    Mike avatar
    15 posts
    Member since:
    Apr 2013

    Posted 07 May 2014 in reply to Mike Link to this post

    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.
  20.
  21. Shahar
    Shahar avatar
    1 posts
    Member since:
    Nov 2014

    Posted 17 Nov 2014 Link to this post

    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.

  23. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 17 Nov 2014 Link to this post

    Hello Shahar,

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

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  25. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 27 Sep 2015 in reply to Alexander Valchev Link to this post

    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"?

  26.
  27. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 30 Sep 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  29. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 04 Oct 2015 in reply to Alexander Valchev Link to this post

    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!

  31. Matthew
    Matthew avatar
    33 posts
    Member since:
    Aug 2008

    Posted 09 Nov 2015 Link to this post

    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?

  32.
  33. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 11 Nov 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top