Column Swimlane Match in Kanban

Question

Hi.

I would like to know if it is possible to get the visual attached with Kanban component. I want to seperate swimlanes with columns and use the information seperately.

Swimlane1-Column1 | Swimlane1 - Column2

Swimlane2-Column1 | Swimlane2 - Column2 and Counts of Swimlanex-Columnx etc.

Attachment: image_1ac29d01.zip

Buvana Sathasivam · Answer

Hi Muhammed, 

Currently, we are checking your reported query with high priority. We will update you with further details on March 25, 2022.  

Regards, 
Buvana S

Buvana Sathasivam · Answer

Hi Muhammed, 
 
Thank you for your patience. 
 
We have created a custom sample to meet your needs. Using the queryCellInfo event, we added a custom attribute name ("aria-section-name") to each cell that holds the section names A1, A2,.... before each element appends to the DOM element. In the dataBound event, we created a custom element(e-custom-create) before each cell and used it to display capacity information. We changed the custom element capacity information in dragged and dropped cells only in the dragStop event. Please see the code and sample below for your reference. 
 
You can assign each shelf's capacity and provide it as json data in the way shown below. 
 
datasource.json 




"capacityData": [ 
    { 
      "A1": 3, 
      "A2": 4, 
      "A3": 5, 
      "B1": 2, 
      "B2": 3, 
      "B3": 5, 
      "C1": 2, 
      "C2": 3, 
      "C3": 4 
    } 
  ] 
 
Index.ts 




let kanbanObj: Kanban = new Kanban({ 
  ……..  
  dataBound: OnDataBound, 
  queryCellInfo: queryCellInfo, 
  dragStop: dragStop, 
}); 
kanbanObj.appendTo('#Kanban');  
 
let firstRender = true; 
function queryCellInfo(args): void { // Triggered before elements append to DOM 
  if (args.requestType == 'contentRow') { // Check if content row creation 
    [].slice 
      .call(args.element.children) 
      .forEach((cell: HTMLElement, index: number) => { // Get each cells on the row  
        cell.setAttribute(    // Set custom attribute with shelves names 
          'aria-section-name', 
          args.data[0].keyField.replace('Section ', '') + ++index 
        ); 
      }); 
  } 
} 
 
function OnDataBound(args): void { // Triggered after data rendered to Kanban board 
  if (firstRender) { // check if initial rendering 
    kanbanObj.element 
      .querySelectorAll('.e-content-row') 
      .forEach((contentRow: HTMLElement) => {  // Get each rows 
        if (!contentRow.classList.contains('e-swimlane-row')) { // Get content row 
          [].slice 
            .call(contentRow.children) 
            .forEach((cell: HTMLElement, index: number) => { // Get cells in rows 
              let capacityData: Object[] = <Object[]>( 
                extend([], (dataSource as any).capacityData, null, true) 
              ); // Get the capacity information data’s 
              let cardLength = cell.querySelectorAll('.e-card').length; // Get the card length on particular cells  
              let currentSection = cell.getAttribute('aria-section-name'); // Get the shelves name 
              const element: HTMLElement = createElement('div', { 
                innerHTML: 
                  currentSection + 
                  ' Capacity ' + 
                  cardLength + 
                  ' / ' + 
                  capacityData[0][currentSection], 
                className: 'e-custom-create', 
              }); // Created custom element 
              cell.insertBefore(element, cell.children[0]); // Insert the custom created element to Kanban cells 
            }); 
        } 
      }); 
    firstRender = false; 
  } 
} 
 
 
function dragStop(args): void { // Triggered when drag stop the card 
  if ( 
    !isNullOrUndefined(this.element.querySelector('.e-target-dropped-clone')) 
  ) { 
    let draggedEle = closest(args.element, '.e-content-cells'); 
    let modifiedText = draggedEle.querySelector('.e-custom-create'); // get the corresponding custom capacity information on dragged element cell 
    if (modifiedText) { 
      let index = modifiedText.innerText.indexOf('Capacity'); 
      let count = parseInt(modifiedText.innerText.substr(index + 9)[0]); 
      modifiedText.innerText = 
        modifiedText.innerText.substring(0, index + 9) + 
        --count + 
        modifiedText.innerText.substring(index + 9 + 1); // Modified the capacity information on dragged element 
    } 
    let droppedEle = closest(args.event.target, '.e-content-cells'); 
    let droppedModifiedText = droppedEle.querySelector('.e-custom-create'); // get the corresponding custom capacity information on dropped element cell 
    if (droppedModifiedText) { 
      let droppedIndex = droppedModifiedText.innerText.indexOf('Capacity'); 
      let droppedCount = parseInt( 
        droppedModifiedText.innerText.substr(droppedIndex + 9)[0] 
      ); 
      droppedModifiedText.innerText = 
        droppedModifiedText.innerText.substring(0, droppedIndex + 9) + 
        ++droppedCount + 
        droppedModifiedText.innerText.substring(droppedIndex + 9 + 1); // Modified the capacity information on dropped element 
    } 
  } 
} 
 
Sample: https://stackblitz.com/edit/mequgl-tjanfh?file=index.ts 
 
API links: https://ej2.syncfusion.com/documentation/api/kanban#dragstop 
https://ej2.syncfusion.com/documentation/api/kanban#databound 
https://ej2.syncfusion.com/documentation/api/kanban#querycellinfo 
Note: You can include 28 sections and 6 shelves using the above sample with your data source. 
Please check the above sample and let us know if it meets your requirements. 
 
Regards, 
Buvana S