Date Grid Column local to the user

[Ofer]

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

 

 

[Ofer]

Figured it out

cell={KendoGridDateCell}

Then

const KendoGridDateCell = (props) => {
    const value = props.dataItem[props.field];
    return (
        <td> 
          {formatDate(new Date(value), "d")}
        </td>
    );
}

[Silviya]

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

[Ofer]

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?

[Ofer]

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
  };

 

[Silviya]

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