SfKanban Card Tag not being updated if ItemSource is changed inside a Timer

[Rui]

Hi Syncfusion Team,

I need your help solving a problem that I'm having with updating the ui of SfKanban cards from inside a Timer. I binded the ItemsSource property of the kanban to an ObservableCollection<KanbanModel> named "Tasks" and every time I update one inside it, it updates the card binded to the model as it should...except from inside a Timer that I created to update the Tag property of the model each second. The code inside the timer is being called and it's this:

                    // Update task image with pause icon
                    Tasks[taskIndex].ImageURL = new Uri("ms-appx:///Assets/pause-icon.png");  <--- This is working (outside of the timer) cause the image in the card changes

                    // Create new timer
                    Timer taskTimer = new Timer((o) => {

                        // Get current task activity seconds and increment one more
                        double taskSeconds = TimeSpan.Parse(Tasks[taskIndex].Tags[0]).TotalSeconds;
                        taskSeconds += 1;
                        TimeSpan taskTime = TimeSpan.FromSeconds(taskSeconds);
                        // Update tag with new time
                        Tasks[taskIndex].Tags[0] = taskTime.ToString();     <--- This is not working. I mean it's being called each second and the time being incremented
                                                                                                                                                  but it does not update the ui of the card   
                    }, null, 1000, 1000); // Run inner code after 1 second and then each second
                    Timer.oTasksTimers.Add(selectedTaskID, taskTimer);

I leave an attachment with the xaml page and its code-behind where the SfKanban control is, the KanbanTasks class where the code above is and the Timer class.

If you need more of the code, more info or context just let me know.

Thanks in advance!!

Best regards,

Rui Barreira

Attachment: Kanban_6123a593.zip

[Devakumar Dhanapoosanam]

Hi Rui, 

 

Greetings from Syncfusion. 

 

Currently we are checking the reported query at our end and we will update you the status on May 13, 2020. 

 

Meanwhile can you please share the ObservableCollection<KanbanModel> named "Tasks" value binded for Kanban ItemsSource collection entire data collection adding code snippet if possible, which will be helpful for us to analyze? 

 

Regards, 

Devakumar D 

[Rui]

Hi Devakuma,

Thanks for the quick response and sorry for the delay from my part.
I cloned a solution from my project with the relevant code for you to debug the issue.
Please check the link to download (too large to attach file) and anything else you need just let me know.

https://meocloud.pt/link/36f6f587-9f4b-4e09-aa5d-7f21400b55ac/KanbanDemo.zip

Hope you can help me with this!
Best regards,
Rui Barreira

[Devakumar Dhanapoosanam]

Hi Rui, 

 

Thanks for the update and sharing the sample files. 

 

Currently we are checking the provided sample and we will update you the complete details on or before May 19, 2020. 

 

Regards, 

Devakumar D 

[Devakumar Dhanapoosanam]

Hi Rui, 

 

Sorry for the delay.  

 

We were able to reproduce the reported issue using the provided sample. We still need some more time for analyzing the feasible solution of your requirement dynamic tag value update using the Kanban CardTemplate at our end and will update you the details on May 21, 2020. 

 

Regards, 

Devakumar D 

[Rui]

Hi Devakumar,

No problem. Take the time that is needed, as a fellow developer I understand that.

Thanks for your time and effort!

Best regards,

Rui Barreira

[Devakumar Dhanapoosanam]

Hi Rui, 

 

Thanks for your patience. 

 

We have checked the reported issue and the timer value doesn’t update in the tags due to the KanbanModel Tags property is of type Array, while changing the array value the property changed does not get notified. Hence tired to add the KanbanModel by adding a new property TagsCollection of type ObservableCollection and while using this works in your sample tags value update with the DispatchTimer, and changed the card Tags template as in below, 

 

XAML: 

<DataTemplate x:Key="KanbanCardTemplate"> 

         ….. 

            <ScrollViewer Grid.Row="2" Grid.ColumnSpan="1" VerticalAlignment="Bottom" 

                                Margin="0,4,0,2" 

                                Visibility="{Binding Tag.CardStyle.TagVisibility , 

                                                RelativeSource={RelativeSource Mode=TemplatedParent}}" 

                                HorizontalScrollBarVisibility="Hidden" 

                                VerticalScrollBarVisibility="Disabled"> 

                                <ItemsControl ItemsSource="{Binding TagsCollection}"> 

                                    <ItemsControl.ItemsPanel> 

                                        <ItemsPanelTemplate> 

                                            <ItemsWrapGrid x:Name="ItemWrapGrid" MaximumRowsOrColumns="3"  

                                                                     ItemHeight="30" ItemWidth="70" DataContext="{Binding}"  

                                                                     Orientation="Horizontal"/> 

                                        </ItemsPanelTemplate> 

                                    </ItemsControl.ItemsPanel> 

                                    <ItemsControl.ItemTemplate> 

                                        <DataTemplate> 

                                            <Border BorderThickness="2" BorderBrush="Gray"  Margin="5"> 

                                                <TextBlock HorizontalAlignment="Center" FontSize="10"  

                                                                           Text="{Binding}"/> 

                                            </Border> 

                                        </DataTemplate> 

                                    </ItemsControl.ItemTemplate> 

                                </ItemsControl> 

                                <!--<kanban:TagsStackPanel x:Name="KANBAN_TagsPanel" 

                                    Orientation="Horizontal" 

                                    ContentTemplate="{StaticResource TagsTemplate}" 

                                    TagsCollection="{Binding TagsCollection}" 

                                    DataContext="{Binding}" 

                                    Height="Auto"> 

                                </kanban:TagsStackPanel>--> 

                            </ScrollViewer> 

 

</DataTemplate> 

 

C#: 

public class KanbanModelExt : IKanbanModel 

{  

      … 

     private ObservableCollection<string> tagsCollection; 

     public ObservableCollection<string> TagsCollection 

     { 

            get 

            { 

                return this.tagsCollection; 

            } 

 

            set 

            { 

                this.tagsCollection = value; 

                this.NotifyPropertyChanged("TagsCollection"); 

            } 

     } 

     … 

} 

 

C#: [KanbanTasks.cs] 

… 

public static string CallTaskStartTime(string selectedTaskID) 

{ 

            …. 

            DispatcherTimer timer1 = new DispatcherTimer(); 

            timer1.Interval = TimeSpan.FromSeconds(1); 

            timer1.Start(); 

 

            timer1.Tick += (sen, e) => 

            { 

                  Tasks[taskIndex].TagsCollection[0] = count.ToString(); 

                  count++; 

            };  

            …. 

} 

 

Video: https://www.syncfusion.com/downloads/support/forum/154171/ze/check1600752995.zip  

 

When using the Timer in your sample we were facing the below exception when update the TagsCollection value,  

System.Runtime.InteropServices.COMException: 'The application called an interface that was marshalled for a different thread.  

 

// Create new timer 

Timer taskTimer = new Timer((o) =>  

{ 

        // Get current task activity seconds and increment one more 

        double taskSeconds = TimeSpan.Parse(Tasks[taskIndex].TagsCollection[0]).TotalSeconds; 

        taskSeconds += 1; 

        TimeSpan taskTime = TimeSpan.FromSeconds(taskSeconds); 

        // Update tag with new time 

        Tasks[taskIndex].TagsCollection[0] = taskTime.ToString(); 

}, null, 1000, 1000); // Run inner code after 1 second and then each second 

Timer.oTasksTimers.Add(selectedTaskID, taskTimer); 

 

Currently we are checking this issue and we will update you the details on May 22, 2020. 

 

Regards, 

Devakumar D 

[Devakumar Dhanapoosanam]

Hi Rui, 

 

We have worked on finding any other possible way to achieve the same. But due to some technical blocks the updated value for Tags inside the timer, we suggest to use previously suggested solution for updating the Tags values in the DispatcherTimer instead of using the Timer. 

 

Please find the modified sample from the below link, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/154171/ze/1541711872296841.zip  

 

Could you please check and let us know whether the above solution works for your requirement or not? 

 

Regards, 

Devakumar D 

[Rui]

Hi Devakumar,

Yes, that solution works for my requirement!

Thanks for the help and keep up with the awesome work ;)

Best regards,

Rui Barreira

[Suyamburaja Jayakumar]

Hi Rui,  

  

We are glad to hear that your requirement has been achieved.  

  

Please let us know if you need any further assistance on this.  

  

Regards,  

Suyamburaja J.