Tom Allard
Top achievements
Rank 1
Tom Allard
asked on 22 Oct 2012, 01:49 PM
Hi,
I'm trying to create a grid that a user can use to reorder pictures.
To do that i've setup a RadListBox as follows:
With this i can reorder items in the listbox using drag n drop. However the dropvisual is not working as i would expect since it simply draws a horizontal line from left to right.
I tried creating a custom DropVisualProvider subclassing LinearDropVisualProvider and registering it with the listbox
rlb.DropVisualProvider = new MyDropVisualProvider();
However none of the methods i override from LinearDropVisual are being called. I'm not sure what i am doing wrong at this point. What is the recommended way of specifying a custom IDropVisulaProvider?
I'm trying to create a grid that a user can use to reorder pictures.
To do that i've setup a RadListBox as follows:
<
telerik:RadListBox
Name
=
"rlb"
ItemsSource
=
"{Binding Items}"
SelectedItem
=
"{Binding SelectedItem,Mode=TwoWay}"
ScrollViewer.HorizontalScrollBarVisibility
=
"Disabled"
>
<
telerik:RadListBox.DragVisualProvider
>
<
telerik:ScreenshotDragVisualProvider
/>
</
telerik:RadListBox.DragVisualProvider
>
<
telerik:RadListBox.DragDropBehavior
>
<
telerik:ListBoxDragDropBehavior
AllowReorder
=
"True"
/>
</
telerik:RadListBox.DragDropBehavior
>
<
telerik:RadListBox.ItemsPanel
>
<
ItemsPanelTemplate
>
<
telerik:RadWrapPanel
Orientation
=
"Horizontal"
/>
</
ItemsPanelTemplate
>
</
telerik:RadListBox.ItemsPanel
>
<
telerik:RadListBox.ItemTemplate
>
<
DataTemplate
>
<
Border
BorderThickness
=
"2"
BorderBrush
=
"Red"
>
<
Grid
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"Auto"
/>
</
Grid.RowDefinitions
>
<
TextBlock
Text
=
"{Binding Id}"
Grid.Row
=
"0"
/>
<
TextBlock
Text
=
"{Binding Value}"
Grid.Row
=
"1"
/>
</
Grid
>
</
Border
>
</
DataTemplate
>
</
telerik:RadListBox.ItemTemplate
>
</
telerik:RadListBox
>
With this i can reorder items in the listbox using drag n drop. However the dropvisual is not working as i would expect since it simply draws a horizontal line from left to right.
I tried creating a custom DropVisualProvider subclassing LinearDropVisualProvider and registering it with the listbox
rlb.DropVisualProvider = new MyDropVisualProvider();
However none of the methods i override from LinearDropVisual are being called. I'm not sure what i am doing wrong at this point. What is the recommended way of specifying a custom IDropVisulaProvider?
13 Answers, 1 is accepted
0
Accepted
Hello Tom,
All you have to do now is to set the CustomLinearDropVisualProvider for DropVisualProvider:
and create a custom style for the LinearDropVisual. The default template is with stretch Vertical/Horizontal alignments and it doesn't look nice on wrap panel.
Please, refer to the attached project for more information and let me know if this helps.
Regards,
George
the Telerik team
I would suggest setting a custom DropVisualProvider for the RadListBox control and change the coordinates where the drop visual will be placed. For example, create a CustomLinearDropVisualProvider that inherits the LinearDropVisualProvider and override the GetLocation method:
public
class
CustomLinearDropVisualProvider : LinearDropVisualProvider
{
public
override
Point GetLocation(Telerik.Windows.Controls.RadListBoxItem container, Panel panel)
{
return
container.TransformToVisual(panel).Transform(
new
Point());
}
}
All you have to do now is to set the CustomLinearDropVisualProvider for DropVisualProvider:
<
telerik:RadListBox
....>
.....
<
telerik:RadListBox.DropVisualProvider
>
<
local:CustomLinearDropVisualProvider
/>
</
telerik:RadListBox.DropVisualProvider
>
...
</
telerik:RadListBox
>
and create a custom style for the LinearDropVisual. The default template is with stretch Vertical/Horizontal alignments and it doesn't look nice on wrap panel.
Please, refer to the attached project for more information and let me know if this helps.
Regards,
George
the Telerik team
Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.
0
Tom Allard
Top achievements
Rank 1
answered on 25 Oct 2012, 10:32 AM
Thanks! That is exactly what i needed!
0
Richard
Top achievements
Rank 1
answered on 26 Feb 2013, 06:35 PM
I have tried the approach you suggested of creating a custom LinearDropVisualProvider. The problem I am having is that this is not
providing a good drop visual for all cases of drop location. The problem is easier to see in the example project if you set the orientation
of the wrap panel to vertical and give both the wrap panel and the listbox a specific height, for example 300.
providing a good drop visual for all cases of drop location. The problem is easier to see in the example project if you set the orientation
of the wrap panel to vertical and give both the wrap panel and the listbox a specific height, for example 300.
<
telerik:RadListBox
ItemsSource
=
"{Binding DataList}"
BorderBrush
=
"Black"
BorderThickness
=
"1"
Margin
=
"10"
SelectedItem
=
"{Binding SelectedItem,Mode=TwoWay}"
ScrollViewer.HorizontalScrollBarVisibility=
"Disabled"
Height=
"300"
>
...
<
telerik:RadListBox.ItemsPanel
>
<
ItemsPanelTemplate
>
<
telerik:RadWrapPanel
Orientation
=
"Vertical"
Height
=
"300"
/>
</
ItemsPanelTemplate
>
</
telerik:RadListBox.ItemsPanel
>
...
</
telerik:RadListBox
>
If the drop location is over a listbox item, the drop visual is drawn in an appropriate location. For the case where the
drop location is simply inside of the listbox but not over an item, the drop visual is placed at the appropriate location
in terms of the Y-coordinate, but gives it an X-coordinate of 0. This places the drop visual in an awkward location in
the first column of listbox items. And the CustomLinearDropVisualProvider.GetLocation() method does not get hit in
this case.
After having looked through examples online (and through the code itself), I haven't seen seen a good way to solve this
problem. What do you suggest for handling this case?
0
Hi Richard,
We are not sure we understand you correctly.
Do you mean that the custom cue is not displayed when you drag and item out of the scope of the other Items in the ListBox? By default when an Item is drag out of the scope of the other items the drop cue is not displayed and if the item is drop it is placed as a last item in the control.
It would be very helpful if you could share with us some screenshots or a short video showing the exact scenario and desired behavior.
All the best,
Vladi
the Telerik team
We are not sure we understand you correctly.
Do you mean that the custom cue is not displayed when you drag and item out of the scope of the other Items in the ListBox? By default when an Item is drag out of the scope of the other items the drop cue is not displayed and if the item is drop it is placed as a last item in the control.
It would be very helpful if you could share with us some screenshots or a short video showing the exact scenario and desired behavior.
All the best,
Vladi
the Telerik team
Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.
0
Richard
Top achievements
Rank 1
answered on 04 Mar 2013, 03:55 PM
The custom cue (drop visual) may not be displayed by default, but in the example project previously given in this thread by George, a drop visual is displayed for all drop locations inside of the ListBox. And this is the desired behavior in our case -- to show a drop visual anytime the drop is going to be allowed.
As you can see in the attached screenshots,
1. CorrectDropVisual - shows the good behavior when inside the scope of another ListBoxItem.
2. IncorrectDropVisualForDropAtEndOfList - shows what happens in the example project (with the minor orientation and height changes described in my previous post) when you are inside of the ListBox but outside of an ListBoxItem's scope. The Y-coordinate calculated is OK, but the X-coordinate for the drop visual is simply set to 0.
3. DesiredDropVisualForDropAtEndOfList - shows the previous shot with the DropVisual in roughly the desired location at the end of the list.
As you can see in the attached screenshots,
1. CorrectDropVisual - shows the good behavior when inside the scope of another ListBoxItem.
2. IncorrectDropVisualForDropAtEndOfList - shows what happens in the example project (with the minor orientation and height changes described in my previous post) when you are inside of the ListBox but outside of an ListBoxItem's scope. The Y-coordinate calculated is OK, but the X-coordinate for the drop visual is simply set to 0.
3. DesiredDropVisualForDropAtEndOfList - shows the previous shot with the DropVisual in roughly the desired location at the end of the list.
0
Hi Richard,
Thank you for posting the additional information. We were able to reproduce the issue on our side and it seems that this is a bug in the control.
We logged the issue in our Public Issue Tracker System where you can track its status.
I updated your Telerik points for bringing this to our attention.
Regards,
Vladi
the Telerik team
Thank you for posting the additional information. We were able to reproduce the issue on our side and it seems that this is a bug in the control.
We logged the issue in our Public Issue Tracker System where you can track its status.
I updated your Telerik points for bringing this to our attention.
Regards,
Vladi
the Telerik team
Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.
0
Richard
Top achievements
Rank 1
answered on 05 Mar 2013, 03:34 PM
Thank you for your help.
I wanted to clarify that I added on to this thread because it was almost exactly the question I needed to ask, but I am using WPF, not Silverlight. Will the issue you logged serve to fix the bug for your WPF product as well?
I wanted to clarify that I added on to this thread because it was almost exactly the question I needed to ask, but I am using WPF, not Silverlight. Will the issue you logged serve to fix the bug for your WPF product as well?
0
Hello Richard,
Yes the issue is logged for both Silverlight and WPF platforms.
It seems that the PITS issue was not updated correctly and we will update it to list both platforms.
Kind regards,
Vladi
the Telerik team
Yes the issue is logged for both Silverlight and WPF platforms.
It seems that the PITS issue was not updated correctly and we will update it to list both platforms.
Kind regards,
Vladi
the Telerik team
Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.
0
Alexander
Top achievements
Rank 1
answered on 19 Nov 2018, 09:26 AM
Hello. What about the issue, described by Richard? In WPF it is still reproduced.
0
Hello Alexander,
I've tested the reported scenario but I couldn't reproduce the issue. Can you please check the attached project and let me know if I am missing something?
Regards,
Martin Ivanov
Progress Telerik
I've tested the reported scenario but I couldn't reproduce the issue. Can you please check the attached project and let me know if I am missing something?
Regards,
Martin Ivanov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0
0
Hi Alexander,
Thank you for the provided information. I was able to reproduce the reported behavior using the SDK example. It seems that the default LinearDropVisualProvider is not very suitable when the wrap panel is used. You can partially achieve the Richard's requirement by overriding the GetLocation() method of the LinearDropVisualProvider, but this will work only if you drag/drop on an item. When you drag outside of the area where the items are drawn some internal logic of the provider kicks-in and the GetLocation() method is never called. To make the drop visual working also in the case where the mouse is not under an item you can dig up the ContentPresenter that holds the visual and manually position it. I've updated the SDK example to show this approach. Can you please check it out and let me know how it goes?
Regards,
Martin Ivanov
Progress Telerik
Thank you for the provided information. I was able to reproduce the reported behavior using the SDK example. It seems that the default LinearDropVisualProvider is not very suitable when the wrap panel is used. You can partially achieve the Richard's requirement by overriding the GetLocation() method of the LinearDropVisualProvider, but this will work only if you drag/drop on an item. When you drag outside of the area where the items are drawn some internal logic of the provider kicks-in and the GetLocation() method is never called. To make the drop visual working also in the case where the mouse is not under an item you can dig up the ContentPresenter that holds the visual and manually position it. I've updated the SDK example to show this approach. Can you please check it out and let me know how it goes?
Regards,
Martin Ivanov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0
Alexander
Top achievements
Rank 1
answered on 30 Nov 2018, 09:09 AM
Thank you. This is what I need.