[Solved] Custom Date-Range FilterCell renders incorrectly when two date columns are adjacent

[Bohdan]

Hi,

I am trying to implement in-grid date-range filtering using a custom filterCell in KendoReact Grid.

Context:
I followed the Knowledge Base article:
React Create a Date-Range Filter in the Grid - KendoReact

I adapted the example to my project and used a custom filterCell for date-range filtering.
However, I noticed an issue:

When two or more columns with the same custom date filter cell are adjacent, the filter UI of the neighboring columns is rendered inside the first column's filter cell.

Example:
app.jsx - nodebox - CodeSandbox
When column order is: [text, text, date, date, text] - The filter UI of both date columns is rendered inside the first date column.
When I change the order to: [text, text, date, text, date] - The filters render correctly and independently.

Thank you.
Bohdan

[Yanko]

Hi, Bohdan,

Thank you very much for the provided sample and KB article.

The solution from the KB article is for version 4.5.0 and needs a slight adjustment to be viable in the latest version. The latest version uses the new cells property to provide the custom filter cell, whereas in older versions, a dedicated filterCell prop was used for this purpose. The main difference is that the new cells.filterCell prop gives you access to both the td element and its content, whereas the filterCell gave access only to the content inside the td. Therefore, your custom cell should return the td element with the required props and not just the content:

const BaseDateFilterCell = ({ field, filter, onChange, tdProps }) => {
...
<td {...tdProps}>
      <DatePicker  width="30%" ... />

I updated the provided example to demonstrate the above approach:

• https://codesandbox.io/p/sandbox/vigorous-archimedes-98l89x?file=%2Fapp%2Fapp.jsx%3A15%2C1-15%2C71 

For more information and examples, refer to the following documentation articles:

• Filtering Data Grid Through Custom Filter Cells
• KendoReact Data Grid Custom Cells Overview

And if additional inquiries arise, do not hesitate to ask. I will be happy to help.

Regards,
Yanko
Progress Telerik