Kanban Card Order

The Kanban component respects the original order of cards that you use in the datasource.

When a card is moved, you can get information about the target position inside a cell using the args.position property of the onCardMove handler. You can use it to persist the new order in the database.

After the move is completed (i.e. in onCardMoved), the cards.list property contains the updated cards in the new order.

Sorry. When we store the position on the server and when we get back the data from the server it is not the card that needs this position info as there is no such property. That means we have to set the position on another element?

How can this be done. Thanks

Is it possible for the card object to also have this property?

You don’t need to specify this property in the card objects that you send to the client side - just use it to order the records when retrieving them from the database (ORDER BY).

The Kanban component will display the cards in the same order that you use in the array.

// this order will not be changed:
const cards = [
  { id: 2, ... },
  { id: 1, ... },
  { id: 4, ... },
  // ...
}; 
kanban.update({cards});

Thanks. Works great.

When adding a new card, how does one get where it is going to be positioned so that it can be sent to the backend with its other data.

Unfortunately this does not work “very well“ as it depends on which card you move.

The only way that this can be done properly is when a card is placed it has to calculate the order between it previous and after cards otherwise it will be just an approximation and sometimes work and othere times not.

The Workforce Scheduling in ASP.NET Core tutorial uses a Queue component which has a similar UI - it’s an ordered list of items which can be moved using drag and drop.

This project uses two fields to handle item order:

• Ordinal (int)

• OrdinalPriority (DateTime)

When the item (Order) is moved, the change is recorded in two steps:

1. The Ordinal value of the moved item is set to the target position. The OrdinalPriority is set to the current time.

2. The order is then normalized by calling CompactOrdinals() method which looks like this:

private async Task CompactOrdinals()
{
    List<Order> list = await _context.Orders.Where(e => e.ResourceId == null).OrderBy(e => e.Ordinal)
        .ThenByDescending(e => e.OrdinalPriority).ToListAsync();
    
    int i = 0;
    foreach (Order order in list)
    {
        order.Ordinal = i;
        i += 1;
    }
    await _context.SaveChangesAsync();
}

A compacted dataset can be sorted simply using Ordinal.

This is not the only way to implement it, but you can adapt this aproach for use with Kanban.

Instead of maintaining the order for each cell separately, it is probably easier to have a single global index. In that case, you need to use the new global position of a card instead of the position inside a cell (args.position).

You can get the new global using cards.list.indexOf(args.card.data) in onCardMoved.

This is very resource intensive and not suitable for high activity apps.

There are much simpler solutions which can be done in Javascript within the control itself without the need of all this querying and iterating.

May be you could have a look at this as a Kanban without proper ordering is quite a bit below a professional system.

I could provide you with a simple algorithm in javascript if you are interested - but I am sure yourself can probably do it much better.