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

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

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.


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

Loader.
Live Chat Icon For mobile
Up arrow icon