Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #112986
    linda05
    Participant

    Is Smart Kanban compatible with routing in JavaScript? How to maintain Kanban state across page navigations?

    #113002
    Markov
    Keymaster

    Hi,

    Yes, this is possible.

    Example with React + React Router + Redux

    
    import { Kanban } from "smart-webcomponents-react/kanban";
    import { useSelector, useDispatch } from "react-redux";
    import { setCards, setColumnFilter } from "./kanbanSlice";
    import { useEffect } from "react";
    
    export default function KanbanPage() {
      const dispatch = useDispatch();
      const cards = useSelector(state => state.kanban.cards);
      const filter = useSelector(state => state.kanban.columnFilter);
    
      // Save state to Redux when card changes
      const handleChange = (event) => {
        const { type, data } = event.detail;
        if (type === "update" || type === "add" || type === "delete") {
          dispatch(setCards(data));
        }
      };
    
      return (
        <Kanban
          dataSource={cards}
          columnProperty="status"
          columns={[
            { label: "To Do", dataField: "todo" },
            { label: "In Progress", dataField: "inProgress" },
            { label: "Done", dataField: "done" },
          ]}
          onChange={handleChange}
        />
      );
    }

    The idea is:

    Data persistence: Kanban’s dataSource holds all cards; filters or column settings can also be tracked.
    State storage options: Redux, Vuex, or React Context.
    Local storage: Store JSON data in localStorage.

    On navigation:

    Save the current state and restore the state when the Kanban component is mounted again

    Best regards,
    Markov

    Smart UI Team
    https://www.htmlelements.com/

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.