SfKanban Card Tapped

[Hunter]

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]

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> 

  

Sample: https://www.syncfusion.com/downloads/support/forum/146123/ze/KanbanSample1096657886.zip  

  

Please get back to us if you need any further assistance. 

  

Regards, 

Muneesh Kumar G.  

 

[Hunter]

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]

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]

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]

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]

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]

Hi Hunter, 

 

Thanks for your update.  

 

Please let us know if you have any other queries.  

 

Thanks,  

Muneesh Kumar G.