Add ElementId support for DataGridColumn

[tannguyen16]

Is your feature request related to a problem? Please describe. I am trying to write tests on my DataGrid component and it requires me to click on rows or cells in the DataGrid. However, DataGridColumn and DataGridColumns currently does not support ElementId.

Describe the solution you'd like Add a way to have customized ElementId on DataGridColumn or DataGridColumns or a new way to have ElementId on the row in DataGrid

[David-Moreira]

I'm not sure about having it on the DataGridColumn as that should be applied to every row cell and having duplicate ids should be a nono. Same thing for Row, unless you make it so it's a unique id that's somehow generated for each row (i.e index), you'll have duplicated ids.

I generally just write tests based on querying the grid rows and using the index, do you not find that appropriate?

I could see us generating a data- attribute that would identify each row by index just to make it more clear.

You guys have any other suggestion?

[tannguyen16]

@David-Moreira Hi David, thanks for the response! I agree that having ElementId on DataGridColumn can pose an issue about duplicate ids.

Currently, I do use a specific way to generate unique id for the content inside the cell (i.e DisplayTemplate) to do specific test on them, but that does not help me with the row.

I am curious about "querying the grid rows and using the index" and to use index in general. Would you mind giving me an example on how to do it? I think that would work for my case and help me with writing tests :D

Thank you very much!

[David-Moreira]

I'm guessing you're using something like bUnit, here's examples: Clicking first row:

        var rowsFraction = comp.FindAll( "tbody tr.table-row-selectable" );
        await rowsFraction[0].ClickAsync( new() { Detail = 1 } );

Clicking the 2nd column in the header to sort

        comp.Find( "thead tr th:nth-child(2)" )
            .Click(); // change sort order to descending

These two should give you an idea... you can also just iterate through them, etc...

[David-Moreira]

Also you're free to take a look at the tests we have written for ideas: https://github.com/Megabit/Blazorise/blob/master/Tests/Blazorise.Tests/Components/DataGridComponentTest.cs https://github.com/Megabit/Blazorise/blob/master/Tests/Blazorise.Tests/Components/DataGridDetailRowComponentTest.cs ...

[tannguyen16]

@David-Moreira Great! This is very helpful! I will try it in our case (we are using Selenium for our tests) to see if it works. Thank you very much!

[David-Moreira]

@David-Moreira Great! This is very helpful! I will try it in our case (we are using Selenium for our tests) to see if it works. Thank you very much!

We also have playwright tests if you want to take a look. But yes, the idea is the same, just use selectors.