Using Virtualization with Grouping with hooks

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

    Posted 28 Apr 2020 Link to this post

    I am interested in an example  like https://stackblitz.com/edit/react-ynzwm7-thwt8x

    But I want my application to use hooks.

    Can Someone make an example like this with hooks please?

     

    Thank you much

  2. Answer
    Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 29 Apr 2020 Link to this post

    Hello, Ofer,

    I was able to transfer this example to use React Hooks and also added extra functionality to keep the expanded fields inside the state so they are persisted when paging the data:

    https://stackblitz.com/edit/react-2ots26-tzddq5?file=app%2Fmain.jsx

    Also, the ticket title says Virtualization but the example is with paging, is the paging has to be replaced with virtualization or the real requirement is paging with grouping?

    Regards,
    Stefan
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Ofer
    Ofer avatar
    28 posts
    Member since:
    Jul 2019

    Posted 29 Apr 2020 in reply to Stefan Link to this post

    No Stefan I need Virtualization without paging. 

    I was able to take the paging out of your example so I can use it.

    If you could give a hint how to hide the column that is grouped be, that would be perfect.

    Example user drops the "Category Name" on the top, "Category Name" column becomes hidden (The value is in the groups)

     

    Thank you very much

  4. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 30 Apr 2020 Link to this post

    Hello, Ofer,

    This can be done by having a columns collection and only rendering the columns if they are not part of the group's collection in the data state:

          {columns.map((column,index) => {
            if(!isColumnGrouped(column)){
              return <Column field={column.field} key={index} title={column.title}/>
            }
          })}

     

    I modified the example to demonstrate this approach:

    https://stackblitz.com/edit/react-2ots26-1u3hhs?file=app/main.jsx

    Regards,
    Stefan
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  5. Ofer
    Ofer avatar
    28 posts
    Member since:
    Jul 2019

    Posted 30 Apr 2020 in reply to Stefan Link to this post

    Real Cool Thanks
  6. Ofer
    Ofer avatar
    28 posts
    Member since:
    Jul 2019

    Posted 30 Apr 2020 in reply to Stefan Link to this post

    to your example return <Column field={column.field} key={index} title={column.title} filter={column.filter} />

    I added filter={column.filter}  and it works fine in stackblitz because there is no typescript. 

    When I do it in SPFx webpart, I get tslinter to complain that filter is not a string but "Type 'string' is not assignable to type '"boolean" | "date" | "text" | "numeric"'.ts(2322)
    GridColumnProps.d.ts(43, 5): The expected type comes from property 'filter' which is declared here on type 'IntrinsicAttributes & GridColumnProps & { children?: ReactNode; }'"

    Any idea how I should phraze it?

    Thanks

  7. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 01 May 2020 Link to this post

    Hello, Ofer,

    I can confirm that I was able to observe the same behavior in a TypeScript example.

    As a fast workaround, I can suggest using as any:

     <Column field={column.field} key={index} title={column.title} filter={(column.filter as any)}/>;

    We will research it in more details next week as now it is a national holiday and we are short staff.

     

    Regards,
    Stefan
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  8. Ofer
    Ofer avatar
    28 posts
    Member since:
    Jul 2019

    Posted 01 May 2020 in reply to Stefan Link to this post

    Thank you and have a good holiday
  9. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 04 May 2020 Link to this post

    Hello, Ofer,

    Thank you I hope you have a great day as well.

    We have logged this in GitHub in order to be tracked easily:

    https://github.com/telerik/kendo-react/issues/571

    I also updated your Telerik points for bringing this to our attention.

    Regards,
    Stefan
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top