Using object as key value

[chae hyeoung guk]

Hi

I have a question regarding "keyField"

Im using object(lookup , complex column) as a key value to the "keyField " in Kanban (SwimlaneSettingsModel and CardSettingModel). Problem is that it does not seem to get nested object as a key. So it present as [Object object] in page.

(Problem like https://www.syncfusion.com/forums/176791/excel-filter-focus-error)

Thanks for your help.

Attachment: object_95bc372.zip

[Vinothkumar Yuvaraj]

Hi chae hyeoung guk,

Greetings from Syncfusion support.

We have already logged the requested requirement as a feature on our end. This support will be included in any one of our upcoming releases. Please track the status of the reported issue from the below feedback.

Feedback 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. Please find the attached sample and code for your reference.

App.vue

<ejs-kanban id="kanban" keyField="StatusName" :dataSource="kanbanData"

    :cardSettings="cardSettings" :dataBinding="OnDataBinding" :swimlaneSettings="swimlaneSettings">

</ejs-kanban>

 

<script>

export default {

 data: function() {

  return {

  swimlaneSettings: {

        keyField: "Assignee"

     },

   };

  }

   methods:{

    OnDataBinding:function(args){

      debugger

       var kanbanData = [];

        var cardData = args.result;

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

          var data = cardData[b];

          var cardObj = {

            Id: data.Id,

            Title: data.Title,

            StatusName: data.Status.Status1,

            Assignee: data.Assignee.Assignee1,

            Summary: data.Summary,

          };

          kanbanData.push(extend({}, cardObj, null, true));

        }

        args.result = kanbanData;

      }

  },

}

</script>

 

dataSource.js

exports.kanbanData = [

 {

            'Id': 1,

            'Title': 'Task - 29001',

            'Status': {Status1:"Open",Status2:"Close"},

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

            'Type': 'Story',

            'Priority': 'Low',

            'Tags': 'Analyze,Customer',

            'Estimate': 3.5,

            'Assignee': {Assignee1 : 'Nancy Davloio'},

            'RankId': 1

        },

    ];

 

API Link : https://ej2.syncfusion.com/vue/documentation/api/kanban/#databinding

Please let us know if you have any concerns.

Regards,

Vinothkumar     

Attachment: quickstart_3c614685.zip