We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Using object as key value


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

1 Reply

VY Vinothkumar Yuvaraj Syncfusion Team December 9, 2022 01:52 PM UTC

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.


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

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




export default {

 data: function() {

  return {

  swimlaneSettings: {

        keyField: "Assignee"







       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;







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.



Attachment: quickstart_3c614685.zip

Live Chat Icon For mobile
Up arrow icon