Grid Column Chooser Drag and Drop

2 posts, 0 answers
  1. Koncuk
    Koncuk avatar
    1 posts
    Member since:
    May 2016

    Posted 13 Nov 2017 Link to this post

    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.

     

  2. Stefan
    Admin
    Stefan avatar
    2950 posts

    Posted 15 Nov 2017 Link to this post

    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.
Back to Top