Hallo. I was trying to set auatoScroll in Sortable. All is working fine in Chrome, but won't  work in IE or FF.
The markup for Sortables is below: 

 

 "widgetsListOptions" is below:

Chrome video: http://screencast.com/t/kxfy9RFiDt
IE(the same in FF) video: http://screencast.com/t/yz3TqRuIhGA

was used Kendo 2015.2.902, ASP .Net MVC, angular, bootstrap styles.

There is no example of how to extract the final (updated) sort order out of the sortable in Kendo. Can this be added to the documentation (perhaps the example, http://demos.telerik.com/kendo-ui/sortable/angular)? Is there any better way to do it than to handle the event (http://dojo.telerik.com/OBuBo) ?

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

Hello there

Before creating an example I wanted to ask that way: I'm using the Sortable widget of Kendo UI. It works fine so far. Now I want to get the ID of ALL items inside the sortable DIV container AFTER a sort has been taken place. Lets say there are 3 DIV elements inside the sortable container, each with an element called sortid (values 1, 2 and 3). I use therefore the change event of sortable:

…
change: function(e) {
    for (var i=0; i<3; i++) {
       alert($("#" + sortobjectdiv + i + " input[id='​sortid']").val());
   }

} ... 

Now I drag ​the DIV element with sortid = 3 (the most lower one on display) between the DIV elements with sortid 1 and 2 inside, the change event trigger output (for…):
1, 2, 3 -> thats the original setting as I wouldn't have changed anything. I would have expected the output: 1, 3, 2

Now I see the 3 DIV elements with their sortid in order of 1, 3, 2

When I now drag the last DIV element with sortid = 2 between the elements with sortid 1 and 3 the output is: 1, 2, 3 -> thats correct (for now). When dragging now DIV element with sortid = 3 between 1 and 2 again, the output is wrong again, next time correct again, over next time wrong again, etc.

I guess I do something wrong or my thinking about the change behaviour is wrong. That described output is what I would expect on "end" event but comparing those two in my case do have exactly always have the same output! I thought the change event would fire AFTER the DOM tree has been refreshed. 

Any hint?

 

 

Hi,

I've 4 sortable and want to connect all together such a way that elements from any of the sortable can be drag & dropped to any of the other 3 Sortables.
With JQuery UI Sortable this approach can be done (pls refer to this example: http://jsbin.com/aMIxUHi/1/edit).

However in Kendo UI Sortable when I try the following, it doesn't work:
                    $("#rightbar").kendoSortable({
                        filter: ">div",
                        cursor: "move",
                        connectWith: ["#leftbar", "#centrebar"],
                        placeholder: placeholder,
                        hint: hint
                    });
                    $("#leftbar").kendoSortable({
                        filter: ">div",
                        cursor: "move",
                        connectWith: ["#rightbar", "#centrebar"],
                        placeholder: placeholder,
                        hint: hint
                    });
                    $("#centrebar").kendoSortable({
                        filter: ">div",
                        cursor: "move",
                        connectWith: ["#leftbar", "#rightbar"],
                        placeholder: placeholder,
                        hint: hint
                    });
Please advise, If this approach is possible and supported in Kendo UI Sortable. If yes, please kindly provide a working example.
Thank you.  

As show in this demo. Seems sortable made inline editing input box of grid disabled(But click edit button).
I did some research. The walkaround is to get grid ignore input box.
I have setup currentGrid.table.kendoSortable({ignore: ".background-color-white, input"} which seems work.
Can anyone from Kendo team confirm this is the right way to ignore multiple class?

Hi! I'm using KendoUI Sortable widget with Twitter Bootstrap to create a dynamic dashboard editor "tile" style.
Every tile is a k-block and inside it is rendered a chart, the tiles ​have variable dimension: width is a fraction of 12 bootstrap columns, height is 400px or 800px. See the attached images to have an idea.
All works fine but in some cases I have empty zones, as you can see in picture 2, when the tile is big it blocks the floating left movement of other smaller tiles. There is no way to sort an object in that empty zone, and of course is a waste of space.

This is the HTML code, I'm using Angular with Kendo also:

As you can see are just simple divs, there is no list view, repeated with angular directvie ng-repeat 

Have you got any idea to find a solution about this problem?

Please have a look at this rudimentary version of a query builder that I aim to create.

http://dojo.telerik.com/uKeCe

Try out the sortable feature. I think you notice the time lag at row drop. Is there anything that could be optimized in the code to eliminate it? Am I doing anything wrong? ...I did not have the nerve to try it, say, on IE10 ;-)

Also, what should I do to have the binding cast null sortDir value as empty string, ie. '(none)'?

Best,

moniuch

Hi. There. Please have a look attachment.
From the attachment, you can see i have got three grids.
Grid1-Green
    Grid2-Blue
       Grid3-White
Grid3-white is nested inside Grid2-Blue. Grid2-Blue is nested inside Grid1-Green.
That is the background.
I want to achieve Grid3-White is draggable within container of Grid2-Blue.
And Grid2-Blue is draggable within container of Grid2-Blue.
And Grid1-Green is draggable within container of Grid1-Green.

I have used ignore option is sortable.
From Grid1-Green i set it to container 'Grid1-Green > tbody >tr ' and ignore 'background-color-light-blue'. This is working nicely. Grid1-Green and Grid2-Blue sort individually without conflicting each other.
But when i set Grid2-Blue i set it to container 'Grid2-Blue > tbody >tr ' and ignore 'background-color-white'. This is not working. When i drag Grid3-White, whole section of Grid2-Blue got dragged!!!
Am i in right track or are there any other ways to achieve this? Thx in advance.

Is it possible to enable text selection for content inside sortable panels? Even after removing "user-select: none" from the CSS files, I am unable to select text inside the panels. It seems that text selection is disabled from within the Kendo js file, because I can select content inside the panels when I don't include the kendo.all.js file.

 Thanks!