This is a migrated thread and some comments may be shown as answers.

Sortable + Bootstrap

3 Answers 156 Views
Sortable
This is a migrated thread and some comments may be shown as answers.
Mattia
Top achievements
Rank 1
Mattia asked on 08 Sep 2015, 09:41 AM

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:

<style>
    .small-panel {
        height: 400px;
    }
 
    .big-panel {
        height: 800px;
    }
</style>
 
<div class="row" id="canvas" kendo-sortable k-options="ctrl.sortOptions">
    <div ng-repeat="dataItem in ctrl.charts" class="k-block col-lg-{{dataItem.col.lg}} col-md-{{dataItem.col.md}} col-sm-{{dataItem.col.sm}}">
        <div class="k-header">{{dataItem.name}} col {{ dataItem.col }}</div>
        <div kendo-chart          
             k-theme="'material'"
             k-options="{{ dataItem.options }}"
             class="{{ dataItem.dimension }}-panel">
        </div>       
    </div>
</div>

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?

3 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 10 Sep 2015, 08:17 AM
Hi Mattia,

No matter of the layout type the Sortable widget always puts item in the DOM before or after the target element. It does not control the size or visual position of the elements, this is a matter of CSS styling.

I understood the problem but I am not sure what kind of result you would like to achieve. I may suggest to try out the moveOnDragEnter configuration option which we introduced recently.

By default the Sortable widget changes item position after mouse passes half of the target item width/height. This is not very convenient for scenarios which involve large containers like yours. Setting moveOnDragEnter: true will force the widget to move item as soon as user enters on the target item.

Note that the moveOnDragEnter configuration option is available since the latest service pack release.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mattia
Top achievements
Rank 1
answered on 11 Sep 2015, 01:13 PM

Hi Alexander, thanks for the reply.

I don't know if what I want to do is possible, but I would like to fill all the space available with my tiles, not only floating left them.

I've tried with moveOnDragEnter: true but seems that nothing change.

I've made a nice live example in kendo dojo here: http://dojo.telerik.com/Ekuzu/8
If you play a bit with it, I think you can realize what I'm talking about, when a tile has a double height, it blocks the floating left of the other smaller tile. 
I don't know if is possibile with this hybrid approach and I am not a "wizard" of CSS and HTML =)

Thanks, Mattia

0
Alexander Valchev
Telerik team
answered on 15 Sep 2015, 08:11 AM
Hi Mattia,

Thank you for the nice example, it was fun to play with it and I managed to understand what you want to achieve.

As explained before the Sortable widget does not control the dimensions of the items. That said there is no way to auto expand the size of the time.

If you check this demo page you will notice that the size of the dragged item changes depending on the container it is moved in. This happens because in the background there are two containers (main and sidebar). When a given item is moved from one container into another it receives different styling and respectively looks different.

This approach however limits you to have a given number of columns or rows each of which has children with pre-defined size.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Sortable
Asked by
Mattia
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Mattia
Top achievements
Rank 1
Share this question
or