DataGrid on Focus (click) display Data in dependent grid (Master/Slave datagrid)

[avojacek]

Hi all,
I have 2 Datagrid components (one is master and second slave) to display for example Order headers and Order lines, when one clicks on header row in master datagrid (OnRowFocus) in slave datagrid there will be shown lines from that order. It works (kind of)

• I want to highlight header row in master DataGrid as current row (is there any good way to do that?)
• When I have OnRowFocus implemented in master DataGrid then other clickable elements in row does not work (I have FluentAnchor there) Is there any way how to have both? Clickable elements in rows and OnRowFocus implemented to select current row and display data in slave datagrid.

Thank you a lot.

[vnbaaij]

Hi,

Wrt the click not happening, you might be running in to this issue: #1722 Which is open and we are investigating still
There are examples on the demo site on how you can highight a row by using the RowStyle and RowClass parameters

[avojacek]

That issue is exactly what I'm experiencing. If I do not handle OnRowFocus clicks in row works ok as soon as I implement OnRowFocus it does not handle clicks.
Thank you, i did not find that issue, because I thought that there is something I do wrong way.

Can be row in datagrid hightlighted by hover over too? Or this has to be done using css?

[vnbaaij]

There is nothing in the datagrid code to have hover effect. Has to be done with CSS

[markarnolditpro]

@vnbaaij Regarding hover effect, I was able to implement using CSS like so:

/* apply to Column `Class` property */
.hide {
    display: none;
}

/* apply to DataGrid `RowClass` property */
.datagridrow:hover .hide {
    display: block;
}

However I was unable to get it to work in a scoped style to my page. I had to add above styles directly to app.css. Any idea what that would be? I would prefer scoped styles for this if possible, but works regardless.

[StephenOTT]

@markarnolditpro

For using CSS Isolation.

MyComponent.razor.css:

::deep fluent-data-grid-row.myrowclass:hover {
    cursor: pointer;
    background-color: #c0c0c01f;
}

MyComponent.razor:

<FluentDataGrid RowClass="@((r) => "myrowclass")">

[markarnolditpro]

Thanks for the reply @StephenOTT !