I have 4 columns: "Not Started", "In Progress", "Completed", and "Notes". You will notice there is big gap at the end in the picture(the right side).
If I were to drag an item into that left over gap, the Task vanishes from the Board. I have verified that the Task does still exist. Also the Task's "State" remains in the last State is was in.
One solution you might suggest is to make the columns bigger, well I need to be able to show blank space in order to allow more columns to be created by the user. Showing the empty space helps the user.
I've also tried seeing if I cancel the "CanDrop" behaviour, but it does not trigger due to it thinking its still in the existing State. Here is a log of what happens when I move the Task from "Notes" to empty space.
CanDrop: TargetedColumn:Notes
IsMovingItems: TargetedColumn:Notes
CanDrop: TargetedColumn:Notes
IsMovingItems: TargetedColumn:Notes
CanDrop: TargetedColumn:Notes
IsMovingItems: TargetedColumn:Notes
CanDrop: TargetedColumn:Notes
IsMovingItems: TargetedColumn:Notes
CanDrop: TargetedColumn:Notes
IsMovingItems: TargetedColumn:Notes
CanDrop: TargetedColumn:Notes
IsMovingItems: TargetedColumn:Notes
DragDropCompleted: TargetedColumn:
IsMovingItems: TargetedColumn:
Here is the DropBehaviourClass
public
class
TaskDragBehavior : TaskBoardColumnDragDropBehavior
{
public
TaskDragBehavior()
:
base
()
{
}
public
override
bool
CanDrop(DragDropState state)
{
var dds = state
as
TaskBoardColumnDragDropState;
Debug.Print($
"CanDrop: TargetedColumn:{dds?.TargetColumn?.GroupName}"
);
return
base
.CanDrop(state);
}
public
override
bool
CanStartDrag(DragDropState state)
{
return
base
.CanStartDrag(state);
}
protected
override
IEnumerable<
object
> CopyDraggedItems(DragDropState state)
{
var dds = state
as
TaskBoardColumnDragDropState;
Debug.Print($
"CopyDraggedItems: TargetedColumn:{dds?.TargetColumn?.GroupName}"
);
return
base
.CopyDraggedItems(state);
}
public
override
void
DragDropCanceled(DragDropState state)
{
var dds = state
as
TaskBoardColumnDragDropState;
base
.DragDropCanceled(state);
}
public
override
void
DragDropCompleted(DragDropState state)
{
var dds = state
as
TaskBoardColumnDragDropState;
Debug.Print($
"DragDropCompleted: TargetedColumn:{dds?.TargetColumn?.GroupName}"
);
base
.DragDropCompleted(state);
}
public
override
void
Drop(DragDropState state)
{
var dds = state
as
TaskBoardColumnDragDropState;
Debug.Print($
"Drop: TargetedColumn:{dds?.TargetColumn?.GroupName}"
);
base
.Drop(state);
}
protected
override
bool
IsMovingItems(DragDropState state)
{
var dds = state
as
TaskBoardColumnDragDropState;
Debug.Print($
"IsMovingItems: TargetedColumn:{dds?.TargetColumn?.GroupName}"
);
return
base
.IsMovingItems(state);
}
}
And if you really want the WPF for reference, here it is as well.
001.
<
Grid
>
002.
<
Grid
Name
=
"IsVisibleSearch"
>
003.
<
Grid.RowDefinitions
>
004.
<
RowDefinition
Height
=
"Auto"
/>
005.
<
RowDefinition
Height
=
"*"
/>
006.
</
Grid.RowDefinitions
>
007.
<!--Main ToolBar-->
008.
<
telerik:RadToolBarTray
Name
=
"MainToolTray"
Grid.Row
=
"0"
>
009.
<
telerik:RadToolBar
OverflowButtonVisibility
=
"Collapsed"
>
010.
<
telerik:RadButton
cal:Message.Attach
=
"LaunchNew"
011.
ToolTip
=
"New Tag Item"
>
012.
<
Image
Source
=
"../../Icons/plus_24_24.png"
Width
=
"24"
/>
013.
</
telerik:RadButton
>
014.
<
telerik:RadButton
cal:Message.Attach
=
"LaunchEdit"
015.
ToolTip
=
"Edit Tag Item"
>
016.
<
Image
Source
=
"../../Icons/edit_24_24.png"
Width
=
"24"
/>
017.
</
telerik:RadButton
>
018.
</
telerik:RadToolBar
>
019.
</
telerik:RadToolBarTray
>
020.
021.
<!--Tab Controller-->
022.
<
telerik:RadTabControl
Grid.Row
=
"1"
>
023.
024.
<!--Board Tab-->
025.
<
telerik:RadTabItem
Header
=
"Board"
>
026.
<
telerik:RadTaskBoard
x:Name
=
"taskBoard"
ItemHeight
=
"180"
027.
ItemsSource
=
"{Binding PlannerTasks}"
028.
GroupMemberPath
=
"SalesOrderState"
Grid.Row
=
"1"
029.
AutoGenerateColumns
=
"False"
ColumnOffset
=
"20"
030.
ColumnWidth
=
"400"
>
031.
<
telerik:RadTaskBoard.DragDropBehavior
>
032.
<
local1:TaskDragBehavior
/>
033.
</
telerik:RadTaskBoard.DragDropBehavior
>
034.
<
telerik:RadTaskBoard.ItemTemplate
>
035.
<
DataTemplate
>
036.
<
Grid
>
037.
<
Grid.ColumnDefinitions
>
038.
<
ColumnDefinition
Width
=
"Auto"
/>
039.
<
ColumnDefinition
Width
=
"*"
/>
040.
<
ColumnDefinition
Width
=
"*"
/>
041.
<
ColumnDefinition
Width
=
"*"
/>
042.
<
ColumnDefinition
Width
=
"*"
/>
043.
<
ColumnDefinition
Width
=
"Auto"
/>
044.
</
Grid.ColumnDefinitions
>
045.
<
Grid.RowDefinitions
>
046.
<
RowDefinition
Height
=
"Auto"
/>
047.
<
RowDefinition
Height
=
"*"
/>
048.
<
RowDefinition
Height
=
"*"
/>
049.
<
RowDefinition
Height
=
"*"
/>
050.
<
RowDefinition
Height
=
"*"
/>
051.
<
RowDefinition
Height
=
"*"
/>
052.
<
RowDefinition
Height
=
"*"
/>
053.
<
RowDefinition
Height
=
"*"
/>
054.
</
Grid.RowDefinitions
>
055.
056.
<!--Category-->
057.
<
Border
Margin
=
"0 0"
Grid.Column
=
"0"
Grid.Row
=
"0"
058.
Grid.RowSpan
=
"8"
Padding
=
"3"
Background
=
"Orange"
CornerRadius
=
"2"
/>
059.
060.
<!--Due Date-->
061.
<
TextBlock
Grid.Column
=
"2"
Grid.ColumnSpan
=
"3"
Grid.Row
=
"0"
062.
Margin
=
"5"
FontSize
=
"12"
FontWeight
=
"DemiBold"
063.
HorizontalAlignment
=
"Right"
>
064.
<
Run
>Due: </
Run
>
065.
<
Run
Text
=
"{Binding DueDate}"
/>
066.
</
TextBlock
>
067.
068.
<!--Title-->
069.
<
TextBlock
Grid.Column
=
"1"
Grid.ColumnSpan
=
"3"
Grid.Row
=
"1"
070.
Grid.RowSpan
=
"2"
071.
Margin
=
"5"
FontSize
=
"16"
FontWeight
=
"Bold"
072.
TextWrapping
=
"Wrap"
073.
Text
=
"{Binding Title}"
/>
074.
075.
076.
<!--Tags-->
077.
<
ListBox
ItemsSource
=
"{Binding Path=Tags3}"
078.
ScrollViewer.HorizontalScrollBarVisibility
=
"Disabled"
079.
ScrollViewer.VerticalScrollBarVisibility
=
"Disabled"
080.
Grid.Column
=
"1"
Grid.ColumnSpan
=
"3"
081.
Background
=
"Transparent"
BorderBrush
=
"Transparent"
082.
Grid.Row
=
"4"
Grid.RowSpan
=
"3"
>
083.
<
ListBox.ItemsPanel
>
084.
<
ItemsPanelTemplate
>
085.
<
WrapPanel
Orientation
=
"Horizontal"
086.
IsItemsHost
=
"True"
IsEnabled
=
"False"
/>
087.
</
ItemsPanelTemplate
>
088.
</
ListBox.ItemsPanel
>
089.
<
ListBox.ItemTemplate
>
090.
<
DataTemplate
>
091.
<
Border
Padding
=
"4"
Background
=
"{Binding Color}"
092.
CornerRadius
=
"10"
>
093.
<
TextBlock
FontSize
=
"12"
094.
Text
=
"{Binding TagName}"
095.
Foreground
=
"Black"
FontWeight
=
"Bold"
/>
096.
</
Border
>
097.
</
DataTemplate
>
098.
</
ListBox.ItemTemplate
>
099.
</
ListBox
>
100.
101.
102.
<!--Profile Pic-->
103.
<
Ellipse
Height
=
"40"
Width
=
"40"
Grid.Column
=
"4"
104.
Grid.ColumnSpan
=
"2"
Grid.Row
=
"1"
Grid.RowSpan
=
"4"
105.
Stroke
=
"Black"
>
106.
<
Ellipse.Fill
>
107.
<
ImageBrush
ImageSource
=
"../../Icons/DRP_icon.png"
108.
Stretch
=
"UniformToFill"
/>
109.
</
Ellipse.Fill
>
110.
</
Ellipse
>
111.
112.
<!--Dependents and Est Hours-->
113.
<
TextBlock
Grid.Column
=
"2"
Grid.ColumnSpan
=
"4"
Grid.Row
=
"7"
114.
Margin
=
"0 0 5 5"
115.
FontSize
=
"12"
HorizontalAlignment
=
"Right"
116.
VerticalAlignment
=
"Bottom"
>
117.
<
Run
TextDecorations
=
"Underline"
>Dependents: </
Run
>
118.
<
Run
FontWeight
=
"Bold"
>10</
Run
>
119.
<
Run
Text
=
" "
/>
120.
<
Run
TextDecorations
=
"Underline"
>Est Hours: </
Run
>
121.
<
Run
FontWeight
=
"Bold"
Text
=
"{Binding EstimatedHours}"
/>
122.
</
TextBlock
>
123.
</
Grid
>
124.
</
DataTemplate
>
125.
</
telerik:RadTaskBoard.ItemTemplate
>
126.
</
telerik:RadTaskBoard
>
127.
</
telerik:RadTabItem
>
128.
129.
<!--Grid Tab-->
130.
<
telerik:RadTabItem
Header
=
"Grid"
>
131.
<
StackPanel
Orientation
=
"Vertical"
>
132.
<!--GRID LAYOUT BUTTONS-->
133.
<
telerik:RadToolBarTray
Name
=
"GridToolTray"
>
134.
<
telerik:RadToolBar
OverflowButtonVisibility
=
"Collapsed"
>
135.
<
telerik:RadDropDownButton
Name
=
"Grid_ExportTo"
136.
ToolTip
=
"Export Grid To"
>
137.
<
telerik:RadDropDownButton.Content
>
138.
<
Image
Source
=
"../../Icons/export_24_24.png"
Width
=
"24"
/>
139.
</
telerik:RadDropDownButton.Content
>
140.
<
telerik:RadDropDownButton.DropDownContent
>
141.
<
telerik:RadContextMenu
>
142.
<
telerik:RadMenuItem
Name
=
"ExportGridToExcel"
143.
Header
=
"Excel"
/>
144.
<
telerik:RadMenuItem
Name
=
"ExportGridToPDF"
Header
=
"PDF"
/>
145.
</
telerik:RadContextMenu
>
146.
</
telerik:RadDropDownButton.DropDownContent
>
147.
</
telerik:RadDropDownButton
>
148.
</
telerik:RadToolBar
>
149.
<
telerik:RadToolBar
>
150.
<
TextBlock
>Grid Layout:</
TextBlock
>
151.
<
telerik:RadComboBox
Name
=
"GridLayoutList"
152.
ItemsSource
=
"{Binding GridLayouts}"
153.
SelectedItem
=
"{Binding Path=SelectedGridLayout, Mode=TwoWay}"
154.
Width
=
"150"
/>
155.
<
telerik:RadButton
cal:Message.Attach
=
"LoadSelectedGridLayout"
156.
ToolTip
=
"Load Grid Layout"
>
157.
<
Image
Source
=
"../../Icons/import_24_24.png"
Width
=
"24"
/>
158.
</
telerik:RadButton
>
159.
<
telerik:RadButton
cal:Message.Attach
=
"SaveSelectedGridLayout"
160.
ToolTip
=
"Save Grid Layout"
>
161.
<
Image
Source
=
"../../Icons/save_24_24.png"
Width
=
"24"
/>
162.
</
telerik:RadButton
>
163.
<
telerik:RadButton
cal:Message.Attach
=
"SetSelectedGridLayoutAsFavorite"
164.
ToolTip
=
"Save Grid Layout As Favorite"
>
165.
<
Image
Source
=
"../../Icons/star_24_24.png"
Width
=
"24"
/>
166.
</
telerik:RadButton
>
167.
<
telerik:RadButton
cal:Message.Attach
=
"NewGridLayout"
168.
ToolTip
=
"New Grid Layout"
>
169.
<
Image
Source
=
"../../Icons/plusV2_24_24.png"
Width
=
"24"
/>
170.
</
telerik:RadButton
>
171.
<
telerik:RadButton
cal:Message.Attach
=
"DeleteGridLayout"
172.
ToolTip
=
"Delete Grid Layout"
>
173.
<
Image
Source
=
"../../Icons/deleteV2_24_24.png"
Width
=
"24"
/>
174.
</
telerik:RadButton
>
175.
</
telerik:RadToolBar
>
176.
</
telerik:RadToolBarTray
>
177.
178.
<!--GRID-->
179.
<
telerik:RadGridView
IsBusy
=
"{Binding IsBusy}"
Name
=
"GridResults"
180.
IsReadOnly
=
"True"
CanUserSearch
=
"True"
181.
ShowSearchPanel
=
"True"
182.
SearchPanelCloseButtonVisibility
=
"Collapsed"
183.
AutoGenerateColumns
=
"False"
184.
ItemsSource
=
"{Binding Path=PlannerTasks, Mode=TwoWay}"
185.
SelectedItem
=
"{Binding Path=SelectedPlannerTask, Mode=TwoWay}"
>
186.
<
telerik:RadGridView.Columns
>
187.
<
telerik:GridViewDataColumn
Header
=
"ID"
188.
DataMemberBinding
=
"{Binding PlannerTask_ID}"
189.
Width
=
"Auto"
IsVisible
=
"False"
/>
190.
<
telerik:GridViewDataColumn
Header
=
"Title"
191.
DataMemberBinding
=
"{Binding Title}"
192.
Width
=
"Auto"
/>
193.
<
telerik:GridViewDataColumn
Header
=
"State"
194.
DataMemberBinding
=
"{Binding SalesOrderState}"
195.
Width
=
"Auto"
/>
196.
<
telerik:GridViewDataColumn
Header
=
"Category"
197.
DataMemberBinding
=
"{Binding Category}"
198.
Width
=
"Auto"
/>
199.
<
telerik:GridViewDataColumn
Header
=
"IsArchived"
200.
DataMemberBinding
=
"{Binding SalesOrderIsArchived}"
201.
Width
=
"Auto"
IsVisible
=
"False"
/>
202.
<
telerik:GridViewDataColumn
Header
=
"Position"
203.
DataMemberBinding
=
"{Binding SalesOrderPosition}"
204.
Width
=
"Auto"
IsVisible
=
"False"
/>
205.
<
telerik:GridViewDataColumn
Header
=
"Priority"
206.
DataMemberBinding
=
"{Binding PriorityLevel}"
207.
Width
=
"Auto"
/>
208.
<
telerik:GridViewDataColumn
Header
=
"Tags"
209.
DataMemberBinding
=
"{Binding Tags}"
210.
Width
=
"Auto"
/>
211.
<
telerik:GridViewDataColumn
Header
=
"EstimatedHours"
212.
DataMemberBinding
=
"{Binding EstimatedHours}"
213.
Width
=
"Auto"
/>
214.
<
telerik:GridViewDataColumn
Header
=
"StartDate"
215.
DataMemberBinding
=
"{Binding StartDate}"
216.
Width
=
"Auto"
/>
217.
<
telerik:GridViewDataColumn
Header
=
"DueDate"
218.
DataMemberBinding
=
"{Binding DueDate}"
219.
Width
=
"Auto"
/>
220.
<
telerik:GridViewDataColumn
Header
=
"CompletedDate"
221.
DataMemberBinding
=
"{Binding CompletedDate}"
222.
Width
=
"Auto"
/>
223.
<
telerik:GridViewDataColumn
Header
=
"ArchivedDate"
224.
DataMemberBinding
=
"{Binding ArchivedDate}"
225.
Width
=
"Auto"
IsVisible
=
"False"
/>
226.
<
telerik:GridViewDataColumn
Header
=
"Last Modified By"
227.
DataMemberBinding
=
"{Binding ModifiedBy_Username}"
228.
Width
=
"Auto"
/>
229.
<
telerik:GridViewDataColumn
Header
=
"Created By"
230.
DataMemberBinding
=
"{Binding CreatedBy_Username}"
231.
Width
=
"Auto"
IsVisible
=
"False"
/>
232.
<
telerik:GridViewDataColumn
Header
=
"Archived By"
233.
DataMemberBinding
=
"{Binding ArchiveBy_Username}"
234.
Width
=
"Auto"
IsVisible
=
"False"
/>
235.
<
telerik:GridViewDataColumn
Header
=
"Sales Order ID"
236.
DataMemberBinding
=
"{Binding SalesOrder_ID}"
237.
Width
=
"Auto"
IsVisible
=
"False"
/>
238.
</
telerik:RadGridView.Columns
>
239.
<
telerik:RadGridView.ControlPanelItems
>
240.
<
telerik:ControlPanelItem
ButtonTooltip
=
"Column chooser"
>
241.
<
telerik:ControlPanelItem.Content
>
242.
<
ListBox
ItemsSource
=
"{Binding Columns}"
BorderThickness
=
"0"
>
243.
<
ListBox.ItemTemplate
>
244.
<
DataTemplate
>
245.
<
CheckBox
Content
=
"{Binding Header, Mode=OneWay}"
246.
IsChecked
=
"{Binding IsVisible, Mode=TwoWay}"
/>
247.
</
DataTemplate
>
248.
</
ListBox.ItemTemplate
>
249.
</
ListBox
>
250.
</
telerik:ControlPanelItem.Content
>
251.
</
telerik:ControlPanelItem
>
252.
</
telerik:RadGridView.ControlPanelItems
>
253.
</
telerik:RadGridView
>
254.
</
StackPanel
>
255.
</
telerik:RadTabItem
>
256.
</
telerik:RadTabControl
>
257.
</
Grid
>
258.
<
ContentControl
Name
=
"ActiveItem"
>
259.
<
ContentControl.Style
>
260.
<
Style
TargetType
=
"{x:Type ContentControl}"
>
261.
<
Style.Triggers
>
262.
<
DataTrigger
Binding
=
"{Binding Path=IsVisibleScreen, Mode=TwoWay}"
263.
Value
=
"False"
>
264.
<
Setter
Property
=
"Visibility"
265.
Value
=
"Hidden"
/>
266.
</
DataTrigger
>
267.
<
DataTrigger
Binding
=
"{Binding Path=IsVisibleScreen, Mode=TwoWay}"
268.
Value
=
"True"
>
269.
<
Setter
Property
=
"Visibility"
270.
Value
=
"Visible"
/>
271.
</
DataTrigger
>
272.
</
Style.Triggers
>
273.
</
Style
>
274.
</
ContentControl.Style
>
275.
</
ContentControl
>
276.
</
Grid
>