This is a migrated thread and some comments may be shown as answers.

Date Grid Column local to the user

5 Answers 93 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ofer
Top achievements
Rank 1
Veteran
Ofer asked on 19 Feb 2020, 09:03 PM

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

Sort by
0
Ofer
Top achievements
Rank 1
Veteran
answered on 19 Feb 2020, 10:50 PM

Figured it out

cell={KendoGridDateCell}

Then

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

0
Silviya
Telerik team
answered on 20 Feb 2020, 03:12 PM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Ofer
Top achievements
Rank 1
Veteran
answered on 20 Feb 2020, 05:05 PM

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?

0
Ofer
Top achievements
Rank 1
Veteran
answered on 20 Feb 2020, 05:10 PM

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

 

0
Silviya
Telerik team
answered on 21 Feb 2020, 08:02 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
General Discussions
Asked by
Ofer
Top achievements
Rank 1
Veteran
Answers by
Ofer
Top achievements
Rank 1
Veteran
Silviya
Telerik team
Share this question
or