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

Custom rowRender Locked Columns

3 Answers 598 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Bill
Top achievements
Rank 1
Veteran
Bill asked on 11 Dec 2019, 03:34 PM

I'm in need of a grid where each row has cells with a rowspan. So that the final two or three cells are split into two rows.

Here's an example I've done using rowRender.
https://stackblitz.com/edit/react-hwvage?file=app/main.jsx

I've got the layout I want however I lose the ability to sort, lock columns etc. Is there a better way to accomplish what I'm trying to do?

 

Thanks!


3 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 12 Dec 2019, 07:44 AM

Hello, Bill,

Thank you for your example.

This is possible but requires adding the styles that control the locked columns.

This includes:

- "k-grid-content-sticky" className for the td

- "k-master-row" on the tr

- "trElement.props.children[columnIndex].props.style" on the td:

https://stackblitz.com/edit/react-hwvage-nipmqk?file=app/main.jsx

As I see that there is reordering, please have in mind that this will require manually rearranging the columns after reordering, as we do it automatically, but with a custom row, our rendering is overwritten.

Regards,
Stefan
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
Bill
Top achievements
Rank 1
Veteran
answered on 13 Dec 2019, 02:26 PM
Great thanks. I think I had copy and pasted the reordering, however I would like to possibly be able to sort by clicking on a column header. Is that possible?
1
Stefan
Telerik team
answered on 16 Dec 2019, 06:28 AM

Hello, Bill,

The sorting requires the following setup:

https://www.telerik.com/kendo-react-ui/components/grid/sorting/

I have also added sorting to the previous example:

https://stackblitz.com/edit/react-hwvage-nipmqk?file=app/main.jsx

Regards,
Stefan
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
Bill
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Bill
Top achievements
Rank 1
Veteran
Share this question
or