TypeError: Cannot read property 'Codigo' of undefined

[Benjamim Goulart Bessa]

Hi,

After updated Kanban control to version 18.4.46 I started recieve error below after drag a card from a column to another, update card data in my backend, and kanban is refreshed, when I try drag another card or even the same card, the error is throwed in console.

ERROR TypeError: Cannot read property 'Codigo' of undefined

    at KanbanComponent.getCardDetails (ej2-kanban.es2015.js:3720)

    at Action.cardClick (ej2-kanban.es2015.js:681)

    at Action.clickHandler (ej2-kanban.es2015.js:636)

    at ZoneDelegate.invokeTask (zone-evergreen.js:406)

    at Object.onInvokeTask (core.js:28497)

    at ZoneDelegate.invokeTask (zone-evergreen.js:405)

    at Zone.runTask (zone-evergreen.js:178)

    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:487)

    at invokeTask (zone-evergreen.js:1600)

    at HTMLElement.globalZoneAwareCallback (zone-evergreen.js:1626)

Can you help me?

[Revanth Krishnan]

Hi Benjamim, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “Cannot read property 'Codigo' of undefined occurs in the version 18.4.46”. 

 

We tried to reproduce the issue in the following ways, 

• Tried to drag and drop the cards in the different Kanban column.
• Tried to drag and drop the cards in the same Kanban column.
• Ensured by clicking and double-clicking the cards.

But we couldn’t reproduce the issue from our end. 

 

We have prepared a sample for your reference, 

Sample: https://stackblitz.com/edit/angular-sg5mhn-l5wki2?file=app.component.ts 

 

Can you please share us with more following details, 

• The code snippet of the Kanban rendered in the application.
• Is any of the public methods of the Kanban used (share us with the code snippet)?
• If possible please share us with the issue reproducible sample or please modify the shared sample with the issue reproducing step.

 

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 

 

Regards, 

Revanth 

 

[Benjamim Goulart Bessa]

Hi

Bellow the requested snippets

• Kanban 

<ejs-kanban #deliveryKb

                      (dialogOpen)='onDeliveryDialogOpen($event)'

                      (drag)='onDeliveryDrag($event)'

                      (dragStop)='onDeliveryDragStop($event)'

                      [cardSettings]='deliverySettings'

                      [dataSource]='deliveryList'

                      [swimlaneSettings]='deliverySwimlane'

                      height='100%'

                      keyField='Situacao'

                      width='auto'>

            <e-columns>

              <e-column headerText="Pedido"

                        keyField="0">e-column>

              <e-column headerText="Em preparação"

                        keyField="1">e-column>

              <e-column headerText="Pronto para entrega"

                        keyField="2">e-column>

              <e-column headerText="Em roteiro de entrega"

                        keyField="3">e-column>

            e-columns>

            <ng-template #cardSettingsTemplate

                         let-data>

              <ng-container *ngTemplateOutlet="cardTemplate; context: {$implicit: data}">

              ng-container>

            ng-template>

          ejs-kanban>

• Card Template

<ng-template #cardTemplate

               let-data>

    

    <div (dblclick)='doComandaEdit(data.Id)'

         class="card"

         fxLayout="row">

      

      <div class="card-data"

           fxFlex

           fxLayout="column">

        

        <div class="card-firstrow"

             fxlayout="row"

             fxLayoutAlign="start start">

          

          <div fxFlex=90

               fxlayout="column">

            

            <div class="card-code">

              {{data.Codigo}}

            div>

            

            <div class="mat-small card-attendant">

              {{data.AtendenteNome}}

            div>

          div>

          

          <div [matMenuTriggerFor]="menu"

               class="card-actions"

               fxLayoutAlign="center center"

               fxFlex=10>

            

            <div fxLayoutAlign="center center"

                 matRipple

                 matRippleCentered=true>

              <i class="fas fa-ellipsis-v">i>

            div>

            

            <mat-menu #menu="matMenu">

              

              <button (click)="doComandaEdit(data.Id)"

                      mat-menu-item>

                <mat-icon>editmat-icon>

                <span>Editarspan>

              button>

              

              <button (click)="doComandaCancel(data.Id)"

                      mat-menu-item>

                <mat-icon>clearmat-icon>

                <span>Cancelarspan>

              button>

              

              <button *ngIf="!data.Entrega && !data.Viagem"

                      (click)="doComandaTransf(data.Id)"

                      mat-menu-item>

                <mat-icon>call_splitmat-icon>

                <span>Transferirspan>

              button>

              <mat-divider *ngIf="!data.Entrega && !data.Viagem">mat-divider>

              

              <button *ngIf="!data.Entrega && !data.Viagem"

                      (click)="doPrintCheckReceipt(data.Id)"

                      mat-menu-item>

                <mat-icon>receiptmat-icon>

                <span>Imprimir conf.span>

              button>

              

              <div>

                <mat-divider *ngIf="(data.TransacaoId == 'SAI-DVY')">mat-divider>

                <button *ngIf="(data.Entrega || data.Viagem)"

                        (click)="doPrintDeliveryReceipt(data.Id)"

                        mat-menu-item>

                  <mat-icon>receiptmat-icon>

                  <span>Imprimir ticket entregaspan>

                button>

              div>

              

              <button (click)="doPrintKitchenReceipt(data.Id, $event)"

                      mat-menu-item>

                <mat-icon>receiptmat-icon>

                <span>Imprimir ticket cozinhaspan>

              button>

              <mat-divider *ngIf="(!data.Entrega && !data.Viagem) || data.Situacao == 3">mat-divider>

              

              <button *ngIf="!data.Entrega && !data.Viagem"

                      (click)="doComandaFechar(data.Id, true)"

                      mat-menu-item>

                <mat-icon>donemat-icon>

                <span>Fechar parcialspan>

              button>

              

              <button *ngIf="!data.Entrega && !data.Viagem"

                      (click)="doComandaFechar(data.Id)"

                      mat-menu-item>

                <mat-icon>donemat-icon>

                <span>Fecharspan>

              button>

              

              <div *ngIf="(data.TransacaoId == 'SAI-DVY')">

                <mat-divider>mat-divider>

                <button (click)="doComandaFechar(data.Id, false, true)"

                        mat-menu-item>

                  <mat-icon>donemat-icon>

                  <span>Confirmar Entregaspan>

                button>

              div>

            mat-menu>

          div>

        div>

        

        <div fxLayout="row"

             fxLayoutAlign="space-between center">

          

          <div *ngIf="data.Total"

               class="mat-small card-value"

               fxFlex=50>

            <i class="fas fa-dollar-sign">i>

            {{data.Total | number:'.2-2' }}

          div>

          

          <div fxLayout="row"

               fxLayoutAlign="end center"

               fxFlex>

            <i class="far fa-clock">i>

            <h4 class="card-time mat-small">{{data.DataHoraMovimento | dateago}}h4>

          div>

        div>

      div>

    div>

  ng-template>

• DataSource Propperty

// Obtêm a lista de entregas abertas

  deliveryList: DataManager = this._localService.getDeliveries();

• Service

  public getDeliveries(): DataManager {

    return new DataManager({

      url: `${this.baseApiUrl}api/documentosvendas/getopendeliveries`,

      headers: [

        { 'Authorization': `Bearer ${this.authService.getToken}` },

        { 'EmpresaId': this.getEmpresaAtivaId }

      ],

      adaptor: new WebApiAdaptor

    });

  }

After drag first card, every card I click raise related error.

[Revanth Krishnan]

Hi Benjamim, 

 

 

We have further validated your query and analyzed the shared code snippet. We tried to reproduce the issue in the following ways, 

• Rendered button inside the card template with click action.
• Also bind double click event inside the card template.

 

We have prepared a sample for your reference. 

Sample: https://stackblitz.com/edit/angular-sg5mhn-wthnhw?file=app.component.ts 

 

But we couldn’t reproduce the issue from our end. 

 

Can you please share us with more following details? 

• The code snippet of the properties configured in the typescript file
• Please share us with the issue reproducible sample and please modify the shared sample with the issue reproducing code.
• Also, the package version which was used before upgrading to 18.4.46.

 

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest.  

  

Regards,  

Revanth

[Benjamim Goulart Bessa]

Hi Revanth,

In your sample you using a local data source but my app use a remote data source as you can see below, doesn't make a difference?

• Also, the package version which was used before upgrading to 18.4.46. ===> 18.3.52

    return new DataManager({

      url: `${this.baseApiUrl}api/documentosvendas/getopendeliveries`,

      headers: [

        { 'Authorization': `Bearer ${this.authService.getToken}` },

        { 'EmpresaId': this.getEmpresaAtivaId }

      ],

      adaptor: new WebApiAdaptor

    });

[Revanth Krishnan]

Hi Benjamim, 

 

We have created a new incident under your Direct Trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.  

https://www.syncfusion.com/account/login 

 

Regards, 

Revanth