Using Virtualization with Grouping with hooks

[Ofer]

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

[Stefan]

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

[Ofer]

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

[Stefan]

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

[Ofer]

Real Cool Thanks

[Ofer]

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

[Stefan]

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

[Ofer]

Thank you and have a good holiday

[Stefan]

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