Cannot retrieve card data from drag event

[Julien Boye]

Hi,

I'm having issues trying to get the card's data from a drag&drop event, it's always undefined.


Did I miss something ? 

Here is what my code looks like (lite version) :

      <ejs-kanban

        #kanbanObj

        [keyField]="colonne"

        [dataSource]="kanbanData"

        [allowDragAndDrop]="allowDragAndDrop"

        [swimlaneSettings]="swimlaneSettings"

        enableTooltip="true"

        allowScrolling="true"

        [height]="windowHeight"

        cssClass="kanban-overview"

        (dragStart)="OnDragStart($event)"

      >

        <e-columns>

          <e-column

            *ngFor="let item of columnsList; let i = index"

            [headerText]="headerText(item)"

            keyField="{{ item }}"

            allowToggle="true"

          >

          </e-column>

        </e-columns>

        <ng-template #cardSettingsTemplate let-data>

          <div

            class="card-template"

            style="border-left: 3px solid"

          >

            <div class="e-card-header">

              <div class="e-card-header-caption">

                <div class="e-card-header-title">

                  <div>

                    <span>

                      {{ data.a }} - {{ data.b }}

                    </span>

                  </div>

                </div>

              </div>

            </div>

            <div class="e-card-content">

              <div class="e-text">{{ data.c }}</div>

              <div class="e-text">{{ data.d }}</div>

            </div>

          </div>

        </ng-template>

      </ejs-kanban> Type script :

OnDragStart(args: DragEventArgs): void {

    console.log(args);

  }

[Buvana Sathasivam]

Hi Julien,

Greetings from Syncfusion support.

We let you know that headerField is mandatory to render the cards in the Kanban board. It will act as a unique field in the Kanban board cards. So, you need to add the headerField property inside the cardSettings property. Please add the code below to your page to resolve your issue.

app.component.html

<ejs-kanban [cardSettings]="cardSettings" (dragStart)="OnDragStart($event)">……..

</ejs-kanban>

App.component.ts

public cardSettings: CardSettingsModel = {

    headerField: 'Title',

  };

OnDragStart(args: DragEventArgs): void {

    console.log(args.data[0]); // Here, you can get the dragged card data

}

Sample: https://stackblitz.com/edit/angular-ezes8e?file=app.component.html,app.component.ts

Documentation: https://ej2.syncfusion.com/angular/documentation/kanban/cards/#header

API link: https://ej2.syncfusion.com/angular/documentation/api/kanban/cardSettingsModel/#headerfield

Regards,

Buvana S

[Julien Boye]

Hi Buvana,

Thank you again for the quick answer, it works fine now.

Have a great day,

Julien

[Buvana Sathasivam]

Thank you for your update. Please let us know if you need any further assistance.