Date Grid Column local to the user

6 posts, 0 answers
  1. Ofer
    Ofer avatar
    28 posts
    Member since:
    Jul 2019

    Posted 19 Feb 2020 Link to this post

    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

     

     

  2. Ofer
    Ofer avatar
    28 posts
    Member since:
    Jul 2019

    Posted 19 Feb 2020 in reply to Ofer Link to this post

    Figured it out

    cell={KendoGridDateCell}

    Then

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

  3. Silviya
    Admin
    Silviya avatar
    441 posts

    Posted 20 Feb 2020 Link to this post

    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
  4. Ofer
    Ofer avatar
    28 posts
    Member since:
    Jul 2019

    Posted 20 Feb 2020 in reply to Silviya Link to this post

    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?

  5. Ofer
    Ofer avatar
    28 posts
    Member since:
    Jul 2019

    Posted 20 Feb 2020 in reply to Ofer Link to this post

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

     

  6. Silviya
    Admin
    Silviya avatar
    441 posts

    Posted 21 Feb 2020 Link to this post

    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
Back to Top