OfficeDev/office-ui-fabric-core

DetailsCard: Items data with html tag. How to render

Closed this issue · 3 comments

komal4364 commented

Hi,
I am using office-ui-fabric-core + React. We are detailscard component, which is used to display the items in list.
The data is received from the REST API Call, Some of the column data, has html tags associated with it.
We want to show user only the content in html tags, not html tags, and highlight the text in html.
How to handle that in DetailsCard Component.

In angular, this can be solved using [innerHTML]="data" (Ref: https://stackoverflow.com/questions/34936027/angular-2-how-do-you-render-html-from-a-json-response-without-displaying-the-ta/34937279 )
Any inputs are appreciated. Thanks.

mikewheaton commented

You may be looking for the Office UI Fabric React repo, although I'm not aware of any component there called DetailsCard. Could you maybe link to a demo or show some code?

komal4364 commented

mikewheaton.
Sorry, I was using DetailsList, not DetailsCard.
The following is the example I referred. In that, the sortedItems has column data which has html tags in it.
https://github.com/OfficeDev/office-ui-fabric-react/blob/2ce6c5ac3ccf4e62d4866841317b4aa55b8fb541/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx

komal4364 commented

I followed the issue on office-ui-fabric-react. Got it fixed: Reference for the issue: microsoft/fluentui#7535

  • 👍1