how to disable native unselection of cards when clicked outside of Kanban

[Karol Januszczak]

Dears,

Please advice of how we can disable native (internal) behaviour of Kanban in this scenario

1) Click on Kanban card (selected state)

2) Click outside of Kanban, or it's wrapper (from the demos - click on the navigation ribbon - most top UI element)

3) Card is de-selected - this is different than any other component from Syncfusion library that we use (~15)

Ideally the card should stay selected UNTILL unclicked manually, or by any other programmatic needs (backed up by business)

This is a huge problem for us, as we share data between components - and when we interact with Target component it's data gets lost - as selection of card is gone. 

https://ej2.syncfusion.com/angular/demos/#/tailwind3/kanban/overview

Will be grateful for your support,

KJ 

Attachment: Kanban_Outside_click_ce8de8db.png

[Vinitha Jeyakumar]

Hi Karol Januszczak,

To disable the native deselection behavior of cards in the Kanban component when clicking outside (while allowing manual deselection by clicking the selected card again), there is no direct built-in property or API to achieve this. The selection is primarily a visual state managed by adding/removing the 'e-selection' class on the card element, and the outside click deselection is handled internally.

However, you can implement a workaround using Angular's @HostListener to monitor document clicks, track the last selected card, and reapply the selection class if deselection occurs due to an outside click. This preserves the visual selection until the user manually clicks the same card to deselect it, or you programmatically handle it.

Code snippet:

 

private lastSelectedCardId: string | null = null; // Track the selected card's ID (use your card's unique key)

  private lastSelectedElement: HTMLElement | null = null;

  // Handle card click to track selection/deselection

  public onCardClick(args): void {

    const clickedCardId = args.data.Id; // Assume 'Id' is your unique card key; adjust as needed

    const clickedElement = args.element as HTMLElement;

    if (this.lastSelectedCardId === clickedCardId) {

      // Manual deselection: allow it and reset tracking

      this.lastSelectedCardId = null;

      this.lastSelectedElement = null;

      clickedElement.classList.remove('e-selection');

    } else {

      // New selection: update tracking

      this.lastSelectedCardId = clickedCardId;

      this.lastSelectedElement = clickedElement;

    }

  }

  @HostListener('document:click', ['$event'])

  public onDocumentClick(event: MouseEvent): void {

    const target = event.target as HTMLElement;

    const kanbanElement = this.kanbanObj.element;

    if (this.lastSelectedCardId && !kanbanElement.contains(target)) {

      // Click outside: re-select visually after potential internal deselection

      setTimeout(() => {

        if (

          this.lastSelectedElement &&

          !this.lastSelectedElement.classList.contains('e-selection')

        ) {

          this.lastSelectedElement.classList.add('e-selection');

        }

      }, 0);

    }

  }

Sample: https://stackblitz.com/edit/angular-nzkqmgo5-eeporqs7?file=src%2Fapp.component.ts

Regards,

Vinitha

[Karol Januszczak]

Hello,

We've decided to override the documentClick for layoutModule manually to make sure that clicking outside of Kanban does not unselect it.

Would that be possible for you to just wrap that logic with some flag, like 'clearSelectionCardOutsideOfKanban' - so it's  decided by business use case - not internal magic behaviour?

Best regards,

KJ

[Vinitha Jeyakumar]

Hi Karol,

Currently, the Kanban component does not have support for preventing Kanban cards from being deselected when clicking outside the board. However, we have considered this requirement as a feature request. Now you can track the status of the feature in the feedback link below.

Feedback: https://www.syncfusion.com/feedback/73015/prevent-kanban-cards-from-being-deselected-when-clicking-outside-the-board

The above feature will be implemented in any one of the future volume releases. Generally, we will plan the feature implementation based on the customer request count, feature rank, and wishlist plan. You can upvote the feature request feedback so that it gets support and will be ranked higher for implementation.

You can use the workaround solution that we suggested in our last update to solve this requirement until then.

Regards,

Vinitha