When a grid is using column renderers and a search is made using the SearchFeature, the grid displays a string which looks like pure HTML.
Example code:
import React, { ReactElement, useRef, useState } from 'react';
import { BryntumGrid } from '@bryntum/grid-react';
const MyGrid = () => {
const grid = useRef(null);
const [query, setQuery] = useState('');
const data = [
{ id: 1, username: 'User 1' },
{ id: 2, username: 'User 2' },
{ id: 3, username: 'User 3' },
{ id: 4, username: 'User 4' },
{ id: 5, username: 'User 5' },
];
const columns = [
{ field: 'id', text: 'Id', type: 'tree' },
{ field: 'username', text: 'Username', renderer: (data) => {
return <strong>{data.value}</strong>;
} },
];
function search (e) {
setQuery(e.target.value);
grid.current.gridInstance.features.search.search(e.target.value);
}
return (
<>
<input type="text" value={query} onChange={search} />
<BryntumGrid
height={600}
ref={grid}
data={data}
columns={columns}
searchFeature
treeFeature
/>
</>
);
};
export default MyGrid;To reproduce:
- Type a character in the search input which matches a column with a column renderer.
- Note that the grid displays raw HTML, in the form of:
username2" class="b-react-portal-container">
A side note: How can I test this type of examples which contain React components in the example page?
