How to update kanban positions in datasource

[andy knasinski]

I have two questions here.

My datasource is status JSON for the data. When I move a card, I'd like to update the value of all of the cards affected via a URL (ex: pass ID, column and position in column)

I have tried adding cardSettings-Priority with the value being a numeric field that is distinct to the column. My JSON data is sorted by column by priority value, however when the cards render the order is not the same. It doesn't match what I'd expect with the Priority field.

I do understand that I can sort using

kanbanObj.sortSettings.sortBy = 'Custom';

kanbanObj.sortSettings.field = 'OrderPress';

kanbanObj.sortSettings.direction = 'Ascending';

However then I still have the issue with changing values for all of the JSON data and doing a refresh. I'd prefer to not have to refresh, but just update via a URL so the backend matches the frontend.

[Vinitha Jeyakumar]

Hi Andy,

We want to let you know that the Custom sortBy property can be only used with string type data. If you are mapping a numeric field, you can use the Index with field mapping for sortBy property.

If you are facing issues with mapping numeric field and sorting by index, please let us know with the exact issue you are facing and provide us with the entire code snippet or issue reproducing sample along with video illustration of issue replication to further validate on our end.

Please refer to the below documentation for further reference,

https://ej2.syncfusion.com/documentation/kanban/sort/#custom-with-field-mapping

Regards,

Vinitha

[andy knasinski]

As I explained above, I had no custom sort and just the Priority but that did not work - the order was what appeared to be random.  So I had tried adding the sort but wanted to use native functions. 

Again, I have two questions. I need to show cards in the correct order by default. Secondly, I need to know which card positions have changed after a card is moved.

[Vinitha Jeyakumar]

Hi Andy,

Currently, we are validating your reported query. we will update you the further details in two business days on or before 2nd August 2022.

Regards,

Vinitha

[andy knasinski]

I can email you source as well. Please LMK where to send.

[Vinitha Jeyakumar]

Hi Andy,

If you want to sort the cards in the column by using a field value, you can use the index with field mapping concept to sort cards in the Kanban board. In this behavior, cards are loaded based on mapping field values, and cards are dropped based on the dropped clone.

The following cases will dynamically change their field value when dropping the cards.

• If the cell has no cards, the dropped card field value does not change.
• If the cell has one card and dropped a card to the last position or previous/next cards that do not have continuous order, then the dropped card field value will be changed based on their previous card value.
• If the cell has one card and dropped a card on the previous position, then it will compare both the values, and the dropped card field value will be changed if the cards have continuous order otherwise values will not be changed.
• When the previous and next cards do not have continuous order, the dropped card field value will be changed based on the previous card value.
• When the previous and next cards have continuous order or odd/even value, then the field value of the dropped card and the cards followed by the dropped card will be changed based on the previous card value with continuous order.

Please check the video illustration and sample for your reference,

Video illustration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Kanban_sort1165016173

In the above video, the field RankId was changed based on the dropped clone's position in the Kanban board.

Sample: https://stackblitz.com/edit/fgd1tc?file=index.ts,index.html

Documentation: https://ej2.syncfusion.com/documentation/kanban/sort/#index-with-field-mapping

Query 2. "I need to know which card positions have changed after a card is moved"

You can get the drooped cards information using the dragStop event arguments.

Code snippet:

let kanbanObj: Kanban = new Kanban({

  //Initialize Kanban control

  dataSource: data,

  keyField: 'Status',

  columns: [

    { headerText: 'To Do', keyField: 'Open' },

    { headerText: 'In Progress', keyField: 'InProgress' },

    { headerText: 'Done', keyField: 'Close' },

  ],

  cardSettings: {

    headerField: 'Id',

    contentField: 'Summary',

    template: '#cardTemplate',

  },

  sortSettings: {

    sortBy: 'Index',

    field: 'RankId',

  },

  dragStop: dragStop,

});

kanbanObj.appendTo('#Kanban'); //Render initialized Kanban control

function dragStop(args) {

  console.log(args.data[0]);

}

Sample: https://stackblitz.com/edit/yow4kk?file=index.ts,index.html

Regards,

Vinitha

[andy knasinski]

Thank you for the reply. For #1, I will need to test again. For #2 - I want to get ALL of the card positions that changed after the drag as the RankId for several would change if I moved a card up or down or across columns... those new positions need to get updated for the raw data.

[Vinitha Jeyakumar]

Hi Andy,

You can get the data of the changed cards by using the actionComplete event arguments when a card is dragged in Kanban board. please check the code and sample below,

Code snippet:

let kanbanObj: Kanban = new Kanban({

  //Initialize Kanban control

  dataSource: data,

  keyField: 'Status',

  columns: [

    { headerText: 'To Do', keyField: 'Open' },

    { headerText: 'In Progress', keyField: 'InProgress' },

    { headerText: 'Done', keyField: 'Close' },

  ],

  cardSettings: {

    headerField: 'Id',

    contentField: 'Summary',

    template: '#cardTemplate',

  },

  sortSettings: {

    sortBy: 'Index',

    field: 'RankId',

  },

  actionComplete: actionComplete,

});

kanbanObj.appendTo('#Kanban'); //Render initialized Kanban control

function actionComplete(args): void {

  if (args.requestType == 'cardChanged') {

    console.log(args.changedRecords);

  }

}

Sample: https://stackblitz.com/edit/nm6rfe?file=index.html,index.ts

Regards,

Vinitha

[andy knasinski]

When I look at the console, I only see data for one moved card. For example, if I have 1 card in column1 and 2 cards in column 2, and i drop the card from 1 to the TOP of 2, I would expect to see log entries for THREE cards.

[Vinitha Jeyakumar]

Hi Andy,

We have checked the issue you have reported. but we can be able to get the three data's when drag and drop the card as you said. please check the video below,

Video illustration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Kanban_vid_dat464182094

Sample: https://stackblitz.com/edit/nm6rfe-zitjbt?file=datasource.json,package.json

Can you please share the details below?

• Exact issue reproducing steps.
• Video illustration of issue replication.

Regards,
Vinitha

[andy knasinski]

I can see how it's working for you, but I only see the one event logged. I do also have an 

OnDragStop event triggered - maybe that is causing conflict with cardChanged?

[Vinitha Jeyakumar]

Hi Andy,

We have also prepared a sample by using both the actionComplete and dragStop event of the Kanban control. In the dragStop event, you will get the details of only one card which you dropped. but in the actionComplete event, you can get the data of the 3 cards as you expected.

Sample : https://stackblitz.com/edit/nm6rfe-fybaqf?file=datasource.json,index.ts

Please check the sample above and if still issue persists at your end, please share us with the issue reproducing sample to further validate on our end.

Regards,

Vinitha