I have a column whose data comes in UTC format and value from the server. example 2020-02-19T22:11:20Z
I use
<GridColumn field=
"DueDateTime"
title=
"Due"
width=
"200px"
filter=
"date"
format=
"{0:D}"
/>
But it still shows the source data and format
In Kendo jquery I could write a function to do the work for me.
How can I do it with Kendo React?
Thanks
5 Answers, 1 is accepted
Figured it out
cell={KendoGridDateCell}
Then
const KendoGridDateCell = (props) => {
const value = props.dataItem[props.field];
return (
<td>
{formatDate(new Date(value), "d")}
</td>
);
}
Hello Ofer,
I'm glad to hear that the issue is resolved.
In addition, we would like to thank you for sharing the solution as it might help our users if they hit the same case.
Best Regards,
Silviya
Progress Telerik
But now I have another issue with Grid.
In your example at https://www.telerik.com/kendo-react-ui/components/grid/advanced-features/detail/
The detail={DetailComponent} expandField="expanded" onExpandChange={this.expandChange} refers to :
expandChange = (event) => { event.dataItem.expanded = !event.dataItem.expanded;this.forceUpdate();} in the class
I am not using classes at all because I am using hooks.
I tried :
const useForceUpdate = () => React.useState()[1];
const forceUpdate = useForceUpdate();
const expandChange = (event) => {
event.dataItem.expanded = !event.dataItem.expanded;
forceUpdate; // this.forceUpdate();
};
there is no error but I do not see the {DetailComponent}
const DetailComponent = (props) => {
return (
<section>
<p><strong>In Stock:</strong> units</p>
<p><strong>On Order:</strong> units</p>
<p><strong>Reorder Level:</strong> units</p>
<p><strong>Discontinued:</strong> </p>
<p><strong>Category:</strong> Hello</p>
</section>
);
};
Can you point me to a hook example for that?
I got it. it is super simple
I have
const [count, setCount] = React.useState(0); //from other experiment
const expandChange = (event) => {
event.dataItem.expanded = !event.dataItem.expanded;
setCount(count + 1) //forces an Update like this.forceUpdate(); the count is not important
};
Hi Ofer,
You are correct. Using React hooks, you can call useState() in your component function. You can use the setter function to update the value returned, and doing so, it will force your function component to re-render, just like forceUpdate does.
Best Regards,
Silviya
Progress Telerik