Grid Column Chooser Drag and Drop

[Koncuk]

Hi,

I'm new to using kendo

We want to allow user to drag and drop to show/hide columns from a column chooser box.  We want to allow user to be able to drag a column from the list box and drop it in the column header of the grid. So it will be easy for user to design their grid columns layout.  Is there an example to do that?

Please check the attached image for the screenshot about the function we want.

 

[Stefan]

Hello, Feride,

Currently, the Kendo UI Grid has a built-in functionality to choose which columns will be shown in the Grid and which does not. This can be achieved with the Grid columnMenu:

http://demos.telerik.com/kendo-ui/grid/column-menu

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columnMenu

As for the requirement UI from the screenshot, this will require custom logic to be achieved by using the Drop target and the setOptions of the Grid in order to add a new column to the Grid:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions

https://docs.telerik.com/kendo-ui/controls/interactivity/draganddrop/overview

http://demos.telerik.com/kendo-ui/dragdrop/index

Another custom approach will be with a MultiSelect:

https://docs.telerik.com/kendo-ui/knowledge-base

Regards,
Stefan
Progress Telerik