Michal
Top achievements
Rank 1
Rank 1
Hey there,
I have a question related to Data Grid.
I'm using mobx to store data for Data Grid, and also the store contains some computed values used by Data Grid Columns.
When I use DataGridColumn component as a direct child of DataGrid it works fine, but when I try to extract the column to separate component, the columns don't render properly.
The code above is simplified, but I hope that it is enough to explain the issue. Is there a way to make it work?
I've figured out that CustomDataGridColumn requires displayName = "KendoReactGridColumn", but it still doesn't work. My guess is that is caused by the observer because it wraps the component with the React.memo.
I have a question related to Data Grid.
I'm using mobx to store data for Data Grid, and also the store contains some computed values used by Data Grid Columns.
When I use DataGridColumn component as a direct child of DataGrid it works fine, but when I try to extract the column to separate component, the columns don't render properly.
import { provider, useInstance } from 'react-ioc';
import { observer } from 'mobx-react-lite';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import Store from './store';
const CustomDataGridColumn = observer(() => {
const store = useInstance(Store);
return <GridColumn title={`Title (${store.counter})`} />;
});
const CustomDataGrid = observer(({children}) => {
const store = useInstance(Store);
return (
<Grid data={store.data}>
{children}
</Grid>
);
});
const App = provider(Store)(() => (
<CustomDataGrid>
<CustomDataGridColumn />
</CustomDataGrid>
));The code above is simplified, but I hope that it is enough to explain the issue. Is there a way to make it work?
I've figured out that CustomDataGridColumn requires displayName = "KendoReactGridColumn", but it still doesn't work. My guess is that is caused by the observer because it wraps the component with the React.memo.
1 Answer, 1 is accepted
1
Accepted
Hello,
Thank you for all of the details.
You are correct, we have an internal logic to check for the displayName value of the component in order to separate the different types of child components in the Grid.
It will require setting a displayName to the custom component. Still, if Mobx is making an additional wrap of the component, I can suggest checking with their team if the developer has access to that component in order to add properties.
Regards,
Stefan
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.