or
1 answer
281 views
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.
Stefan
Telerik team
answered
on
18 Feb 2022
1 answer
827 views
how to use click outside in dialog, please give an example
Konstantin Dikov
Telerik team
answered
on
17 Feb 2022
1 answer
543 views
I am trying to stop the NumericTextBox Scroll Wheel from changing the value in the Text Box.
Stefan
Telerik team
answered
on
16 Feb 2022
2 answers
783 views
Hello, I have a problem when using DatePicker in the dialog. In the small height screen devices, the DatePicker does not show fully. Please help me if you know how to fix it, thanks!
Khan
Top achievements
Rank 1
Iron
Rank 1
Iron
updated answer
on
16 Feb 2022
1 answer
115 views
I'm using react kendo dialog but why am I getting a dark background screen, even though if I inspect the element style of kendo react it's correct.
Please help with the solution
Please help with the solution
Stefan
Telerik team
answered
on
16 Feb 2022
1 answer
110 views
I'm looking for a usable pattern for putting a <Form> in a <Dialog>. the Submit button should be in the <DialogActionsBar> but I'm not sure how to get the Form's `valid` state outside the form...
Ideally you could do:
<Dialog>
<Form render={({valid}) => {
return (
<FormElement>
... some form inputs here ...
<DialogActionButtons>
<Button type="submit" disabled={valid}>Submit</button>
</DialogActionButtons>
</FormElement>
);
}}
/>
</Dialog>
But of course that dos not work because the <DialogActionButtons> ends up being at the wrong place in the DOMso the styling doesn't work right.
-----
You can get the submit button working correctly by using the standard HTML `form` attribute on the `button` like this:
<Dialog>
<Form render={({valid}) => {
return (
<FormElement id="formId">
... some form inputs here ...
</FormElement>
);
}}
/>
<DialogActionButtons>
<Button type="submit" form="formId" disabled={???}>Submit</button>
</DialogActionButtons>
</Dialog>
But now there is no way to get the `valid` form prop out to the Button's disabled prop.
-----
You may think to do:
const [formValid, setFormValid] = React.useState(false);
<Dialog>
<Form render={({valid}) => {
setFormValid(valid);
return (
<FormElement id="formId">
... some form inputs here ...
</FormElement>
);
}}
/>
<DialogActionButtons>
<Button type="submit" form="formId" disabled={formValid}>Submit</button>
</DialogActionButtons>
</Dialog>
but this is technically not valid and will produce a warning/error from React:
""
Is there a known pattern for making this work
1 answer
104 views
I want to add a GridColumn with custom field value. I tried creating a html return in a method as a field value but was unsuccessful.
I want to add the Action column and want to have a clickable link as a field.
I want to have a clickable link in the Action column.
Stefan
Telerik team
answered
on
15 Feb 2022
1 answer
1.6K+ views
Hi Team,
I have a upload scenario, where I need to import a data from file type like .xlsx,.xlsm.. and do a validation and bind a data to kendo react grid directly, Do we have a inbuilt import function in kendo react grid ? can you please help on that would be helpful.
Note: No need to save a data in any server, after the validation, data will be saved from grid.
Regards,
Arun
Stefan
Telerik team
answered
on
15 Feb 2022
1 answer
115 views
The full week is always from Sunday to Saturday
https://www.telerik.com/kendo-react-ui/components/scheduler/views/week/
Stefan
Telerik team
answered
on
14 Feb 2022
1 answer
100 views
Hello.
Is there way to use Dropdownlists in filters in the Column Menu in GridColumnMenuFilter? Similar to Jquery? Filter menu customization in jQuery Grid Widget Demo | Kendo UI for jQuery (telerik.com). So that Dropdownlist datasources can be key-text objects.
I read this post: DropDownList as filter not working inside column menu in KendoReact | Telerik Forums. But I need all the functionality, with two dropdowns and logic (and / or.)
Well thank you.
