1 Answer, 1 is accepted
Hi Lucien,
Thank you for reaching out to us.
Currently, the footerCell of the KendoReact Grid is rendered in a footer cell corresponding to the column and you need to return a TD element that will be added to the TR element for the footer. We do however have a feature request for enabling colspan for footer cells in the link below:
You can give a vote for the item to increase its priority.
Meanwhile, the only solution that we can suggest is to use the rowRender and add additional TR elements after the data items (instead of using the footer cell):
Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Hi Konstantin,
Thanks for the help. I think rowRender works for us for now.
How ever, I tried to add some styles but failed. Would you please tell me how to do so?
https://stackblitz.com/edit/react-w5dxgo-dqybqr?file=app/main.jsx
I tried several ways, but mainly I followed this guide :
https://www.telerik.com/kendo-react-ui/components/grid/styling/
Thank you !
Hi Lucien,
If you want to add the custom styles to the TR elements that you are adding within the rowRender, you can add the styles directly to the custom content or add class names that you can then use as selectors to customize those rows with CSS:
Hope this helps.
Rank 1
Iron
Hi Konstantin,
I tried this before. My primary concern is that this way doesn't work for the border and for the :hover.
I mainly want to add or hide borders in each row or even in specific cells (you can see there's a border-left shown in the row2), and change the background color when hovered.
Is there other way to realize it ?
https://stackblitz.com/edit/react-w5dxgo-vjwzue?file=index.html
Since the new rows are part of the Grid structure, styles that come from the theme will be applied not only to the TR elements, but to the TD elements and the inner content as well. In order to override the styles from the Grid you can inspect the elements that you want to customize and see which selectors you can use to change the styles. Also, keep in mind that you will either have to use higher specificity for the CSS selector or use "!important":
Let me know if further questions arise.
Rank 1
Iron
Hi Konstantin,
I just bumped into a new problem.
What if I want to add conditional rendering CSS while maintaining my colspanned row ?
Since both of them using rowRender, I'm not quite sure how to put these two together ...
Please see my example code :
https://stackblitz.com/edit/react-w5dxgo-s25xsi?file=app/main.jsx
Thank you so much!
Hi Lucien,
You just have to add condition for the return of the main rows, based on the dataIndex:
Hope this helps.