Hi,
In the kanban component, we find the number of items in the header of the column.
is it possible to add the sum of the amounts of each item (example 3 items 3.200$) ?
Like this :
Regards
Hi Gilles,
We added the total amount of the card to the column header by utilizing the cardRendered and dragStart events. Please refer to the following code and sample.
let menuSum = 0; let orderSum = 0; let deliveredSum = 0; let previousValue="";
let kanbanObj: Kanban = new Kanban({ dataSource: data, keyField: 'Category', columns: [ { headerText: 'Menu', keyField: 'Menu', allowToggle: true }, { headerText: 'Order', keyField: 'Order', allowToggle: true }, { headerText: 'Delivered', keyField: 'Delivered,Served', allowToggle: true, }, ], cardSettings: { headerField: 'Id', template: '#cardTemplate', }, dialogSettings: { fields: [ { text: 'ID', key: 'Id', type: 'TextBox' }, { key: 'Category', type: 'DropDown' }, { key: 'Title', type: 'TextBox' }, { key: 'Size', type: 'TextBox' }, { key: 'Description', type: 'TextArea' }, ], }, cardRendered: (args: CardRenderedEventArgs) => { if (args.data.Category === 'Menu' && !document.querySelector('.e-total-money-value')) { let element = createElement('div', { className: 'e-total-money-value' }); let headerElement = kanbanObj.element.querySelectorAll("[data-key='Menu']")[1]; headerElement.querySelector('.e-header-title').appendChild(element); } else if (args.data.Category === 'Order' && !document.querySelector('.e-total-Order-value')) { ……. } else if (args.data.Category === 'Delivered' && !document.querySelector('.e-total-Delivered-value')) { ……. } if (args.data.Category === 'Menu' && kanbanObj.element.querySelector('.e-total-money-value')) { menuSum += +(args.data.Price as string).slice(1,(args.data.Price as string).length); let stringAmount = '$' + Math.round(menuSum); (kanbanObj.element.querySelector('.e-total-money-value') as HTMLElement).innerText = stringAmount; } else if(args.data.Category === 'Order' && kanbanObj.element.querySelector('.e-total-Order-value')){ …….. } else if(args.data.Category === 'Delivered' && kanbanObj.element.querySelector('.e-total-Delivered-value')){ …….. } if(previousValue == 'Menu'){ menuSum -= +(args.data.Price as string).slice(1,(args.data.Price as string).length); let stringAmount = '$' + Math.round(menuSum); (kanbanObj.element.querySelector('.e-total-money-value') as HTMLElement).innerText = stringAmount; } else if(previousValue == 'Order'){ ……… } else if(previousValue == 'Delivered'){ ……… } }, dragStart:(e)=>{ previousValue = e.data[0].Category }, }); kanbanObj.appendTo('#Kanban');
|
API Link :
https://ej2.syncfusion.com/documentation/api/kanban/#cardrendered
https://ej2.syncfusion.com/documentation/api/kanban/#dragstart
Regards,
Vinothkumar