nested data for keyfield

[Unknown]

Hi, i try to setup the kanban board but face an issue where the keyfield cannot accept nested string data, below is the example:

html:

<ejs-kanban keyField="status.name" [dataSource]="data" [cardSettings]="cardSettings"></ejs-kanban>

data : 

"status": { "statusId": 20000, "name": "Backlog" }

anyway to let the keyfield accept status.name?

[Buvana Sathasivam]

Hi Sheng, 

 

Greetings from Syncfusion support. 

 

We have considered "Need to provide complex data binding support on Kanban board" as an feature request from our end. This support will be included in any one of our upcoming releases. 

 

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: 

https://www.syncfusion.com/feedback/33303/need-to-provide-complex-data-binding-support-on-kanban-board  

 

In the meantime, you should be able to fulfil your requirement by using a dataBinding event. In the below sample, we have bound the complex keyField data into a Kanban board. 

app.component.html 

    <ejs-kanban keyField="StatusName" 

      (dataBinding)="OnDataBinding($event)" 

    > 

    </ejs-kanban> 

 

app.component.ts 

 OnDataBinding(args: dataBindingEventArgs): void { // Triggered when before data loaded to Kanban board 

    var kanbanData = []; 

    var cardData = args.result; 

    for (var b = 0; b < cardData.length; b++) { 

      var data = cardData[b]; 

      var cardObj = {    // created new data object  

        Id: data.Id, 

        Title: data.Title, 

        StatusName: data.Status.name, 

        Assignee: data.Assignee, 

        Summary: data.Summary, 

      }; 

      kanbanData.push(extend({}, cardObj, null, true)); // Push the created object into array 

    } 

    args.result = kanbanData; // Assign the created array of data into argument result 

  } 

 

data.ts 

export let kanbanData: Object[] = [ 

  { 

    Id: 'Task 1', 

    Title: 'Task - 29001', 

    Status: { 

      statusId: 20000, 

      name: 'Open', 

    }, 

    Summary: 'Analyze the new requirements gathered from the customer.',  }] 

 

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

 

Please let us know if you have any concerns. 

 

Regards, 

Buvana S