Reordering by something other than header

[krisdoff]

Hi there,

Is there any provision for hiding the header but yet still being able to reorder by dragging the content around?

 

Many thanks

Paul

[Paul]

Please post if you find a solution. I'll do the same. I am in need of initiating the reorder from the body of the card as I don't have a header in all cases.

[Anton Mironov]

Hi Paul,

I am searching for a solution and trying to implement one. This is a custom scenario and obviously is not built-in functionality.

In order to achieve the desired behavior, I would recommend trying the implementation of the following demo:

• https://demos.telerik.com/kendo-ui/tilelayout/keyboard-navigation

The combination "Shift + Left" reorders the current item with the previous one. "Shift + Right" reorder the item with the next one.

I removed the header for the first item in the following example that I prepared for the case. Try the key combinations above when the card without header is focused and observe the result:

• https://dojo.telerik.com/@anton.mironov/AyOWIjoZ

I hope using the keyboard combinations will be a working decision for the needs of your application.


Kind Regards,
Anton Mironov
Progress Telerik

[Paul]

I guess it is better than nothing but not sure it will work. Can I remove the card body and only use the header? Any way to size the header to take all the space?

[Paul]

Here is a solution. I am not a fan of it because it requires me to modifly the kendo.all.js file. I like to use the custom downloader tool to keep stuff minified. I may look at modifying this file as well which would be better. Hope the other Paul finds this useful.

Using Kendo 2021.1.224 and kendo.all.js.My comments should allow you to easily see what was added. 

Start with line 174669.

if (!containerSettings.bodyTemplate) {
    throw new Error('Having a bodyTemplate for the container is mandatory');
}
if (that.options.reorderable) {
   // Add for body draggable
   body.addClass(GRABCURSOR);
}
body.append(kendo.template(containerSettings.bodyTemplate)({}));

 

 

Now line 175083:

 

var headerSelector = selector(TileLayout.styles.itemHeader);
// Add for body draggable
var bodySelector = selector(TileLayout.styles.itemBody);
var group = kendo.guid();
this._draggableInstance = new Draggable(this.element, {
    // Add for body draggable
    filter: headerSelector + ", " + bodySelector,
    autoScroll: true,
    group: group,
    hint: function (target) {
        var item = target.closest(itemSelector);
        var width = item.width();
        var height = item.height();
        var clone = item.clone();
        clone.find(headerSelector).removeClass(GRABCURSOR).addClass(GRABBINGCURSOR);
        // Add for body draggable
        clone.find(bodySelector).removeClass(GRABCURSOR).addClass(GRABBINGCURSOR);
        return clone.width(width).height(height);
    },

 

All lines I added have a comment above them.

[Anton Mironov]

Hi Paul,

Thank you for sharing your approach with the community.

In order to implement this one as a built-in, I would recommend opening a Feature Request using our Feedback Portal:

• https://www.telerik.com/support/feedback

Most voted suggestions are considered for implementation.

If further assistance needed, do not hesitate to contact me and the team.

Best Regards,
Anton Mironov
Progress Telerik