Datagrid - Unselect child data grid

[devinbandara]

Currently when you select a datagrid row that has a child grid, the child grid expands when you click on the parent row but if you click on the parent row again, you can not deselect the row and collapse all the child grid rows. The only way to collapse the child grid row is to click on another row.

Can you add a feature that collapses the Child Grid within a selected parent row when you click on the parent row?

[stsrki]

Just hold the CTRL key while clicking on a row. It's a standard way of unselecting the row and it is supported by DataGrid.

[paulosdfigueiredo]

If you really want unselect on click you can just use a SelectedEntity like this in your component.

protected TItem SelectedEntity
{
    get => this.selectedEntity;

    // unselect if it's an entity already selected
    set => this.selectedEntity = (this.selectedEntity != null && this.selectedEntity == value) ? null : value;
}        

[devinbandara]

Just hold the CTRL key while clicking on a row. It's a standard way of unselecting the row and it is supported by DataGrid.

This action unselects the parent grid but does not collapse the child grid. Child grid stays expanded

[stsrki]

Child grid is controlled by DetailRowTrigger handler

Example

DetailRowTrigger="@((item)=>item.Salaries?.Count > 0 && item.Id == selectedEmployee?.Id)"

[StephenOTT]

Just hold the CTRL key while clicking on a row. It's a standard way of unselecting the row and it is supported by DataGrid.

@stsrki does this still work? I am unable to reproduce in the demo.

[stsrki]

@StephenOTT It works, I have just tried the demo in Chrome and Firefox. What browser do you have?

[StephenOTT]

I am on mac and tried with https://bootstrapdemo.blazorise.com/tests/datagrid

Using CTRL plus click on a row (all options turned off on the grid) just produces the browsers context menu.

Tried with latest FF, Chrome, and Safari using OSX latest

[stsrki]

I have no idea how to reproduce it without mac...

[StephenOTT]

To confirm the functionality:

If i were to CTRL+mouse left click Caro in row one, the Detail Row should collapse?

[stsrki]

Yes, it should collapse if it is opened. Or open if it is already collapsed. Basically toggle open states.

[StephenOTT]

Okay yup.. does not seem to work...

x-ref: #2500

[stsrki]

I can only asume on Mac ctrl key is not detected properly. Is it named diferently?

[stsrki]

@StephenOTT Any chance you could clone Blazorise and debug it on Mac? In file Blazorise.DataGrid._BaseDataGridRow there is a HandleSingleSelectClick method. eventArgs.CtrlKey should be true if everything is good.

[StephenOTT]

I think you are running into the OS X system wide CTRL+Click == Right Click. I do not think there is a way to disable it.

The Alt/Option key is usually used as a alternative and you can see it gets picked up:

This is debug with Alt+Click. If i debug with CTRL+Click it does not trigger the breakpoint because the system context menu for the browser appears:

CTRL+Click does this and does not trigger the HandleClick method:

[StephenOTT]

Similar scenarios: https://stackoverflow.com/questions/45438932/ho-do-i-capture-ctrl-click-on-macos-with-d3js

Using the "Command" button: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey

Command+Click on a row currently triggers the HandleClick method, BUT there is no property (MetaKey) to identify that it was pressed.

[stsrki]

How it is usually done on Mac? The select and deselect of items..

[StephenOTT]

I have seen a mix of usage. But If you follow close to how windows works: example: CTRL+W is close tab in a browser. The Mac equiv is Command+W (MetaKey+W)

[GilShalit]

I can confirm this is working fine on Windows

[David-Moreira]

@StephenOTT I honestly don't know MAC very well.. But do you not have this corresponding key? Not the Command, but the Control.

[JanVargovsky]

We have custom logic for (multi)selecting rows in DataGrid and the args.MouseEventArgs.CtrlKey doesn't work, meaning it's false when control is pressed on MAC.

[David-Moreira]

We need to do some digging...any developer around who knows how this is usually handled with a MAC?

Even with js you'd have the same problem right?

[David-Moreira]

Hello guys, We are still working on getting the tools to troubleshoot this Issue. In the meantime it would be great if you could help us. If you own a MAC, could you please visit our demo at : https://megabit.github.io/DemoMetaKey/

Press the Mac's Ctrl Key while clicking the button and send us the log? Thanks!