How to display text containing html tags in Kendo react treelist column?

[Satbir]

Hello,

I am trying to display text containing html tags (rich text) in the treelist columns. Can you suggest how to do that? Currently it is showing as a string.

 

Thanks

[Vessy]

Hi, Satbir,

In order to render html content in the cells of the TreeList you will need to create a custom cell and allow the html rendering inside it explicitly. For example, you can use the `dangerouslySetInnerHTML` attribute of a div to achieve that:

const MyCell = (props: TreeListCellProps) => {
  const { dataItem } = props;
  const field = props.field || '';
  const cellData = dataItem[field];
  var wrapper = document.createElement('div');
  wrapper.innerHTML = cellData;
  return (
    <td>
      <div dangerouslySetInnerHTML={{ __html: cellData }} />
    </td>
  );
};

You can test the suggestion above in the following sample (refer the third column):

• https://stackblitz.com/edit/react-cefw9c?file=app%2Fdata.ts,app%2Fmain.tsx,app%2Finterfaces.ts

I hope this will prove helpful but let me know in case I can assist you any further on this matter.

Regards,
Vessy
Progress Telerik