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

Dragging Task Outside Of Columns

4 Answers 198 Views

TaskBoard

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

Derek asked on 19 Jun 2020, 09:41 PM

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.

TaskDropInEmpty

ProofTaskStillExist

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. 

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. 

022. <telerik:RadTabControl Grid.Row="1">

023.

024. 

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. 

057. <Border Margin="0 0" Grid.Column="0" Grid.Row="0"

058. Grid.RowSpan="8" Padding="3" Background="Orange" CornerRadius="2"/>

059.

060. 

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. 

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. 

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. 

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. 

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. 

130. <telerik:RadTabItem Header="Grid">

131. <StackPanel Orientation="Vertical">

132. 

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. 

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>

4 Answers, 1 is accepted

0

answered on 24 Jun 2020, 11:42 AM

TaskBoard-DragDrop.zip

Hi Derek,

Thank you for the provided details.

I have tried to reproduce this behavior on my side but to no avail. You can find the project which I used to test your scenario. May I ask you to take a look and let me know what I am missing from your set-up to reproduce this behavior.

I am looking forward to your reply.

Regards,
Dinko
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

0

answered on 26 Jun 2020, 11:39 PM

Hi Dinko,

Thanks for your reply. I took your project, turned it into .Net Core instead of framework. It worked like you described. I noticed I left out that this User Control is wrapped in a Rad Pane which is is a Rad Dock. Not sure if its the Rad Pane or Docking that is causing the problem. Since I can't attached a project, here is the the updated xaml using your project config(should just need to copy and replace into your "TaskBoard_UserControl". I cleaned it up to make it easier for you.

<Grid>

<telerik:RadDocking>

<telerik:RadDocking.DocumentHost>

<telerik:RadSplitContainer>

<telerik:RadPaneGroup>

<telerik:RadPane Header="TaskBoard">

<Grid Name = "IsVisibleSearch" >

<Grid.RowDefinitions >

<RowDefinition Height="Auto" />

<RowDefinition Height = "*" />

</Grid.RowDefinitions >

<telerik:RadTabControl Grid.Row="1">

<telerik:RadTabItem Header = "Board" >

<telerik:RadTaskBoard x:Name= "taskBoard" ItemHeight= "180"

ItemsSource= "{Binding Data}" Categories="{Binding Categories}"

GroupMemberPath="State" Grid.Row= "1"

ColumnOffset= "20"

ColumnWidth= "400" IsDragDropEnabled="True" >

<telerik:RadTaskBoard.DragDropBehavior>

<local:TaskDragBehavior/>

</telerik:RadTaskBoard.DragDropBehavior>

<telerik:RadTaskBoard.ItemTemplate>

<DataTemplate>

<telerik:RadTaskBoardCard Assignee="{Binding Assignee}"

CategoryName="{Binding CategoryName}"

ShowCategoryIndicator="True"

Content="{Binding Description}"

Header="{Binding Title}"

Icon="{Binding IconPath}"

Tags="{Binding Tags}" >

<telerik:RadTaskBoardCard.TagTemplate>

<DataTemplate>

<Border Background="{Binding TagColor}"

BorderThickness="1"

Margin="0 0 5 2">

<TextBlock Text="{Binding TagName}" Padding="4 2" Foreground="White"/>

</Border>

</DataTemplate>

</telerik:RadTaskBoardCard.TagTemplate>

</telerik:RadTaskBoardCard>

</DataTemplate>

</telerik:RadTaskBoard.ItemTemplate>

</telerik:RadTaskBoard>

</telerik:RadTabItem>

</telerik:RadTabControl>

</Grid>

</telerik:RadPane>

</telerik:RadPaneGroup>

</telerik:RadSplitContainer>

</telerik:RadDocking.DocumentHost>

</telerik:RadDocking>

</Grid >

0

answered on 01 Jul 2020, 06:19 AM

Hi Derek,

Thank you for the provided code snippet.

Indeed this behavior comes from the fact that the RadTabControl has placed inside RadDocking-> RadPane element. The RadPane element has its drag-drop logic, which it seems to be triggered when you drop the element inside RadTabItem. The drag-drop events bubble to the RadDocking. You can easily work around this by setting the AllowDrop property of the RadTabItem to false.

<telerik:RadTabItem Header = "Board" AllowDrop="False" >
                                        
    <telerik:RadTaskBoard . . . .  . . .
                                        
</telerik:RadTabItem>

Give this approach a try and let me know how it goes.

Regards,
Dinko
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

0

Tags

TaskBoard

Asked by

Answers by