.rz-grid-table tr td:last-child:not(.rz-composite-cell):hover {
background-color: #0884ac !important;
}
.rz-grid-table tr td:last-child:not(.rz-composite-cell):focus {
background-color: #00afdb !important;
}
tr:hover {
background-color: #0884ac;
}
tr :focus {
background-color: #00afdb !important;
}
Here on mousehover is working but focus is not working for above radzen classes.
Hi @bhavya,
Not quite sure what you are trying to achieve, but you can change grid row hover/selected colors using these custom properties (css variables), instead of trying to apply specific css overrides:
.rz-grid-table {
--rz-grid-hover-background-color: #0884ac;
--rz-grid-selected-background-color: #00afdb;
}
tried. but no changes.
Hi @yordanov ,
this is my piece code,
...........
</GroupHeaderTemplate>
<Columns>
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[1].ColumnName" Property="@(nameof(QueueItem.Name))" Width="200px" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[1].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[2].ColumnName" Width="200px" Groupable="false" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[2].IsSelected">
<Template Context="queueItem">
<p>
@queueItem.DataAcquisitionEstimatedStartTime.ToLocalTime()
</p>
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[3].ColumnName" Property="RunDuration" Width="200px" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[3].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[4].ColumnName" Width="200px" Property="SampleId" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[4].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[5].ColumnName" Width="200px" Property="Barcode" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[5].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[6].ColumnName" Width="200px" Property="SampleLocation.RackType" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[6].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[7].ColumnName" Width="200px" Property="SampleLocation.RackPosition" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[7].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[8].ColumnName" Width="200px" Property="SampleLocation.PlateType" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[8].IsSelected" />
I just wana select each row on mouse click and row should be highlight with background color and on release of mouse also selected row should highlight with background color.
Hi @yordanov ,
Basically we provide a list of data to Data grid and use Group headr template and declare columns explicitely.
Now for us we need to make background-color: #0884ac; on mouse hover and background-color: #00afdb on selection of the row.
Mouse hover is working for us as expected but on click or on select... back ground color is not changing.
Any help here is very much appreciated.
HI @yordanov ,
as per your suggestions we tried keeping Selectionmode and followed but still no luck. Please find our current code below,
@if (GetBatchState(context.Data.Key ?? "") == DataAcquisitionStates.InProgress)
{
<img src="/running_queue.gif" class="icondesign" />
}
else if ((GetBatchState(context.Data.Key ?? "") == DataAcquisitionStates.Aborted) && (GetBatchState(context.Data.Key ?? "") == DataAcquisitionStates.Waiting))
{
<img src="/waiting.png" class="icondesign" />
}
else if ((GetBatchState(context.Data.Key ?? "") == DataAcquisitionStates.Passed) && (GetBatchState(context.Data.Key ?? "") == DataAcquisitionStates.Failed))
{
<img src="/Failed_queue.png" class="icondesign" />
}
else if (GetBatchState(context.Data.Key ?? "") == DataAcquisitionStates.Passed)
{
<img src="/success_queue.png" class="icondesign" />
}
else if (GetBatchState(context.Data.Key ?? "") == DataAcquisitionStates.Completed)
{
<img src="/success_queue.png" class="icondesign" />
}
else if (GetBatchState(context.Data.Key ?? "") == DataAcquisitionStates.Aborted)
{
<img src="/warning_queue.png" class="icondesign" />
}
else if (GetBatchState(context.Data.Key ?? "") == DataAcquisitionStates.Failed)
{
<img src="/Failed_queue.png" class="icondesign" />
}
else
{
<img src="/waiting.png" class="icondesign" />
}
<text class="batchtitle"> @GetBatchName(context.Data.Key ?? "") - @(context.Data.Count) samples</text>
</GroupHeaderTemplate>
<Columns>
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[0].ColumnName" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[0].IsSelected" Property="DataAcquisitionState" Width="200px">
<Template Context="queueItem">
@if (queueItem.DataAcquisitionState == DataAcquisitionStates.InProgress)
{
<img src="/running_queue.gif" class="icondesign" />
}
else if ((queueItem.DataAcquisitionState == DataAcquisitionStates.Aborted) && (queueItem.DataAcquisitionState == DataAcquisitionStates.Waiting))
{
<img src="/waiting.png" class="icondesign" />
}
else if ((queueItem.DataAcquisitionState == DataAcquisitionStates.Passed) && (queueItem.DataAcquisitionState == DataAcquisitionStates.Failed))
{
<img src="/Failed_queue.png" class="icondesign" />
}
else if (queueItem.DataAcquisitionState == DataAcquisitionStates.Completed ||
queueItem.DataAcquisitionState == DataAcquisitionStates.Passed)
{
<img src="/success_queue.png" class="icondesign" />
}
else if (queueItem.DataAcquisitionState == DataAcquisitionStates.Aborted)
{
<img src="/warning_queue.png" class="icondesign" />
}
else if (queueItem.DataAcquisitionState == DataAcquisitionStates.Failed)
{
<img src="/Failed_queue.png" class="icondesign" />
}
else
{
<img src="/waiting.png" class="icondesign" />
}
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[1].ColumnName" Property="@(nameof(QueueItem.Name))" Width="200px" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[1].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[2].ColumnName" Width="200px" Groupable="false" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[2].IsSelected">
<Template Context="queueItem">
<p>
@queueItem.DataAcquisitionEstimatedStartTime.ToLocalTime()
</p>
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[3].ColumnName" Property="RunDuration" Width="200px" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[3].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[4].ColumnName" Width="200px" Property="SampleId" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[4].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[5].ColumnName" Width="200px" Property="Barcode" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[5].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[6].ColumnName" Width="200px" Property="SampleLocation.RackType" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[6].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[7].ColumnName" Width="200px" Property="SampleLocation.RackPosition" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[7].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[8].ColumnName" Width="200px" Property="SampleLocation.PlateType" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[8].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[9].ColumnName" Width="200px" Property="SampleLocation.PlatePosition" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[9].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[10].ColumnName" Width="200px" Property="SampleLocation.VialOrOtherLocation" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[10].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[11].ColumnName" Property="MSMethodName" Width="200px" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[11].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[12].ColumnName" Property="LCMethodName" Width="200px" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[12].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[13].ColumnName" Width="200px" Property="InjectionVolume" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[13].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[14].ColumnName" Property="DataFileName" Width="200px" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[14].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[15].ColumnName" Width="200px" Property="ScannedBarcode" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[15].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[16].ColumnName" Width="200px" Property="UserName" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[16].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[17].ColumnName" Property="Project.Name" Width="200px" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[17].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[18].ColumnName" Width="200px" Property="FileTransferState" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[18].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[19].ColumnName" Property="ProcessingMethodName" Width="200px" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[19].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[20].ColumnName" Property="ResultsFileName" Width="200px" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[20].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[21].ColumnName" Property="AutoProcessState" Width="200px" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[21].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[22].ColumnName" Width="200px" Property="FlaggingRuleResults.Items" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[22].IsSelected" />
<RadzenDataGridColumn TItem="QueueItem" Title="@queueDisplayColumnViewModel.QueueDisplayColumns[23].ColumnName" Width="200px" Property="RuleTextNotifications.Items" Visible="@queueDisplayColumnViewModel.QueueDisplayColumns[23].IsSelected" />
</Columns>
</RadzenDataGrid>
We tried keeping the css also as you suggested. But still its not working for hover and row click. Only difference what we see from the demo you provided and our implementation is GroupHeaderTemplate.
Requesting your help here.
I don't think the datagrid cells can be focused at all. The :focus selector will never apply.