Removing the addIcon from showAddButton prop, append dynamic text to queryCellInfo and placing the button at the bottom or last part of the card list

[RJ Fajardo]

Is there a way to remove the addIcon from showAddButton and append dynamic text like `View {column_name} Jobs` to queryCellInfo and also placing the button at the last part of the card list.

Attachment: Screen_Shot_20230414_at_1.15.52_PM_3f1596a2.zip

[RJ Fajardo]

Something like this in Jira. Attached below

Attachment: Screen_Shot_20230414_at_17.58.04.png_1a76f8ac.zip

[Vinitha Jeyakumar]

Hi RJ Fajardo,

We have prepared a sample as per your requirement to include the Add Card button at the bottom of each Kanban column using the dataBound event. please check the code and sample below,

Code snippet:

 <KanbanComponent

            id="kanban"

            ref={(kanban) => {

              kanbanObj = kanban;

            }}

            keyField="Status"

            dataBound={dataBound}

            dataSource={data}

            cardSettings={{ contentField: 'Summary', headerField: 'Id' }}

          >           

          </KanbanComponent>

function dataBound() {

    if (firstRender) {

      const contentRows = kanbanObj.element.querySelectorAll('.e-content-row');

      let i = 0;

      contentRows.forEach((contentRow, index) => {

        if (!contentRow.classList.contains('e-swimlane-row')) {

          [].slice.call(contentRow.children).forEach((cell) => {

            const element = document.createElement('button');

            element.className = 'e-btn';

            element.innerHTML = 'View ' + cell.dataset.key + ' Jobs';

            cell.appendChild(element);

            element.onclick = function () {

              addClick(cell.dataset.key);

            };

          });

        }

      });

      firstRender = false;

    }

    function addClick(status) {

      const cardIds = kanbanObj.kanbanData.map((obj) =>

        parseInt(obj.Id.replace('Task ', ''), 10)

      );

      const cardCount = Math.max.apply(Math, cardIds) + 1;

      const cardDetails = {

        Id: 'Task ' + cardCount,

        Status: status,

        Priority: 'Normal',

        Assignee: 'Andrew Fuller',

        Estimate: 0,

        Tags: '',

        Summary: '',

      };

      kanbanObj.openDialog('Add', cardDetails);

    }

  }

Sample: https://stackblitz.com/edit/react-mpcuzy?file=index.js

API Link: https://helpej2.syncfusion.com/react/documentation/api/kanban#databound

[RJ Fajardo]

Is there a way to style the button and make it responsive? I was looking at the sample demo code when i resize the screen its overlaps and not responsive to the column width size. And also conditionally render the button when column exceeds 30 cards. 

[RJ Fajardo]

I also notice some bugs with the code whenever i drag and drop cards to another column the button goes to the top of the cards and it appends another button. Attached photo below.

Attachment: Screen_Shot_20230417_at_5.38.57_PM_3e9e24d1.zip

[Vinitha Jeyakumar]

Hi RJ Fajardo,

Query 1: "Is there a way to style the button and make it responsive? I was looking at the sample demo code when i resize the screen its overlaps and not responsive to the column width size.

You can customize the button using the CSS styles like below,

Code snippet:

.e-custom {

  width: 290px;

}

contentRows.forEach((contentRow, index) => {

        if (!contentRow.classList.contains('e-swimlane-row')) {

          [].slice.call(contentRow.children).forEach((cell) => {

            const element = document.createElement('button');

            element.className = 'e-btn e-custom';

            element.innerHTML = 'View ' + cell.dataset.key + ' Jobs';

            cell.appendChild(element);

            element.onclick = function () {

              addClick(cell.dataset.key);

            };

          });

        }

      });

 

Query 2: "conditionally render the button when column exceeds 30 cards."

Your requirement to conditionally render the button when the column has Cards more than 30 can be achieved by using the code below in the dataBound event.

Code snippet:

function dataBound() {

    if (firstRender) {

      const contentRows = kanbanObj.element.querySelectorAll('.e-content-row');

      let i = 0;

      contentRows.forEach((contentRow, index) => {

        if (!contentRow.classList.contains('e-swimlane-row')) {

          [].slice.call(contentRow.children).forEach((cell) => {

            if (cell.childNodes[1].childElementCount >= 30) {

              const element = document.createElement('button');

              element.className = 'e-btn e-custom';

              element.innerHTML = 'View ' + cell.dataset.key + ' Jobs';

              cell.appendChild(element);

              element.onclick = function () {

                addClick(cell.dataset.key);

              };

            }

          });

        }

      });

      firstRender = false;

    }

    .....

       .......

  }

Sample: https://stackblitz.com/edit/react-mpcuzy-ww4c9g?file=index.js,index.css

Query 3: "I also notice some bugs with the code whenever i drag and drop cards to another column the button goes to the top of the cards and it appends another button"

We suspect that you have missed to add the condition {if (firstRender)} in the dataBound event, so that the reported issue occurs. Please make sure to use the code we have used in the reference sample to resolve the reported issues. We have also prepared a video illustration for your reference.

Sample: https://stackblitz.com/edit/react-mpcuzy-z2ygru?file=index.css,index.js

Regards,

Vinitha

Attachment: VidKanban_d1967d97.zip

[RJ Fajardo]

Thanks for the response. I used another approach instead. Upon deep checking i stumbled upon this 'created' prop from kanbanComponent(since i think this one make more sense the description says its going to be trigger when kanban component is created) but when I tried to use this one I noticed that sometimes it wont execute/trigger my function and the text displays on the top. May I know the right way of using this one. 

Attachment: Screen_Shot_20230418_at_4.26.26_PM_69cd68b2.zip

[RJ Fajardo]

Another attachment.

Attachment: Screen_Shot_20230418_at_4.28.01_PM_7cac167b.zip

[Vinitha Jeyakumar]

Hi RJ Fajardo,

As we mentioned in our previous update, using the dataBound event is the proper way to achieve your requirement. The dataBound event will trigger once the data is bounded to the Kanban board, hence it will be the suitable way to achieve your requirements.

Please check the sample we have attached in our last updates and let us know the details of the issues you have faced and share the issue reproducing runnable sample to validate further on our end.

Regards,

Vinitha