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

Dragging Task Outside Of Columns

4 Answers 118 Views
TaskBoard
This is a migrated thread and some comments may be shown as answers.
Derek
Top achievements
Rank 1
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).

Full Board

 

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

AfterDrop

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.            <!--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>

4 Answers, 1 is accepted

Sort by
0
Dinko | Tech Support Engineer
Telerik team
answered on 24 Jun 2020, 11:42 AM

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
Derek
Top achievements
Rank 1
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 >
                                <!--Tab Controller-->
                                <telerik:RadTabControl Grid.Row="1">
 
                                    <!--Board Tab-->
                                    <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
Dinko | Tech Support Engineer
Telerik team
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
Derek
Top achievements
Rank 1
answered on 01 Jul 2020, 04:05 PM
That did the trick. Thanks!
Tags
TaskBoard
Asked by
Derek
Top achievements
Rank 1
Answers by
Dinko | Tech Support Engineer
Telerik team
Derek
Top achievements
Rank 1
Share this question
or