1. Home
  2. Forum
  3. Blazor
  4. Grid CSS - highlight row selected

Grid CSS - highlight row selected

How do I change the CSS or properties of the grid component so that a selected row is highlighted in a different color?

This is the CSS overrides I have as well as the HTML markup:

.e-grid .e-headercell {
    background-color: #EBEBEB !important;
    color: #000000 !important;
    height: 20px !important;
}

    .e-grid .e-headercell:hover {
        background-color: #404055 !important;
        color: #fff !important;
    }

    .e-grid .e-headercell:active {
        background-color: #CCCCCC;
    }

.e-grid .e-gridcontent .e-table .e-rowcell {
    background-color: #F4F3F3;
}

<SfGrid DataSource="@model.AgencyProducts" EnableVirtualization="true" TValue="AgencyProduct" AllowSelection="true" AllowSorting="true" AllowReordering="true" AllowResizing="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Save", "Cancel" })">
<GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Single"></GridSelectionSettings>
<GridEditSettings AllowEditing="true" AllowEditOnDblClick="true" AllowNextRowEdit="true" AllowAdding="true" AllowDeleting="true" NewRowPosition="Syncfusion.Blazor.Grids.NewRowPosition.Bottom" ShowDeleteConfirmDialog="true"></GridEditSettings>
<GridEvents TValue="AgencyProduct" OnActionComplete="OnActionComplete" />
<GridColumns>
<GridColumn Field=@nameof(AgencyProduct.Id) HeaderText="Id" IsPrimaryKey="true" IsIdentity="true" Visible="false" AutoFit="true"></GridColumn>
<GridColumn Field=@nameof(AgencyProduct.Name) HeaderText="Product" AutoFit="true" DataSource="@agencyProducts">
<EditTemplate Context="ap">
<div class="btn-container">
<SfDropDownList TItem="Product" TValue="string" Placeholder="Select a product" DataSource="@products" AutoFit="true">
<DropDownListFieldSettings Value="Id" Text="Name"></DropDownListFieldSettings>
</SfDropDownList>
</div>
</EditTemplate>
</GridColumn>
<GridColumn Field=@nameof(AgencyProduct.ConnectOnHand) HeaderText="Connect On Hand*" AutoFit="true" AllowEditing="false"></GridColumn>
<GridColumn Field=@nameof(AgencyProduct.OrderQuantity) HeaderText="Order Quantity" AutoFit="true"></GridColumn>
<GridColumn Field=@nameof(AgencyProduct.LotCodes) HeaderText="Lot Codes" AutoFit="true"></GridColumn>
<GridColumn Field=@nameof(AgencyProduct.PalletSpaces) HeaderText="Pallet Spaces" AutoFit="true"></GridColumn>
</GridColumns>
</SfGrid>


22 Replies 1 reply marked as answer
RS Renjith Singh Rajendran Syncfusion Team March 24, 2021 11:19 AM UTC

Hi Andy, 

Greetings from Syncfusion support. 

We suggest you to add the below style in your application to achieve this requirement. 

 
<style> 
    .e-grid .e-rowcell.e-selectionbackground{ 
        background-color: aqua !important; 
    } 
    ... 
</style> 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


AR Andy Richard March 24, 2021 12:47 PM UTC

The background color still doesn't change with the CSS you suggested.

RN Rahul Narayanasamy Syncfusion Team March 25, 2021 02:18 PM UTC

Hi Andy, 

Query: The background color still doesn't change with the CSS you suggested. 

We have validated your query and we are able to change the selected row color using the previously provided suggestion. Find the below screenshot and sample for your reference. 

 


If you are still facing the problem, then could you please share the below details. It will be helpful to validate and provide a better solution. 

  • Reproduce the problem in the provided sample and revert back to us.
  • Share a simple sample which you are tried at your end.
  • Share the CSS codes.

Regards, 
Rahul 


Marked as answer
AR Andy Richard March 25, 2021 04:21 PM UTC

That worked. I mistakenly put the selectionbackground css in the wrong place in the stylesheet. It's all working now. Thank you.

RN Rahul Narayanasamy Syncfusion Team March 26, 2021 05:25 AM UTC

Hi Andy, 
 
Thanks for the update. 
 
We are happy to hear that the provided solution was helpful to achieve your requirement. 
 
Please get back to us if you need further assistance. 
 
Regards, 
Rahul  


GP Gerald Peng August 22, 2022 05:45 PM UTC

Hi Syncfusion Team,


Thanks for this solution. However, is there a way to apply the background color to the edited row?


Gerald


NP Naveen Palanivel Syncfusion Team August 24, 2022 03:30 AM UTC

Hi Gerald ,


Sorry for the Inconvenience.


We are currently Validating  the reported query at our end and we will update the further details within one day(Aug 24, 2022). Until then we appreciate your patience.


Regards,

Naveen Palanivel


NP Naveen Palanivel Syncfusion Team August 24, 2022 05:57 PM UTC

Hi Gerald,


We checked your query and achieve your requirement after row is edited , we give color to the edited row using OnActionBegin and RowDataBound event. We prepared sample and attached  in this ticket, kindly refer the snippet code and attached sample  for your reference


   public void ActionBeginHandler(ActionEventArgs<Order> args)

    {

        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save)

        {

            EditedRecordValue.Add(args.Data.OrderID);

        }

 

    }

    public void RowDataBoundHandler(RowDataBoundEventArgs<Order> args)

    {

          for(int i = 0; i <EditedRecordValue.Count; i++)

        {

               if (EditedRecordValue[i].Value == args.Data.OrderID)

        {

            args.Row.AddClass(new string[] { "EditAfter" });

        }

 

 

         }

            

      

        

    }



Please get back to us if you need further assistance.



Regards,

Naveen Palanivel


Attachment: BlazorAppgrid_96791bfa.zip

GP Gerald Peng August 24, 2022 09:26 PM UTC

Hi Naveen,


Sorry - I think I need to clarify.


I only want the row currently being edited to have a background colour. So:


  1. No row selected - default background colour
  2. Row selected and put into edit mode, OR row added and still in edit mode - change the background colour to aqua
  3. Row saved, or edit cancelled - change the background colour back to default background  colour.

How would be the best way to achieve this?

Gerald.

NP Naveen Palanivel Syncfusion Team August 25, 2022 05:32 PM UTC


Hi Gerald


Thanks for the Update


We checked your query when the row is in editing state to change background color of the row . we achieved your requirement by given background color to the class(  .e-grid .e-row.e-editedrow .e-gridform tr). Please refer the snippet code and attached sample for your reference.


<style>

 

    .e-grid .e-row.e-editedrow .e-gridform tr {

 

    background-color:aqua;

}

 

  

</style>


Please get back to us if you need further assistance.



Regards,

Naveen Palanivel


Attachment: BackGroundColor_32b0dedb.zip

GP Gerald Peng August 26, 2022 04:08 AM UTC

Hi Naveen,


That worked great! Thank you!


Gerald.


GP Gerald Peng August 27, 2022 02:08 AM UTC

Hi Naveen,


Sorry - one more question. For an added row under edit, how would we apply the same color? Your code above works for existing rows that are being edited, but not for a new row being edited. Thanks!


Gerald


NP Naveen Palanivel Syncfusion Team August 29, 2022 12:54 PM UTC

Hi Gerald,


Thanks for the Update


We checked your query when the row is in editing state and new row is added in editing state to change background color of the row . we achieved your requirement by given background color to the class(  .e-grid .e-row.e-editedrow .e-gridform tr &&  .e-grid .e-row.e-addedrow .e-gridform tr ). Please refer the snippet code and attached sample for your reference.


<style>

 

    .e-grid .e-row.e-editedrow .e-gridform tr {

 

    background-color:aqua;

}

    .e-grid .e-row.e-addedrow .e-gridform tr {

 

    background-color:aqua;

}

 

 

</style>


Please get back to us if you need further assistance.


Regards,

Naveen Palanivel


GP Gerald Peng August 29, 2022 04:25 PM UTC

Hi Naveen,


That works well. Thank for your help. Much appreciated.


Gerald


GP Gerald Peng replied to Naveen Palanivel August 29, 2022 06:17 PM UTC

Sorry - one more question - 


For the CSS code - is there a way to apply to all pages that consume the Syncfusion Grid? Currently this is added to each razor page with a data grid:


    <style type="text/css" class="cssStyles">

    .warning {

        background-color: yellow;

    }


    .error {

        background-color: red;

    }

    .e-grid .e-rowcell.e-selectionbackground {

        background-color: aqua !important;

    }

    .e-grid .e-row.e-editedrow .e-gridform tr {

        background-color:aqua !important;

    }

    .e-grid .e-row.e-addedrow .e-gridform tr {

        background-color: aqua !important;

    }

    </style>

I tried adding the css elements to site css, but it still takes the default syncfusion colour scheme.


T


KG Keerthana Ganesan Syncfusion Team August 30, 2022 04:03 PM UTC

Hi Gerald,

Welcome from Syncfusion support.

We have analyzed your query and we suggest you add the CSS style code in the site.css file to apply to all pages that consume the Syncfusion Grid. We have attached the screenshot of the code and output based on your requirement. Kindly refer to the attached screenshot for your reference.

Kindly get back to us if you have any further queries.

Regards,

Keerthana.


Attachment: Site_6317a341.zip

GP Gerald Peng September 2, 2022 11:59 AM UTC

Thanks again for your help.


One (hopefully last) question - if the grid is in batch mode (not in-line mode, which the above works well), how do I colour the row being edited? Thanks again!


G


NP Naveen Palanivel Syncfusion Team September 5, 2022 05:15 PM UTC

Hi Gerald,


We checked your query when the row is in batch mode editing state to change background color of the edited cell . we achieved your requirement by given background color to the class (.e-grid .e-editedbatchcell.e-rowcell .e-gridform).

Please refer the snippet code for your reference.


.e-grid .e-editedbatchcell.e-rowcell .e-gridform{

    background-color:aqua;

}


Please get back to us if you need further assistance.


Regards,

Naveen Palanivel


GP Gerald Peng September 5, 2022 08:31 PM UTC

Hi Naveen,


Thank you - is it possible to do change color of the whole row that the edited cell is located?


G


NP Naveen Palanivel Syncfusion Team September 7, 2022 12:03 AM UTC

Hi Gerald,


We checked your query and we like to inform that when we try to edit In batch edit mode. when you double-click on the datagrid , the target cell changes to edit state in batch mode. So it only possible to color to the target cell in Batch mode edit.


Kindly get back to us if you have any further queries.


Regards,

Naveen Palanivel


GP Gerald Peng September 7, 2022 03:53 PM UTC

Thanks Naveen for your help.


Gerald


NP Naveen Palanivel Syncfusion Team September 8, 2022 07:25 PM UTC

Hi Gerald,


Welcome


Please get back to us if you need further assistance.


Regards,

Naveen Palanivel.


Loader.
Up arrow icon