Pass custom props to Grid

3 posts, 0 answers
  1. Doug
    Doug avatar
    6 posts
    Member since:
    Jul 2014

    Posted 03 Jun 2020 Link to this post



    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">



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



  2. Stefan
    Stefan avatar
    3039 posts

    Posted 04 Jun 2020 Link to this post

    Hello, Doug,

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


            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.

    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Doug
    Doug avatar
    6 posts
    Member since:
    Jul 2014

    Posted 08 Jun 2020 in reply to Stefan Link to this post

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