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

DragVisual

37 Answers 460 Views

DragAndDrop

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

Kishorekumar asked on 24 Jul 2020, 11:17 AM

cursor.jpg

Hi all

I have a ListBox and its has Items to be Displayed. Additional i have added

<telerik:ListBoxDragDrop.Behavior> // for dragging operation
<telerik:ListBoxDragDropBehavior AllowReorder="True" telerik:TouchManager.DragStartTrigger="TapHoldAndMove" />
</telerik:ListBoxDragDrop.Behavior>

<telerik:ListBoxDragDrop.DragVisualProvider> //// for dragging Visual operation
<telerik:ScreenshotDragVisualProvider />
</telerik:ListBoxDragDrop.DragVisualProvider>

Any idea to Restrict the Dragging-Visual within the parent windows bounds.

Thanks In Advance

37 Answers, 1 is accepted

answered on 13 Aug 2020, 01:03 PM

CustomListBoxDragDropBehavior.zip

Hi Kishorekumar,

My name is Dilyan and I'm stepping in for my colleague Vladimir who is currently out of office.

Indeed, the ListBoxDragDropBehavior supports the dragging of multiple items and also exposes methods for further customization.

I'm attaching a small sample project which demonstrates this in action. You can select multiple items by holding the Ctrl or Shift key and then drag one of the selected items.

Please have a look and let me know if this would work for you.

Regards,
Dilyan Traykov
Progress Telerik

answered on 19 Oct 2020, 02:51 PM

xamlcode.jpg

behaviourcode.jpg

xamlcodeea4970502f6445518e6a76b99a122497.jpg

I have attached snaps for reference

answered on 21 Oct 2020, 02:51 PM

Hi Kishorekumar,

I tested both versions at my end with the sample project I last sent, however, I do not observe any difference in behavior. Would you find it possible to share a short recording that demonstrates the results you observe at your end so that I can further assist you? Also, if any modifications need to be applied to the original project, please let me know.

Thank you in advance for your cooperation on the matter. I will be awaiting your reply.

Regards,
Dilyan Traykov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

answered on 07 Dec 2020, 08:20 AM

cursorc893b7949c2f422082463bcd31acc0cc.jpg

Hi Dilyan Traykov,
In the Below image If i have two list item with same name but with different capital name(sub-name).When i try to drag any one of the item both the item has to dragged and dropped. Any Idea for this Scenario. For Example I have USA as listItem name but capital name (subname) with two different one.
I Know that ListBoxDragDropBehavior supports the dragging of multiple items with selection of Ctrl keys.
But if i select any one of the itemname both the list item has to be dragged and dropped without the use of Ctrl keys.

answered on 08 Dec 2020, 03:06 PM

CustomListBoxDragDropBehavior.zip

Hello,

Thank you for the provided image.

You can achieve the desired result by overriding the CoerceDraggedItems method of the ListBoxDragDropBehavior and adding the desired item(s) to the DraggedItems collection. In addition, you may want to also add the new item to the SelectedItems collection of the RadListBox control, for which you will also need to introduce a property to hold a reference to the control.

Please note that due to a previous bug in the method, this will only work with versions newer than 2020.3.1020.

Attached, you will find the updated sample project which demonstrates this approach. I hope this works for you.

Regards,
Dilyan Traykov
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/.

answered on 16 Dec 2020, 06:53 AM

bug.jpg

autoscroll.jpg

expectoutput.jpg

code1.jpg

code2.jpg

code3.jpg

Hi Dilyan TrayKov,
In the above thread, the sample which you gave is not working as expected. I have attached the sample picture(bug.jpg).
As per the code in Code Behind sample which you sent while choosing customer 3(list box item), customer 2(list box item)
also, get selected by default and must be dragged(both items) and drop towards the right side of the list box(another list box).
As you can see in the below attached image(bug.jpg) only customer 3(list box item) gets selected.
Can you suggest any sample for the above problem. I expect to be like (expectOutput.jpg) as you can see in the attached image I have two SouthAfrica ListBoxItems with different capital names (subtext). So When I try to drag any one of the items both the item has to dragged and dropped.

I also have queries regarding auto-scrolling in Listbox with drag-drop behavior. I have attached (autoscroll.jpg) for reference. As you can see that during dragging when I move the item towards the end of the control there are some more items in control. I want to auto-scroll the control during dragging to replace the dragged item
in the below items. Any Idea for this problem. I tried the below code
<ScrollViewer
x:Name="scrollDragDrop"
Grid.Row="1"
Margin="5"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<telerik:RadListBox
x:Name="lbTodoList"
Grid.Row="0"
AllowDrop="True"
DragOver="RotationItemsControl_DragOver"
ItemContainerStyle="{StaticResource DraggableListBoxItem}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto">
......
</>
ScrollViewer control is used as the parent of RadListBox and DragOver Event I added the event code to scroll(please find the attached code.jpg pics).

And last is I do like to get the data context of the (MainWindow.XAML) xaml in custom behavior (ListboxDragDropBehaviorCustom.cs) Drop method any suggestion for this problem(please find the attached project). I am using the 2020.3.1012.40 Build version of Telerik.
Let me know where it went wrong.

Regards,
Kishore Kumar

answered on 18 Dec 2020, 01:48 PM

listbox-drag.gif

CustomListBoxDragDropBehavior-WPF.zip

Hello Kishore,

If you wish to also initially select the extra item, you can handle the SelectionChanged event as follows:

        private void ListBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var selectedItems = e.AddedItems.OfType<Customer>();
            if (selectedItems.Any(c => c.Name == "Customer 3"))
            {
                var extraItem = this.ListBox1.Items.OfType<Customer>().First(c => c.Name == "Customer 2");
                if (!selectedItems.Contains(extraItem))
                {
                    this.ListBox1.SelectedItems.Add(extraItem);
                }
            }
        }

Of course, you can further modify this to be a more generic approach. By adding this extra handler, I'm able to select both items, drag them together, and, once I reach the bottom of the control, the auto-scroll is carried as expected. I've prepared a short recording of the result I observe at my end. Can you please have a look at it and let me know how it differs from the desired result? You can also test this with the updated project I've attached.

As we've already exposed the instance of the RadListBox in the custom behavior, you can get ahold of the DataContext through it:

        public override void Drop(DragDropState state)
        {
            var dataContext = this.ListBox.DataContext;

            base.Drop(state);
        }

I hope you find all of this information helpful.

As we've already shifted from the original topic of this thread, may I kindly ask you to open a new one if any further questions or concerns which do not regard it arise so that we can keep our forums organized and make them more helpful to our community? Thank you in advance for your cooperation on the matter.

Regards,
Dilyan Traykov
Progress Telerik

answered on 21 Dec 2020, 09:37 AM

Hi Dilyan Traykov,
The Above sample-demo project is working as expected. Thanks for sharing the code-snippet for getting data context and multi items-drag and drop.
But the scrolling doesn't work when I tried to attach the item template with data template to that Rad List Box control scrolling
As Observed scrolling does not work from top to botton dragging items but it works bottom to top drag items. When I tried to use DisplayMemberPath everything works fine top to bottom drag and bottom to top drag item.
Please have a look at this issue.
The Code I used Is.
<Window
x:Class="ListBoxDragDrop.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:ListBoxDragDrop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
Title="MainWindow"
Width="400"
Height="450"
mc:Ignorable="d">
<Window.Resources>
<Style TargetType="{x:Type telerik:RadListBox}">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel />

</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DraggableListBoxItem" TargetType="telerik:RadListBoxItem">
<Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
</Style>
</Window.Resources>
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>

<telerik:RadListBox
x:Name="lbTodoList"
Grid.Row="0"
AllowDrop="True"
ItemContainerStyle="{StaticResource DraggableListBoxItem}">
<telerik:RadListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="MyGroupMainHeight" />
<ColumnDefinition Width="Auto" SharedSizeGroup="MyGroupMainHeight" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
Grid.Column="0"
FontWeight="Bold"
Text="{Binding Title}" />
<TextBlock
Grid.Row="1"
Grid.Column="0"
FontWeight="Bold"
Text="{Binding Capital}" />
<TextBlock
Grid.Row="1"
Grid.Column="1"
Text="{Binding CapitalContent}" />
<TextBlock
Grid.Row="2"
Grid.Column="0"
FontWeight="Bold"
Text="{Binding Abbreviation}" />
<TextBlock
Grid.Row="2"
Grid.Column="1"
Text="{Binding AbrvContent}" />
</Grid>

</DataTemplate>
</telerik:RadListBox.ItemTemplate>

<telerik:RadListBox.DragVisualProvider>
<telerik:ScreenshotDragVisualProvider />
</telerik:RadListBox.DragVisualProvider>
<telerik:RadListBox.DragDropBehavior>

<local:ListboxDragDropBehaviorCustom />
</telerik:RadListBox.DragDropBehavior>
</telerik:RadListBox>

</Grid>

public MainWindow()
{
Telerik.Windows.DragDrop.DragDropManager.UseAdornerLayer = true;
InitializeComponent();
ObservableCollection<TodoItem> items = new ObservableCollection<TodoItem>();
items.Add(new TodoItem() { Title = "INDIA", Capital = "Capital", CapitalContent = "Delhi", Abbreviation = "Abbreiation", AbrvContent = "IND" });
.....
items.Add(new TodoItem() { Title = "IRAN", Capital = "Capital", CapitalContent = "Tehran", Abbreviation = "Abbreiation", AbrvContent = "IR" });
lbTodoList.ItemsSource = items;
}
</Window>

Thanks in Advance!

answered on 21 Dec 2020, 05:04 PM

Hi Kishore,

Thank you for the provided code snippet.

As due to the custom item template the height of the items is increased, you also need to set an appropriate value for the ScrollingSettingsBehavior.ScrollStep attached property:

<telerik:RadListBox telerik:ScrollingSettingsBehavior.ScrollStep="60"

Please give this a try and let me know if it provides the desired result.

Regards,
Dilyan Traykov
Progress Telerik

answered on 22 Dec 2020, 09:37 AM

Hi Dilyan Traykov,

Thanks!!! It is working as expected. But Drop operation is not working When I added

<telerik:RadBusyIndicator BusyContent="Finialising you action..." IsBusy="{Binding IsDragAndDragPopupLoading}">

The Code I used is

<telerik:RadBusyIndicator BusyContent="Finialising you action..." IsBusy="{Binding IsDragAndDragPopupLoading}">

<grid>

<telerik:RadListBox
x:Name="lbTodoList"
Grid.Row="0"
AllowDrop="True"
ItemContainerStyle="{StaticResource DraggableListBoxItem}">

<telerik:RadListBox.ItemTemplate>

.......

</telerik:RadListBox.ItemTemplate>

<telerik:RadListBox.DragVisualProvider>
<telerik:ScreenshotDragVisualProvider />
</telerik:RadListBox.DragVisualProvider>
<telerik:RadListBox.DragDropBehavior>
<<telerik:ListBoxDragDropBehavior />
</telerik:RadListBox.DragDropBehavior>
</telerik:RadListBox>

<grid>

IsDragAndDragPopupLoading in binding is set to true in Drop(DragDropState state) method and 2minute to reload the busy indicator and then set IsDragAndDragPopupLoading to false.

Let me know where it went wrong.

Regards,
Kishore Kumar

answered on 25 Dec 2020, 07:41 AM

CustomListBoxDragDropBehavior-WPF.zip

Hello Kishorekumar,

Thank you for the provided code snippet.

I have tested your scenario by adding RadBusyIndicator inside Dilyan's project but couldn't reproduce it. Or I am missing something from your set-up. You can find the project attached to this reply. When you run the project, select the third item in the list. The second item will also be added to the selection. Then drag and drop the selected items on different positions in the list. You can observe that a RadBusyIndicator will appear for two seconds. After that, you can perform the same steps again. Keep in mind that the RadBusyIndicator will appear on top of its content, and you won't be able to reach it while the IsBusy property is true.

Regards,
Dinko
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/.

answered on 25 Dec 2020, 11:41 AM

observance.jpg

Hi Dinko / Dilyan Traykov,

The Sample project which you provided works when the control telerik:RadBusyIndicator is on top of <telerik:RadListBox> control. But I tried to add RadBusyIndicator control on top of Grid and added DragDropManager.UseAdornerLayer = true in UserControl Constructor.

Then I was not able to drop the listbox item. I have attached snap(Observance.jpg)for reference. The Code I used is

<telerik:RadBusyIndicator BusyContent="Adding Items" IsBusy="{Binding IsDragAndDragPopupLoading}">
<Grid DataContext="{StaticResource CustomerViewModel}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>

<telerik:RadListBox
x:Name="ListBox1"
Margin="20"
DisplayMemberPath="Name"
ItemContainerStyle="{StaticResource DraggableListBoxItem}"
ItemsSource="{Binding Customers1}"
SelectionChanged="ListBox1_SelectionChanged"
SelectionMode="Extended">
<telerik:RadListBox.DragVisualProvider>
<telerik:ScreenshotDragVisualProvider />
</telerik:RadListBox.DragVisualProvider>
<telerik:RadListBox.DragDropBehavior>
<local:MyListBoxDragDropBehavior />
</telerik:RadListBox.DragDropBehavior>
</telerik:RadListBox>

</Grid>
</telerik:RadBusyIndicator>
</UserControl>

public MainUserControlWindow()
{
DragDropManager.UseAdornerLayer = true;
InitializeComponent();
(this.ListBox1.DragDropBehavior as MyListBoxDragDropBehavior).ListBox = this.ListBox1;
(this.ListBox2.DragDropBehavior as MyListBoxDragDropBehavior).ListBox = this.ListBox2;
}

In my observance when DragDropManager.UseAdornerLayer is set to false the telerik:RadBusyIndicator works when the sub element is grid. As mentioned by Vladimir Stoyanov in this thread DragDropManager.UseAdornerLayer is set to true to force the drag visual to remain within the boundaries of the current window. When UseAdornerLayer is set to true telerik:RadBusyIndicator is not working.

Looking Forward for a solution on this issue in telerik:RadBusyIndicator control.

Thanks in Advance.

Regards,

KishoreKumar

answered on 28 Dec 2020, 03:12 PM

Hello Kishorekumar,

Thank you for the provided image and your patience.

After an investigation on our side, it turns out an element inside the RadBusyIndicator control handles the drop functionality. That is why I have logged this behavior in our Feedback Portal, where you can track its progress. I am happy to inform you that a fix will be included in our next LIB, which will be available tomorrow. You can download it from your account.

Give it a try and let me know if it works in your application. Your Telerik Points are updated for pointing this to us.

Regards,
Dinko
Progress Telerik

Accepted

Kishorekumar

commented on 08 Oct 2021, 01:11 PM

Hi Dinko / Telerik Team,

https://www.telerik.com/forums/drag-drop-listbox-dragging-behaviour-improvements

Can you provide solution for this.

Thanks and Regards,

Kishore Kumar

Dinko | Tech Support Engineer

commented on 13 Oct 2021, 09:17 AM

I have checked your post and the RadListBox control does not support this drag-drop behavior. This is a custom implementation and I am afraid that I can't provide you with a solution for this as this goes beyond our support scope.

answered on 20 Jan 2021, 10:17 AM

Hi Kishorekumar,

I am afraid I can't suggest you a suitable workaround. However, I am happy to inform you an R1 2021 version of our controls was released today. This latest official version will include the fix. It will be available for download in your account. You can consider updating the DLLs to their latest version so that you can take advantage of new controls, new functionalities, bug fixes, etc.

Regards,
Dinko
Progress Telerik

answered on 25 Jan 2021, 06:09 AM

bug0db192588495492a82fb67a6895b93de.jpg

Hi Dinko

With respect to Dilyan Traykov Code-Snippet in the above thread selection changed event

for Multiple Selection When CUSTOMER 2 List Box ITEM is selected CUSTOMER 3 also get Selected.

I tried the reverse order when CUSTOMER 3 LIST BOX ITEM is selected CUSTOMER 2 List Box Item also get selected. I Observed issue while Dragging the selection occurs in reverse order.

I Have attached a sample Image (Big.jpg)for referenece.

The code I used is

private void ListBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var selectedItems = e.AddedItems.OfType<Customer>();
if (selectedItems.Any(c => c.Name == "Customer 3"))
{
var extraItem = this.ListBox1.Items.OfType<Customer>().First(c => c.Name == "Customer 2");
if (!selectedItems.Contains(extraItem))
{
this.ListBox1.SelectedItems.Add(extraItem);
}
}
if (selectedItems.Any(c => c.Name == "Customer 2"))
{
var extraItem = this.ListBox1.Items.OfType<Customer>().First(c => c.Name == "Customer 3");
if (!selectedItems.Contains(extraItem))
{
this.ListBox1.SelectedItems.Insert(0, extraItem);
}
}
}

Let me know where it went wrong.

Regards,
Kishore Kumar

answered on 27 Jan 2021, 12:32 PM

Hi Kishorekumar,

Thank you for the provided image.

To reorder the drag items you could create a custom DragVisualProvider. To do that you can implement the IDragVisualProvider interface and create your logic inside the CreateDragVisual() method. You can use the custom drag visual provider below:

public class CustomScreenshotDragVisualProvider : IDragVisualProvider
{
    static List<Customer> customers;
    public bool UseDefaultCursors = true;

    bool IDragVisualProvider.UseDefaultCursors { get { return true; } }

    public FrameworkElement CreateDragVisual(DragVisualProviderState state)
    {
        RadListBox listBox = new RadListBox();
        listBox.DisplayMemberPath = "Name";
        customers = new List<Customer>();
        foreach (var item in state.DraggedItems)
        {
            customers.Add(item as Customer);
        }
        listBox.ItemsSource = customers.OrderBy(x=>x.Name);
        return listBox;
    }

    public Point GetDragVisualOffset(DragVisualProviderState state)
    {
        return state.RelativeStartPoint;
    }
}

<telerik:RadListBox . . . . .>
	<telerik:RadListBox.DragVisualProvider>
		<local:CustomScreenshotDragVisualProvider/>
	</telerik:RadListBox.DragVisualProvider>
. . . . .
</telerik:RadListBox>

I hope this solution will work for you. You can additionally modify the approach so it covers all your scenarios.

Regards,
Dinko
Progress Telerik

answered on 29 Jan 2021, 09:35 AM

bug333f85a6e7194470a957db95ad37224f.jpg

Hi Dinko,
The Code snippet which you sent is to customize the dragging visual during dragging operation. My Requirement is Multiple selection of ListBox Item.
Example:If I have total of 10 Listbox Items(Customer 1,Customer 2,.....Customer 10).I f I Select Customer 3,before Item Customer 2 also must be selected(CUST3 + CUST 2) and dragged and dropped.
For this scenerio Dilyan Traykov provided Code-Snippet in the above thread selection changed event.
private void ListBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var selectedItems = e.AddedItems.OfType<Customer>();
if (selectedItems.Any(c => c.Name == "Customer 3"))
{
var extraItem = this.ListBox1.Items.OfType<Customer>().First(c => c.Name == "Customer 2");
if (!selectedItems.Contains(extraItem))
{
this.ListBox1.SelectedItems.Add(extraItem);
}
}
}
What I tried is When Ever Customer2 ListBoxItem is Selected Customer3 ListBoxItem is also must selected and dragged. I have attached a sample snap(Bug.jpg) for reference. As You can see in the image I Selected Customer2 ListBoxItem, Customer3 ListBoxItem also get selected
but during dragging the the Drag Visual Contains in either order(customer3 + customer 2). I need the same order which I made selection.
The Snipped I Used is
private void ListBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var selectedItems = e.AddedItems.OfType<Customer>();
if (selectedItems.Any(c => c.Name == "Customer 3"))
{ ////if Customer3 ListBoxItem is selected then Customer2 ListBoxItem also must be selected and the Dragging Visual will have in order (CUST3 + CUST 2).
var extraItem = this.ListBox1.Items.OfType<Customer>().First(c => c.Name == "Customer 2");
if (!selectedItems.Contains(extraItem))
{
this.ListBox1.SelectedItems.Add(extraItem);
}
}
if (selectedItems.Any(c => c.Name == "Customer 2"))
{ ///if Customer2 ListBoxItem is selected then Customer3 ListBoxItem also must be selected and the Dragging Visual will have in order (CUST2 + CUST 3).
var extraItem = this.ListBox1.Items.OfType<Customer>().First(c => c.Name == "Customer 3");
if (!selectedItems.Contains(extraItem))
{
this.ListBox1.SelectedItems.Insert(0, extraItem);
}
}
}

Let Me Know were it went wrong and can you able to provide sample-solution for this Issue.

Regards,
Kishore Kumar

answered on 03 Feb 2021, 08:26 AM

CustomListBoxDragDropBehavior-WPF-v2.zip

Hi Kishorekumar,

Thank you for the provided image.

I think I was able to understand what you are trying to achieve here. I have tested the code in your reply and it is working as expected on my side.

Select Cust 2 - > Cust 3 will be selected => Drag Visual will be Cust 2 + Cust 3

Select Cust 3 - > Cust 2 will be selected => Drag Visual will be Cust 3 + Cust 2

You can check the attached project. I will assume that I am missing a set-up from your reply or a step. Can you check it out? In the project, I have removed the custom drag visual.

Regards,
Dinko
Progress Telerik

answered on 04 Feb 2021, 02:02 PM

Hello Kishorekumar,

Thank you for the additional clarifications.

Can you check the following code snippet? You can replace the whole event handler on your side. Now no matter which element is selected, the selected items will ordered Cust 2 -> Cust 3.

private void ListBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var listBoxSelectedItems = (sender as RadListBox).SelectedItems;
    var newSelectedItems = e.AddedItems.OfType<Customer>();
    if (newSelectedItems.Any(c => c.Name == "Customer 3"))
    {  
        var extraItem = this.ListBox1.Items.OfType<Customer>().First(c => c.Name == "Customer 2");
        if (!listBoxSelectedItems.Contains(extraItem) &&  !newSelectedItems.Contains(extraItem))
        {
            this.ListBox1.SelectedItems.Clear();
            this.ListBox1.SelectedItems.Add(extraItem);
            this.ListBox1.SelectedItems.Add(newSelectedItems.ToList()[0]);
        }
    }
    if (newSelectedItems.Any(c => c.Name == "Customer 2"))
    { 
        var extraItem = this.ListBox1.Items.OfType<Customer>().First(c => c.Name == "Customer 3");
        if (!listBoxSelectedItems.Contains(extraItem) && !newSelectedItems.Contains(extraItem))
        {
            this.ListBox1.SelectedItems.Add(extraItem);
        }
    }
}

I hope this will be the solution which you are looking for.

Regards,
Dinko
Progress Telerik

Kishorekumar

commented on 30 Aug 2021, 12:56 PM | edited

Hi Dinko,

The above code snippet works for auto-selection of two items like

when I select customer 2 the drag cue will be customer 2, Customer 3

and same like that when I select customer 3 the drag cue will be like customer 2, customer 3.

Above scenario is working via above snippet.

I Need like Consider I have 5 Items, Barcelona, Oran, Valencia [1], Valencia[2], Valencia[3]

When I Select First Velencia[1], automatically the remaining two Valencia has to be selected and dragged in same order.

eg: Drag Visual Cue Order--->Valencia[1], Valencia[2], Valencia[3].

When I Select Valencia [2]

Drag Visual Cue order must be Valencia[1], Valencia[2], Valencia[3].

and when I select Valencia[3]

Drag Visual Cue order must be Valencia[1], Valencia[2], Valencia[3].

Can you provide solution for the above scenario. If the Valencia are one after another this behavior of selection has to happen.

regards,

Kishore kumar

Dinko | Tech Support Engineer

commented on 02 Sep 2021, 10:03 AM

You could try to modify the approach in the SelectionChanged event handler. You will need to raise a flag to prevent the execution of the code several times.

bool performCustomSelection = false;
private void ListBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var selectedItems = e.AddedItems.OfType<Customer>();
    if (!performCustomSelection && selectedItems.Any(c => c.Name == "Customer 3" || c.Name == "Customer 2" || c.Name == "Customer 4" ))
    {  
        performCustomSelection = true;
        var customer2 = this.ListBox1.Items.OfType<Customer>().First(c => c.Name == "Customer 2");
        var customer3 = this.ListBox1.Items.OfType<Customer>().First(c => c.Name == "Customer 3");
        var customer4 = this.ListBox1.Items.OfType<Customer>().First(c => c.Name == "Customer 4");
        this.ListBox1.SelectedItems.Clear();
        this.ListBox1.SelectedItems.Add(customer2);
        this.ListBox1.SelectedItems.Add(customer3);
        this.ListBox1.SelectedItems.Add(customer4);
        performCustomSelection = false;
	}
}

Kishorekumar

commented on 09 Sep 2021, 08:49 AM

Hi Dinko/ Dilyan Traykov / Telerik Team,
I have few questions to be clarified in some telerik controls.
1)Telerik.Windows.DragDrop.Behaviors.ListBoxDragDropBehavior
I have a ListBox Control for dragging and dropping listbox items. I used a Custom-Behaviors Class that inherits Telerik.Windows.DragDrop.Behaviors.ListBoxDragDropBehavior.
In that I am doing some custom logic modification when the listbox item is dropped.
after base.Drop(State) the items in LISTBOX ItemsSource gets rearranged and based on some cases it has to be revert back to the state when DROP METHOD is fired.
Eg: I have 5-Items A,B,C,D,E I am Dragging E and dropping before B. One The Item is dropped public override void Drop(DragDropState state) Method I want to do some validations and If it wont meet the validation again it has to be rearranged to original position A,B,C,D,E with a warning message.

I tried Shallow Copy the object of state.DestinationItemsSource, state.SourceItemsSource Items before base.Drop(state);
and after tried to form a new DragDropState object and assign the previous state.DestinationItemsSource,state.SourceItemsSource
but was not able to achieve as the state.DestinationItemsSource, state.SourceItemsSource set PROPERTY was in protected modifier.
Can you provide any solution for reverting back to original position after DROP.

public override void Drop(DragDropState state)
{
try
{
////-------Business Logic Modification During Drop
base.Drop(state); /////rearranging Items
////--------Business Logic Modification after Drop If it does not meet the logic revert back to original position
}
}

2)telerik:RadMaskedDateTimeInput:
I have a telerik:RadMaskedDateTimeInput Control which has a default date as 08/09/21. We want to change the date to 31/10/2021.
When the user enters 31 in the date field, the control is taking the month into consideration and changing the date automatically to 30 since there is no 31 in the month of September.
So first I have to change the month field and then date field to get the new proposed date 31/10/2021.
Any Possibility to change the behaviour.

The property I have used is
<telerik:RadMaskedDateTimeInput
Culture="{x:Static globalization:CultureInfo.InvariantCulture}"
DataContext="{Binding Path=UiArrivalObject, Mode=TwoWay}"
FontSize="10"
InputBehavior="Replace"
IsClearButtonVisible="False"
Mask="dd/MM/yy HH:mm"
PreviewKeyDown="RadMaskedDateTimeInput_PreviewKeyDown"
SectionsNavigationMode="Cycle"
SelectionOnFocus="CaretToBeginning"
TextMode="PlainText"
UpdateValueEvent="PropertyChanged"
Value="{Binding Path=LiveDateBerth, Mode=TwoWay, UpdateSourceTrigger=LostFocus, Converter={StaticResource DateTimeOffsetToDateTimeConverter}}">
</telerik:RadMaskedDateTimeInput>

Regards,
Kishore Kumar

Dinko | Tech Support Engineer

commented on 13 Sep 2021, 09:10 AM

Thank you for the provided details.

Your last questions are not related to the main topic in this thread. May I ask you for any other questions related to other controls or questions not related to the case of your first reply, to open a new forum thread? This way we can more easily track the communication.

Regarding your questions.

1. What you can try is to override the CanDrop() method of the ListBoxDragDropBehavior class. You can get the dragged items and where they will be inserted. After performing your validation you can return false or true.

2. This behavior comes from the fact that the UpdateValueEvent property is set to PropertyChanged. This means that the Value will try to validate every keystroke. To change this you can set this property to LostFocus.

answered on 17 Feb 2021, 11:20 AM

Hello Kishorekumar,

In the custom ListBoxDragDropBehavior class, you can override the CoerceDraggedItems method. Inside the method, you can get the currently drag items and their source collection. With this in hand, you can easily get the index of each dragged object.

public override IEnumerable CoerceDraggedItems(DragDropState state)
{
    foreach (var item in state.DraggedItems)
    {
        var index = state.SourceItemsSource.IndexOf(item);
    }
            
    return base.CoerceDraggedItems(state);
}

Regards,
Dinko
Progress Telerik

answered on 25 Mar 2021, 01:12 PM

behaviour.jpg

Hi Dinko,

I have toggle Button when I click the background is like in the attached picture(behaviour.jpg). Any Idea to Change the background on hover and after selection of toggle button.

Can you attach any sample.

Thanks In Advance

answered on 19 Apr 2021, 11:01 AM

mockui-changes.jpg

Hi Dinko,

I have a <Grid> which has two <ItemsControl> in it.
The first <ItemsControl-1> will be vertically placed and second <ItemsControl-2> will be horizontally placed.
Each <ItemsControl> will have same number of counts as child items.
I have attached a snap for reference(MockUI Changes.jpeg) of how it looks like.
Be default the items in <ItemsControl> height is set to AUTO and it has lot of sub-control(telerik) in it and height of the ItemControl.items may vary based on datatrigger set for the viewmodel property.
I want to synchronize Height of ItemsControl1.Item1 with ItemsContol2.Item.(ex:during runtime if the height of ItemControl1.Item1 is 20 then ItemControl2.Item1 must also be same).
Any Idea or suggestion or samples to implement this behavior.

Thanks and Regards,
Kishore

answered on 22 Apr 2021, 10:26 AM

Hello Kishorekumar,

Thank you for the provided image.

Does the height of the items inside the ItemsControls is equal? If the ItemsControl2.Items have equal Height, you can synchronize them using property in your ViewModel. You could create a Style and bind the height property to the custom one in the ViewModel. It depends on the size of the items inside both ItemsControls. Could it be possible to create a sample project which mimics your case with dummy data and send it back to me. This way I could have a better look and for a suitable solution.

Regards,
Dinko
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.

Kishorekumar

commented on 05 Aug 2021, 10:09 AM

Hi Dinko,

Can you provide sample solution for synchronize height ,width using property in viewmodel for itemControl.

Regards,

Kishorekumar

Dinko | Tech Support Engineer

commented on 10 Aug 2021, 07:20 AM

ItemsControl-Sync.zip

I have prepared a project to demonstrate what I have in mind. The project is a very sample solution. You can check it out and extend the approach to fit in your application.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

DragVisual

37 Answers, 1 is accepted