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

Add kanban header element

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 :

2023-04-25_15-30-51.jpg


Regards




1 Reply

VY Vinothkumar Yuvaraj Syncfusion Team April 26, 2023 04:01 PM UTC

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 kanbanObjKanban = 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: (argsCardRenderedEventArgs=> {

    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');

 

 



Sample : https://stackblitz.com/edit/ej2-kanban-column-header-customizaion-sample-238xsn?file=index.ts,datasource.json


API Link :

https://ej2.syncfusion.com/documentation/api/kanban/#cardrendered

https://ej2.syncfusion.com/documentation/api/kanban/#dragstart


Regards,

Vinothkumar


Loader.
Up arrow icon