I want to change variables in an on click function on a card

[Tim Otholt]

Thank you in advance For any help you may have in helping me understand how to implement my kanban features!  I asked this question the support channel but maybe the forums a more appropriate place? 

I have a kanban board and data manager set up and it writes My kanban board properly to local storage whenever I drag cards.  I copied the sample code from one of the examples and it works great! 

But I want to have some changes: 

1 I want to have a custom edit modal per card, that includes an an array of tasks per card (tasks[] = { taskName: 'contact customer', dueDate: '2025-4-13' }, { task name: 'determine Needs', dueDate: '2025-4-14' }, etc. But the documentation is very confusing as to what I'm allowed to have in a edit modal for card properties etc. I got this code to work properly in my own version of kanban (each card can have any number of tasks by hitting a + button), But your kanban is far better than the one I was building LOL. But I would like to still have this ability to have an arbitrary number of tasks on a card and that the user can hit the + button In the edit modal to add more tasks! 

2)  I want to have a isExpanded property of every kanban card, And single clicking it causes the isExpanded property to toggle.  In the react return statement, I will check the isExpanded boolean and display the title/task list (see above) if a card if it's expanded, but only the title if is not expanded.

So I have an on click handler using The on click event call back that you guys provide, But when I modify isExpanded property, I'm not sure how to tell kanban that my card has changed and it should call DataManager to save my card to local storage.  If I change isExpanded In my onclick handler it doesn't force kanban to call DataManager to write my changed card to local storage or redraw the card on screen.  I have tried a bunch of react hacks by including isExpanded in a useState etc and it redrew the card on screen, But it didn't force a save to local storage.  I think I'm doing it all wrong and that there has to be a proper way.  I tried using update card but I couldn't get it to work and maybe I just don't understand how to use it properly.

Thank you for your help and I really appreciate any assistance you might have.

Aloha!

Tim

[Yaswin Vikhaash Rajaretenam]

Hi Tim Otholt,

We have validated your queries and provided the following detailed responses:

Query 1: Add a Kanban Card Using a Button Click

You can add a Kanban card by creating a button and binding a method to its onClick event. This method can open a dialog and add a new card. Please find the sample implementation below:

sample - https://stackblitz.com/edit/react-b7z5phhh-6weenz47?file=index.js%3AL14

Code 

<ButtonComponent id="addNew" className="e-btn e-dialog-add" onClick={addClick.bind(this)}>

     const addClick = () => {
        const cardIds = kanbanObj.current.kanbanData.map((obj) => parseInt(obj.Id.replace("Task ", ""), 10));
        const cardCount = Math.max.apply(Math, cardIds) + 1;
        const cardDetails = {
            Id: "Task " + cardCount,
            Status: "Open",
            Priority: "Normal",
            Assignee: "Andrew Fuller",
            Estimate: 0,
            Tags: "",
            Summary: "",
        };
        kanbanObj.current.openDialog("Add", cardDetails);
    };

Query 2: Toggle the Card Header and Content on Every Click

To toggle the card content visibility when clicking a Kanban card, you can use the cardClick event. This event provides the card element, allowing you to control the display of its content. Below is the implementation:

Code 

              <KanbanComponent id="kanban" ref={kanbanObj} keyField="Status" dataSource={data} 
                        cardClick={OnCardClick.bind(this)}
                        cardSettings={{ contentField: "Summary", headerField: "Id" }} dialogSettings={{ template: dialogTemplate.bind(this) }}>
const OnCardClick = (args) => {
    debugger;
    const cardContent = args.element.querySelector('.e-card-content');
    if (cardContent) {
      const currentDisplay = window.getComputedStyle(cardContent).display;
      if (currentDisplay === 'none') {
        cardContent.style.display = 'block';
      } else {
        cardContent.style.display = 'none';
      }
    }
};

Sample - https://stackblitz.com/edit/react-b7z5phhh-6weenz47?file=index.js%3AL14

Regards,

Yaswin Vikhaash