Event for dragging column and hide

[Markus]

Hi

In my example - http://dojo.telerik.com/exaBa - I am looking for an event which lets me detect when a user drags the column but does not reorder it...

In other words: the user drags the column outside the grid - intention to delete (hide) that column.

 

I am aware that I can use the column menu, but that creates a button (that is not floating) and uses too much space (I have a lot of columns in my grid so I need all the space I can get)

 columnMenu: {
        sortable: false
   }

 

Many thanks

[Kiril Nikolov]

Hello Markus,

I am afraid that such event is currently not available. The built-in feature for hiding columns is the column menu as you already noticed. You can submit this as a feature request on UserVoice, so that it is considered for implementation in a future release.

Regards,
Kiril Nikolov
Telerik

 

 

[Vidya]

Hi,

Anybody found any workaround solution to achieve it?

[Alex Hajigeorgieva]

Hi, Vidya,

The Kendo UI Grid and the Kendo UI Draggable widget that facilitates this functionality do not have such an event as part of their API.

However, you may get hold of the private property that holds the draggable instance and compare the id of the target and the currentTarget to check if the reorder occured. 

grid.one("dataBound", function(e){
    var grid = e.sender;
    grid._draggableInstance.bind("dragend", function(ev){
      var target = $(ev.target)
        if(target.attr("id")== ev.currentTarget.attr("id")){
          kendo.alert("No reorder occurred!");
        }  
    });
  });

Here is a runnable Dojo for your reference:

https://dojo.telerik.com/@bubblemaster/EdeHoWoS/2

The way to get hold of the draggable instance may differ dependent on the used grid features. In case you have any difficulties, provide the grid configuration you are working on.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Nick]

Hi Alex,

 

I tried the example above but the message "No reorder occurred!" is not displayed.

 

Nick

[Georgi Denchev]

Hi, Nick,

I ran the example provided by Alex and everything seems to be working as expected, the alert appears:

I also tested the functionality with the latest version in the following Dojo:

https://dojo.telerik.com/@gdenchev/AgOfetAp 

And the result was the same. My assumption is that at the moment of the "drop" the target element is the drag clue itself, rather than the Grid header(th) element. In which case the id would be undefined and the conditional check would fail.

Try clicking and dragging from around this point:

Instead of this one:

Let me know if that makes a difference.

Best Regards,

Georgi

[Nick]

Hi Georgi,

Thank you for your answer. 

As you can see here I did some tests but I managed to get the message only once

https://ln5.sync.com/dl/c50bb20f0/6gf7cjd3-itvruqub-ugxpurqw-qf6icqjq

Do I do something wrong?

Thanks,

Nick

[Georgi Denchev]

Hi, Nick,

The solution that my colleague Alex provided is meant to display the message when you drop the currently dragged column over itself, not anywhere else on the page, recording:

http://somup.com/c3eZQ0TLqy 

I've modified the Dojo a bit and it should now cover most of the "fail" cases, including dropping anyhwere on the page:

https://dojo.telerik.com/@gdenchev/adiDuNOV 

Best Regards,

Georgi

[Nick]

Georgi,

Thanks a lot for this. You are a superstar!

 

Nick

[PALANISELVAM]

Hello, 

 

I tried to create draggable event(_draggableInstance) and I get the object as Undefined. Draggable instance is available only in the commercial version?

 

Palani

[Georgi Denchev]

Hello, Palani,

The draggable instance in the examples showcased above, is part of the Kendo Grid which does require a valid license. The drag and drop itself is available as part of the Kendo UI Core suite.

You can see a list of the available Core widgets here:

https://github.com/telerik/kendo-ui-core 

Best Regards,

Georgi