Save the new location of the card when you drop it in another position in the same swimlane and in the same column.

[Mauricio]

When I reorganize the cards in a column, I want to save de exactly position of the cards. I'm actually sorting by RankId that is a date/time converted to a integer number. Now I need a property like "eventComplete" used when I change the column but to use when I change the line at the same swimlane and the same column (Figure 1).

For example: 

When I change the first line with the second line, the kanban returns a property that shows me the modification so that I can manage all the RankId adjustments depending on the new position and save at the database (Figure 2).

Figures are in the "Kanban_Thread_Figures.zip" file anexed.

Attachment: Kanban_Thread_Figures_8114f7df.zip

[Balasubramanian Sattanathan]

Hi Mauricio, 

Greetings from Syncfusion Support. 

We have validated your requirement and suspect that your need is to display the RankId in the Kanban cards. We can display the RankId values by  providing the RankId in the contentField. And also let you know that we can retrieve the changed card details and as well as column details by using the below code snippet. 

public cardSettings: CardSettingsModel = { 

  contentField: 'RankId', 

  headerField: 'Id', 

  tagsField: 'Tags', 

  grabberField: 'Color', 

  footerCssField: 'ClassName' 

}; 

 

onActionComplete(args: any) { 

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

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

    console.log((this.kanbanObj as any).getColumnData(args.changedRecords[0].Status)); 

  } 

} 

Sample: https://stackblitz.com/edit/angular-4buhcp-ktgsqj?file=app.component.ts 

If we misunderstood your requirement, let us know the below details if the problem is not resolved. 

• Share your exact requirement with details
• Share your use case scenario
• Try to replicate your scenario in the above sample and share the replication steps which would help us to provide the solution at the earliest.

Regards, 

Balasubramanian S 

[Mauricio]

Thank you for reply, 

however, I want to show the Id of the card, this is not the problem. 

The problem is: I want to change de order of the cards by drag and drop and save de new location in database.

For example: 

1 - This is the initial organization: 82 - 83 - 85.

2- I drag the card Id 82 and drop in the place of card Id 83.

3 - Now the organization is 83 - 82 - 85.

But if I refresh the page, the organization become to the initial state: 82 - 83 - 85:

I need a property that says to me what is the position of each card in each column, allowing me to save the new location of the cards.

Thank you in advance!

[Balasubramanian Sattanathan]

Hi Mauricio, 

Thanks for the update. 

We have validated your reported scenario and let you know that we can get the changed data at server side by making use of the crudUrl like the below UG. So we suggest you to refer and use the below UG to achieve your requirement. 

private dataManager: DataManager = new DataManager({ 

    url: "DataSource", 

    crudUrl: "UpdateData",  

    adaptor: new UrlAdaptor 

}); 

. . . 

. . . 

. . . 

public ActionResult UpdateData(EditParams param) { // Here, we can get the updated data 

    if (param.action == "insert" || (param.action == "batch" && param.added != null)) { 

        //Insert record in database 

    } 

    if (param.action == "update" || (param.action == "batch" && param.changed != null)) { 

        //Update record in database 

    } 

    if (param.action == "remove" || (param.action == "batch" && param.deleted != null)) { 

        //Delete record in database 

    } 

    db.SaveChanges(); 

    var data = db.Tasks.ToList(); 

    return Json(data, JsonRequestBehavior.AllowGet); 

} 

UG: https://ej2.syncfusion.com/angular/documentation/kanban/data-binding/#url-adaptor 

Kindly try the above UG and let us know if you need further assistance. 

Regards, 

Balasubramanian S