Drag and drop cards in the grid

Progress® KendoReact Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 28 Sep 2021 10:05 by ADMIN

Gokul

Created on: 27 Sep 2021 09:40

Category: KendoReact

Type: Feature Request

Drag and drop cards in the grid

Hi,

Hope you are doing good.

We have requirement that, there are some cards (Each cards are separate component like chart, grid, etc). Also have separate multiple grids like 2*2, 4*4. We need to drag the cards and drop it in any of the grid.

For your ref, the feature is somewhat like this https://demos.telerik.com/kendo-ui/cards/drag-and-drop .

Please let me the example. Also revert me if you have any doubts.

Thanks,

Gokul

5 comments

ADMIN

Stefan

Posted on: 28 Sep 2021 10:05

Hello, Gokul,

Thank you for the confirmation.

I have transferred this to an official feature request. We will monitor the interest in it and plan it accordingly.

I have also already added your vote for convenience.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Gokul

Posted on: 28 Sep 2021 09:43

Hi Stefan,

Yeah, Please consider as a feature request and do the needful.

Thanks,

Gokul

ADMIN

Stefan

Posted on: 28 Sep 2021 05:04

Hello, Gokul,

Thank you for the clarification.

This will require a new feature for drag and drop between elements.

The listed feature from Kendo UI for Cards drag and drop is actually using the Sortable widget as well, but it is for items in the same list:

        $(document).ready(function () {
            $("#list").kendoSortable({
                filter: ".k-card",
                cursor: "move",
                placeholder: function (element) {
                    return element.clone().css("opacity",  0.1);
                },
                hint: function (element) {
                    return element.clone().css("width", element.width()).removeClass("k-state-selected");
                }
            });
        });

If you wish I can transfer this as an official public feature request as this is how we prioritize the features based on the community interest.

Regards,
Stefan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Gokul

Posted on: 27 Sep 2021 11:05

Hi Stefan,

Thanks for immediate response.

I've gone through the sortable earlier but it's like shuffle within the collection.

Let me explain the requirement. Assume that the screen have two parts i.e., Side Panel, Main screen. The side panel consist of multiple cards like chart, grid, some text, etc., And the main window consist of multiple grid boxes.

The use case is that, the user can drag only the required cards from the side panel and drop it to the grid box in main screen. Once it dragged from side panel then the particular component will remove from the side panel. User can do the same for all cards from side panel.

So, Is there any example which matches the above requirement then let me know.

Thanks,

Gokul

ADMIN

Stefan

Posted on: 27 Sep 2021 10:46

Hello, Gokul,

We are doing good thank you, I hope you are having a good day as well.

We can suggest using our Sortable component that allows to drag and drop of different React components:

https://www.telerik.com/kendo-react-ui/components/sortable/

As the developer has full control over the rendering of the Sortable items, each item can be a card and can be moved inside the collection.

Regards,
Stefan
Progress Telerik