Sortable + Bootstrap

[Mattia]

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?

[Alexander Valchev]

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

 

 

[Mattia]

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

[Alexander Valchev]

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