Custom column and card templates not working

[John Ryan]

Hi,

I'm trying to use custom templates for columns and cards but it's not working, it renders them as empy. Here you have my code:

const cardRendered = (args: CardRenderedEventArgs): void => {

    let val: string = (args.data as { [key: string]: Object })

        .Category as string;

    addClass([args.element], val);

  };

  const columnTemplate = () => {

    return (<div>{"test"}</div>)

  };

const cardTemplate = (props: { [key: string]: string }) => {

    return (

      <div className={"card-template"}>

        <div className="e-card-header">

          <div className="e-card-header-caption">

            <div className="e-card-header-title e-tooltip-text">

              {props.Title}

            </div>

          </div>

        </div>

      </div>

    )

  };

<KanbanComponent

      id="kanban"

      cssClass="kanban-overview"

      keyField="Release"

      dataSource={data}

      enableTooltip={true}

      swimlaneSettings={{ keyField: "Capability" }}

      cardSettings={{

          showHeader: false,

          headerField: "Title",

          contentField: "Title",

          template: cardTemplate.bind(this),

      }}

      cardRendered={cardRendered.bind(this)}

    >

      <ColumnsDirective>

        {

          app.Releases?.map(r => {return (

            <ColumnDirective

              headerText={r.Title}

              keyField={r.Idreleases}

              template={columnTemplate}

            />

          )})

        }

      </ColumnsDirective>

    </KanbanComponent>

And here's the rendering:

If I don't use custom templates it works fine.

Than you in advance

[Kokila Poovendran]

Hi John Ryan

We have reviewed your code and attempted to replicate the issue based on the details you provided. However, we were unable to replicate the issue on our end. The templates for columns and cards are rendering correctly in our sample.

Below is the code snippet based on your shared example, which works fine for custom column and card templates:

  // Card template

  const cardTemplate = (props) => {

    return (

      <div className="card-template">

        <div className="e-card-header">

          <div className="e-card-header-caption">

            <div className="e-card-header-title">{props.Title}</div>

          </div>

        </div>

        <div className="e-card-content">

          <div>{props.Capability}</div>

        </div>

      </div>

    );

  };

  return (

    <div className="kanban-control-section">

      <div className="col-lg-12 control-section">

        <div className="control-wrapper">

          <KanbanComponent

            id="kanban"

            cssClass="kanban-overview"

            keyField="Release"

            dataSource={data}

            enableTooltip={true}

            swimlaneSettings={{ keyField: 'Capability' }}

            cardSettings={{

              showHeader: false,

              headerField: 'Title',

              contentField: 'Title',

              template: cardTemplate,

            }}

            cardRendered={cardRendered}

          >

            <ColumnsDirective>

              {releases.map((r) => (

                <ColumnDirective

                  key={r.Idreleases}

                  headerText={r.Title}

                  keyField={r.Idreleases}

                  template={columnTemplate}

                />

              ))}

            </ColumnsDirective>

          </KanbanComponent>

        </div>

      </div>

    </div>

  );

};

export default Default;

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

Could you please confirm whether the issue persists in our sample as well? If the issue occurs, could you share the full code snippet you are using so we can investigate further and provide a more targeted solution?

We look forward to your response.