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

Grid Column Chooser Drag and Drop

1 Answer 138 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Koncuk
Top achievements
Rank 1
Koncuk asked on 13 Nov 2017, 07:52 PM

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.

 

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 15 Nov 2017, 09:30 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Koncuk
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or