Pass custom props to Grid

[Doug]

Hello.

 

We are testing with selenium and jest and the pattern we use to identify elements is through the use of data-* attributes.   We are trying to follow this same pattern with the Kendo React components but, at least for the Grid component so far, any custom props that we pass in are ignored by the component. From a design pattern perspective I totally understand why this would happen but I am wondering if there is some way to achieve what is described below:

 

React Component

<Grid className="grid" data={data} data-testName="reactGrid" ...> ... </Grid>

Rendered Output

<div class="k-grid" data-testName="reactGrid">

...data...

</div>

 

Reading through the API documentation I couldn't seem to find anything.  

 

Thanks!

[Stefan]

Hello, Doug,

Currently, this can be done using the ref of the component to attach any custom attributes:

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

 

        ref={ref => {
          if (ref) {
            let gridElement = ref.vs.container.closest(".k-grid");
            gridElement.setAttribute('data-testName', 'reactGrid')
          }
        }}

 

If this does not work in selenium or jest, I can recommend using classNames. I do understand that this is different from the used pattern, but if we set all passed attributes to the Grid automatically, this can cause unexpected issues.

Regards,
Stefan
Progress Telerik

[Doug]

Thank you!  That did exactly what I needed it to do.