Our flexible Kanban board for managing tasks with drag drop


Post by yingtao »

I want use React component to show task.I find doc has "Using simple inline JSX" and "Using a custom React component",I use it But it don't show expected effect.

<BryntumTaskBoard
        ref={taskBoardRef}
        columns={[
          {
            id: "todo",
            text: "TODO1",
            hidden: false,
            cellCls: "todo",
            // Using custom React component
            renderer: ({ record }: any) => (
              <div
                style={{
                  display: "block",
                  color: "red",
                  background: "red",
                  width: 200,
                  height: 200,
                }}
              >
                yingtao
              </div>
            ),
          },
        ]}
        {...taskBoardConfig}
      />

First, “ renderer” is not take effect. Then, I need custom task not columns.Becausein my project, many React Component is finished, it's very complex.

Image

Last edited by yingtao on Wed May 11, 2022 9:23 am, edited 1 time in total.

Post by alex.l »

Hi yingtao,

Please share your runnable app here, we need more context to find the reason. You can use react components inside task element, but not instead of task element. It's not supported yet.

Then, I need custom task not columns.Becausein my project, many React Component is finished, it's very complex.

Not sure I got it. Do you mean you need to hide a column with tasks that have some specific status?

All the best,
Alex


Post by yingtao »

Thank you for you answer. I mean how can I use react components inside task element.(You can Ignore the question of columns)


Post by alex.l »

After deep check we've found that it's a mistake in our documentation. TaskBoard doesn't support JSX components, as well as renderer method for columns, this part has been mistakenly added from Grid component.

Here is a high-prio ticket to fix that and update our React demo with an example of using React components https://github.com/bryntum/support/issues/4600

For now there is a way to use react components inside task HTML element if you convert react component to web component. Correct method to return it is https://bryntum.com/docs/taskboard/api/TaskBoard/view/TaskBoardBase#config-taskRenderer

Here is docs and guides about WebComponents
https://levelup.gitconnected.com/convert-existing-react-components-intowebcomponents-2b33b842ff9a
https://reactjs.org/docs/web-components.html
https://stackoverflow.com/questions/66970860/creating-pure-web-component-from-react-components

All the best,
Alex


Post by yingtao »

Web Component has incompatibility problem. So can you support React Component?It is very necessary to us


Post by johan.isaksson »

Unfortunately adding proper support for using React components on cards will take a while. I can make no promises about when it will be done at this point.

Meanwhile I recommend listening for the https://bryntum.com/docs/taskboard/api/TaskBoard/view/TaskBoard#event-renderTask event on TaskBoard. It is fired when a card's element is updated in DOM. In a listener you can access the card element and use a portal to render a React component to it.

Hope that helps!

Best regards,
Johan Isaksson

Post by jeanphi »


Post Reply