Drag and drop

[Jonasz Makulak]

Hi,

I'm working on something similar to KanbanBoard.

I have SfCarousel, and inside it I've got SfListView.

Is there any possibility to move element from one ListView to another?

Maybe there are other controls thac can I use to achive my goal? (No, SfKanban is not answer) ;)

[Dhanasekar R]

Hi Jonasz, 

 

Greetings from Syncfusion. 

 

As per the current implementation of SfCarousel, we don’t have support to drag and drop the any element from one view to another view. We will validate the possibilities with SfListView control and let you know. 

 

Regards, 

Dhanasekar 

[Deivaselvan Y]

Hi Jonasz,  

  

Currently, SfListView does not have support for drag and drop an item from one listview to another. We have already considered it as an feature and added it into our feature request list. You can track the progress of the reported feature from the below link.     

     

Feature Link : https://www.syncfusion.com/feedback/1185/provide-support-for-drag-and-drop-the-item-between-two-listviews   

Note: The date for implementation of requested feature is tentative and it will be included in any of our upcoming release.    

  

We would like to let you know that you can achieve your requirement in the sample level using the ItemDragging event of the listview. Based on the bounds value of the listview you can remove and add the dragging item from one collection to another.  

  

Code Example XAML:  

<ContentPage>  

    <Grid>  

        <syncfusion:SfListView x:Name="ToDoListView"  

                               ItemsSource="{Binding ToDoList}"  

                               DragStartMode="OnHold,OnDragIndicator">  

        </syncfusion:SfListView>  

        <syncfusion:SfListView x:Name="WorkDoneListView"  

                               ItemsSource="{Binding NewList}"  

                               DragStartMode="OnHold,OnDragIndicator">  

        </syncfusion:SfListView>  

    </Grid>  

</ContentPage>  

  

C#:  

private async void WorkDoneListView_ItemDragging(object sender, ItemDraggingEventArgs e)  

{  

    var position = new Point();  

    var xPosition = e.Position.X;  

    double yPosition = e.Position.Y;  

    position.X = xPosition;  

    position.Y = yPosition;  

    if (e.Action == DragAction.Dragging)  

    {  

        if (this.ToDoListView.Bounds.Contains(position))  

            this.ToDoListView.BackgroundColor = Color.Red;  

        else  

            this.ToDoListView.BackgroundColor = Color.White;  

    }  

    if (e.Action == DragAction.Drop)  

    {  

        if (this.ToDoListView.Bounds.Contains(position))  

        {  

            var item = e.ItemData as ToDoItem;  

            await Task.Delay(100);  

            viewModel.NewList.Remove(item);  

            viewModel.ToDoList.Add(item);  

            item.IsDone = false;  

        }  

        this.ToDoListView.BackgroundColor = Color.White;  

    }  

}  

  

private async void ToDoListView_ItemDragging(object sender, ItemDraggingEventArgs e)  

{  

    var position = new Point();  

    var xPosition = e.Position.X;  

    double yPosition = e.Position.Y;  

    position.X = xPosition;  

    position.Y = yPosition;  

  

    if (e.Action == DragAction.Dragging)  

    {  

        if (this.WorkDoneListView.Bounds.Contains(position))  

            this.WorkDoneListView.BackgroundColor = Color.Red;  

        else  

            this.WorkDoneListView.BackgroundColor = Color.White;  

    }  

    if (e.Action == DragAction.Drop)  

    {  

        if (this.WorkDoneListView.Bounds.Contains(position))  

        {  

            var item = e.ItemData as ToDoItem;  

            await Task.Delay(100);  

            viewModel.ToDoList.Remove(item);  

            viewModel.NewList.Add(item);  

            item.IsDone = true;  

        }  

        this.WorkDoneListView.BackgroundColor = Color.White;  

    }  

}  

  

Please find the sample from the below link.  

  

Sample: http://www.syncfusion.com/downloads/support/forum/143454/ze/Sample821276954   

  

Note: ListViewItem is added in the container so item does not come out from it.  

  

Regards,  

Deivaselvan 

[Jonasz Makulak]

Is there any possibility to make selected item follow user finger?

In ListView area it is nice, and item follows finger, but when user moves finger over the source list view it is not. 

[Dinesh Babu Yadav]

Hi Jonasz, 

 

Query 1: Selected Item should follow user finger 

 

We would like to let you know that the Drag and Drop action in SfListView would be performed based on the gestures position only and it is irrespective of item. So, we regret to let you know that you could not able to move the selected item when touch finger is in other position. 

 

Query 2: Item is not visible when it is dragged into another listview. 

 

 By default, SfListView does not support to drag and drop the item between two listview. However, to achieve the requirement, we customized the listview at the sample level by removing the item from one listview and added into the another listview based on the touch position and did manual calculation accordingly. So, it behaves as like the reported which we have already updated in the previous update. 

 

Regards, 

Dinesh Babu Yadav  

[Jonasz Makulak]

Thank You for answer, I've got one more problem.

I've got SfListView inside SfCarousel. When I'm trying to drag item (only reorder, I'm not trying to move from one list to another) Sfcarousel returns to its first state - for example, when I want to reorder items from 3rd column SfCarousel always back to 1st column.

Do You have solution for this?

[Gnana Priya Namasivayam]

Hi Jonasz, 

We are currently checking on the reported query from our side. We will validate and provide further details on or before April 10, 2019. We will appreciate your patience until then. 

Regards, 

Gnana Priya N 

[Gnana Priya Namasivayam]

Hi Jonasz, 

  

Thanks for your patience. 

We have checked the reported query with Sflistview inside sfcarousel page from our side. While drag and drop, items didn’t seem to re-order as mentioned in tested sample. Meanwhile, can you please explain your use case in detail to analyze better and provide appropriate solution at our end. We have attached the tested sample form your reference, please refer the sample form below. 

Sample Link : http://www.syncfusion.com/downloads/support/forum/143454/ze/GettingStarted-900396092  

Can you please check with the above sample whether you are getting the reported issue in our sample also. If not, please revert us back with the issue reproducible sample so that we could able to analyzed your query better. 

Regards, 

Gnana Priya N 

[Jonasz Makulak]

I'm sorry, I forgot to say, that it is necessary to set ViewMode="Linear".

[Muneesh Kumar G]

Hi Jonasz, 

 

Thanks for your update,  

 

We have checked modified the sample with SfTabView Control to achieve your requirement with ViewMode as Linear. Please have the sample from the below link, 

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/GettingStarted_51190713619 

 

Please check with the sample and let us know if you have any concern. 

 

Thanks, 

Muneesh Kumar G.