We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

SfKanban Card Tapped

Thread ID:

Created:

Updated:

Platform:

Replies:

146123 Jul 21,2019 10:01 PM UTC Jul 26,2019 06:04 AM UTC UWP 7
loading
Tags: SfKanban
Hunter
Asked On July 21, 2019 10:01 PM UTC

Hi team, 

I see that you have CardTapped in the list of events for the control, which is what I'm currently using, but I'm not able to differentiate between a left-click and right-click using it. From my brief understanding, I think Tapped is used in UWP applications so that we don't have to differentiate between the versions of clicking and tapping with a touch screen? 

I was curious if there is any way I'm able to add an event so that I can decide if the user right click's a card or not. Currently when the user clicks the card a context menu shows up with an Edit/Delete button, but to be consistent with typical user design aspects, I was looking into using right-click to show the context menu for delete (and eventually quick-move and the additional features), and then left-click the card to open the pane for editing. 

Thought it'd be worth a check before I finalize that portion of my theme. 

Thank you!

Muneesh Kumar G [Syncfusion]
Replied On July 22, 2019 12:31 PM UTC

Hi Hunter, 
  
Thanks for using Syncfusion products. 
  
We have achieved your requirement by using SfKanban.CardTemplate and hooking the UIElement.Tapped event to get notified on left-click and UIElement.RightTapped event to get notified on right-click. Please refer the below code snippets. 
  
Code snippet for hooking Tapped and RightTapped events: 
  
<DataTemplate x:Key="CardTemplate"> 
  
    <StackPanel 
        x:Name="card" 
        Margin="0,10,0,10" 
        Padding="10,10,10,10" 
        Background="LightGray" 
        Orientation="Vertical" 
        RightTapped="Card_RightTapped" 
        Tapped="Card_Tapped"> 
  
       . . .  
  
    </StackPanel> 
  
</DataTemplate> 
  
Code snippet of Tapped and RightTapped events: 
  
private void Card_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e) 
{ 
    //add action on left click 
} 
  
private void Card_RightTapped(object sender, Windows.UI.Xaml.Input.RightTappedRoutedEventArgs e) 
{ 
    //add action on right click 
} 
  
Code snippet for setting CardTemplate: 
  
<syncfusion:SfKanban 
    x:Name="kanban" 
    AutoGenerateColumns="False" 
    CardTemplate="{StaticResource CardTemplate}" 
    ColumnMappingPath="Category" 
    ItemsSource="{Binding Tasks}" 
    MinColumnWidth="150"> 
  
    . . . 
  
</syncfusion:SfKanban> 
  
  
Please get back to us if you need any further assistance. 
  
Regards, 
Muneesh Kumar G.  
 


Hunter
Replied On July 22, 2019 02:12 PM UTC

Thank you for the reply!

That could work, the only thing is at the moment I want to call this on the RightTapped event now, 

  var currentCol = e.SelectedColumn.Title.ToString();
            var selectedCardIndex = e.SelectedCardIndex;
            SelectedModel = e.SelectedCard.Content as CustomKanbanModel;
            // Show context menu next to selected card
            ShowContextMenu(selectedCardIndex, currentCol);

but, with the RightTappedRoutedEventArgs, I'm unable to get values such as SelectedColumn and SelectedCardIndex since those were for KanbanTappedEventArgs. Is there anyway to do this with those event args? 

Muneesh Kumar G [Syncfusion]
Replied On July 24, 2019 01:50 PM UTC

Hi Hunter, 
 
Thanks for your update,  
 
We have analyzed your requirement and we would like to inform you that we don’t have RightTapped event support in our SfKanban. So, we have achieved this event in sample level only. In this event you can able to get selected card KanbanModel in sender-> DataContext.  
 
By using this model, you can get the all card fields. Please check whether you can get the requested details using the particular model in your application.  
 
Regards,
Muneesh Kumar G.   
 


Hunter
Replied On July 24, 2019 02:21 PM UTC

Hi!

Thanks for the reply. I was actually able to make a work around :) Here it is in case you guys would like it for reference: 

  1. public void ShowContextMenu(CustomKanbanModel selectedModel)
  2.         {
  3.             // Workaround to show context menu next to selected card model
  4.             foreach (var col in kanbanBoard.ActualColumns)
  5.             {
  6.                 if (col.Categories.Contains(selectedModel.Category.ToString()))
  7.                 {
  8.                     // Find card inside column
  9.                     foreach (var card in col.Cards)
  10.                     {
  11.                         int cardIndex = 0;
  12.                         var cardModel = card.Content as CustomKanbanModel;
  13.                         if (cardModel.ID == selectedModel.ID)
  14.                         {
  15.                             // Get current index of card
  16.                             cardIndex = col.Cards.IndexOf(card);
  17.                         }
  18.  
  19.                         // Set flyout to selected card index
  20.                         for (int i = 0; i <= col.Cards.Count; i++)
  21.                         {
  22.                             if (i == cardIndex)
  23.                             {
  24.                                 FlyoutShowOptions myOption = new FlyoutShowOptions();
  25.                                 myOption.ShowMode = FlyoutShowMode.Transient;
  26.                                 taskFlyout.ShowAt(col.Cards[i], myOption);
  27.                             }
  28.                         }
  29.                     }
  30.                 }
  31.             }

As for right tapped, there was a bug after adding RightTapped to the Stack panel, whenever I clicked an item inside of the stack panel (i.e., textblock), it would crash instead of opening the context menu to the left of the card. I was able to get that with this code below, just for others taking a look :) 

  1. private void Card_RightTapped(object sender, RightTappedRoutedEventArgs e)
  2.         {
  3.             // Pre: Get information to pass to the dialog for displaying
  4.             //      Set corresponding properties in TaskDialog
  5.             // Post: Information passed, dialog opened
  6.  
  7.             // Always show in standard mode
  8.             var originalSource = (FrameworkElement)sender;
  9.             SelectedModel = originalSource.DataContext as CustomKanbanModel;
  10.             ShowContextMenu(SelectedModel);
  11.         }

Lakshmi Radha Krishnan [Syncfusion]
Replied On July 25, 2019 02:16 PM UTC

Hi Hunter,

We have checked the provided code snippet and you are using the variable called taskFlyout in the ShowContextMenu method. Could you please tell me the details about the taskFlyout variable which will be helpful for us to check further.

Regards,
Lakshmi R.

Hunter
Replied On July 25, 2019 02:36 PM UTC

Hi, 

Oh! Sorry. taskFlyout is a XAML control I created in my View. 

The solution I provided actually works, so nothing else was needing done, thought I'd help others out though :-) 

Muneesh Kumar G [Syncfusion]
Replied On July 26, 2019 06:04 AM UTC

Hi Hunter, 
 
Thanks for your update.  
 
Please let us know if you have any other queries.  
 
Thanks,  
Muneesh Kumar G.  
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon