selected row background color in master details grid

Question

I have a SF master details grid which works fine. In one of your online-samples the selected row in the master grid has a background color when the details open. This does not happen with my master grid, only in the details grid a selected row is highlighted.

How can I set the background color of the selected row in the master grid, before the details table opens?

Thanx, Hartmut

Prathap Senthil · Answer

Hi Hartmut,Before proceeding further with your reported problem kindly
share the below details to validate further at our end.
 Share with us the entire grid code snippet along with the model class.
     
 Please share with us a simple issue reproducible sample.
 Are you facing an issue where selecting the row does not
     apply the row background color?
 Share the screenshot or video demonstration of the issue,
     it will be more useful to us.
 Share with us the NuGet version you have
     used.
The above-requested details will be very helpful for us to
validate the reported query at our end and provide the solution as early as
possible.Regards,
Prathap S

Hartmut · Answer

Dear Prothap,the code of the datagrid is shown below, I hope it is sufficient to answer my question.The question is:when i click on one row of the master grid so that the details grid expands, how can I set or modify the color of the selected row in the master grid?And how can I restor the background when the details grid collapses?@page "/Solution"@page "/Solution/{StudyOrProjectId:long}/{Property}/{StudyOrProjectName}"@using System.Text@using Syncfusion.Blazor.Popups@using myBlazorLab_g.Helpers@using Microsoft.AspNetCore.Components@using Syncfusion.Blazor.Inputs@inject ISolutionService SolutionService@inject IIngredientService IngredientService@inject IJSRuntime Runtime@inject IBuildWhereExpression BuildWhereExpression

@{ // this creates an object based on the data Model and values held in the selected data row var parentSolution = (context as SolutionModel); // use the parent row as a key to query the child data in the database. // The database call is asyn, so we have to wait for it to complete otherwise the datasource won't have updated before the grid is re-drawn GetDetails(parentSolution); }

@code { [Parameter] public long StudyOrProjectId { get; set; } [Parameter] public string StudyOrProjectName { get; set; } = String.Empty; [Parameter] public string Property { get; set; } = String.Empty; private string GridHeaderText { get; set; } = ""; List _solutionModelList = new(); List _solutionUsageList = new(); List _ingredientList = new(); // settings for the grids SfGrid? _parentGrid; SfGrid? _childGrid; SfGrid? _ingredGrid; // settings for the confirm dialog ?? public bool ShowButtons { get; set; } = true; public bool AlertVisibility { get; set; } = false; public bool ConfirmDlgVisible { get; set; } = false; public bool PromptDlgVisible { get; set; } = false; private bool SaveConfirmedFlag { get; set; } = false; // for collapsing all Detail Templates but one SolutionModel? target = new(); protected override async Task OnParametersSetAsync() { _solutionModelList = await SolutionService.GetSolutions(Property, StudyOrProjectId); RefreshList(); } private void RefreshList() { var text = Property.Substring(0, Property.Length - 2); var text2 = text == "Study" ? " A&M " : " "; StringBuilder gridHeaderText = new StringBuilder(); if (StudyOrProjectId == 0) { gridHeaderText.Append("List of solutions used in all "); var text3 = text == "Study" ? "Studies" : "Projects"; gridHeaderText.Append(text3); } else { gridHeaderText.Append("List of solutions used in "); gridHeaderText.Append(text); gridHeaderText.Append(text2); gridHeaderText.Append(StudyOrProjectName); } GridHeaderText = gridHeaderText.ToString(); StateHasChanged(); } // accepts an object of selected row of parent data from the grid and calls the async database. public async void GetDetails(SolutionModel value) { _solutionUsageList = value.SolUsagesModel.ToList(); //var id = _solutionUsageList.First().SolutionId; var id = value.SolutionId; _ingredientList = await IngredientService.GetIngredients(id); } public void SaveDialogOpenedEvent(Syncfusion.Blazor.Popups.BeforeOpenEventArgs args) { // hide the buttons on the main data editing dialog this.ShowButtons = false; } public void SaveDialogClosedEvent(CloseEventArgs args) { // show the buttons on the main ata editing dialog this.ShowButtons = true; } // the user pressed NO on the save Dialog public void SaveDialogNotConfirmed(Object e) { this.AlertVisibility = false; this.ConfirmDlgVisible = false; this.PromptDlgVisible = false; } // the user pressed YES on the save Dialog public void SaveDialogSaveConfirmed(Object e) { this.ConfirmDlgVisible = false; this.SaveConfirmedFlag = true; _parentGrid.EndEditAsync(); //Save the changes to Grid programatically. } public void OnActionBegin(ActionEventArgs Args) { if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Add) { } if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Save) { if (Args.Action == "Add") { //some code.... } else if (!SaveConfirmedFlag) { this.ConfirmDlgVisible = true; Args.Cancel = true; //cancel the save action } } if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Delete) { //some code.... } if (Args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit && SaveConfirmedFlag) { SaveConfirmedFlag = false; } } public void OnActionComplete(ActionEventArgs Args) { if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Save) { var changedData = Args.Data; } } // collaps all Details but one public bool firstrender { get; set; } = true; public async Task DataBound() { if (firstrender) { var dotNetReference = DotNetObjectReference.Create(this); await Runtime.InvokeAsync("detail", dotNetReference); firstrender = false; } } public async Task DetailDataBound(DetailDataBoundEventArgs args) { if (target != null) { if (target == args.Data) { return; } await _parentGrid.ExpandCollapseDetailRowAsync(target); } target = args.Data; } [JSInvokable("DetailCollapse")] public void DetailRowCollapse() { target = null; }}RegardsHartmut

Prathap Senthil · Answer

Based on your requirement, we suggest you use the below CSS customization to achieve your requirements . Kindly refer to the below code snippet and sample for your reference.

<style>

.e-grid .e-gridcontent .e-row .e-detailrowexpand, .e-grid .e-gridcontent .e-row .e-detailrowexpand ~ .e-rowcell {

background-color: aquamarine;

}

</style>

A screenshot of a computer

Description automatically generated

Sample Link: https://blazorplayground.syncfusion.com/embed/hDVgWWKjfJWVBdit?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Hartmut · Answer

Dear Prathap,thank you for your answere. I copied your solution above into my application, but it does not work. I removed all <styles> from my application, but it still did not work. Than I copied the complete razor-page from your solution into my application, and that worked. So I guess something is wrong with my code. I will try to change your code step by step until it has the full functionality of my code, and I will look when the highlighting is lost,Hartmut

Prathap Senthil · Answer

Thanks for the Update,We were unable to reproduce the reported issue.If the issue persists, to assist you further, we
request that you provide us with additional details.Could you please share
     an issue-reproducible sample with duplicate data?
 If possible, kindly
     share with us your attempts to reproduce the reported issue on the
     below-mentioned sample.
Thank you for your cooperation, and we will do our best to
resolve this issue for you as soon as possible.