1. Home
  2. Forum
  3. ASP.NET MVC
  4. Change Grid Active Row Selected Color

Change Grid Active Row Selected Color

Hello, I am currently using the Grid with ASP.NET MVC. I use the grid on pages to display a list of data, and one of these columns contains hyperlinks. The problem is that the active row is a deep blue color that conflicts with the unvisited hyperlink color. It makes the hyperlink almost impossible to see. I looked through the CSS files for Syncfusion and attempted to change few but could not get the color to change.


Can someone help me in finding the line of CSS/code that sets what color the Grid's active/selected row is? Again, I am not talking about the normal background color of the grid, I am talking about when a user clicks a specific row and the deep blue color highlights the row.

4 Replies
RN Rahul Narayanasamy Syncfusion Team July 13, 2018 08:58 AM UTC

Hi Eli, 
 
Thanks for contacting Syncfusion support. 
 
Query: Can someone help me in finding the line of CSS/code that sets what color the Grid's active/selected row is? 
 
We have validated your query and you can achieve your requirement by using the below method. You can use below CSS selector to set the color for active/selected row. Please find the below code example for your reference. 
 
[code example] 
    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 
    { 
        col.Field("EmployeeID").HeaderText("Employee Image").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("120").Add(); 
        col.Field("OrderID").IsPrimaryKey(true).HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 
        col.Field("CustomerID").HeaderText("Customer ID").Width("30%").Add(); 
        col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Format("C2").Add(); 
        col.Field("ShipCity").HeaderText("Ship Country").Width("120").Template("#template").Add(); 
 
    }).Width("auto").Height("auto").AllowFiltering(true).Render() 
 
            <script id="template" type="text/x-template"> 
                <a rel='nofollow' href="#">${ShipCity}</a> 
            </script> 
<style> 
    .e-grid td.e-active { 
        background-color: yellow; 
    } 
</style> 

 
Please get back to us if you need further assistance on this. 
 
Regards, 
Rahul Narayanasamy. 


EH Eli Hellmer July 13, 2018 02:40 PM UTC

I could not get this to work correctly. The active row did not change color. 

Here is my code:


   

 @(Html.EJ().Grid("FlatGrid")
                     .Datasource((IEnumerable<object>)ViewBag.datasource)
                     .AllowSorting()
                     .AllowPaging()
                     .PageSettings(p =>
                     p.Template("#pagertemplate").EnableTemplates().ShowDefaults().PageSize(20))
                     .AllowResizeToFit()
                     .AllowTextWrap()
                     .AllowScrolling()
                     .ScrollSettings(s => s.Width("100%"))
                     .AllowFiltering()
                     .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
                     .ClientSideEvents(eve => eve.DataBound("dataBound"))
                     .ClientSideEvents(e => e.ActionComplete("PageRefresh").ActionBegin("onBegin"))
                     .Columns(col =>
                     {
                         col.Field(z => z.RequestNum).HeaderText("Request #").Template("#editlink").Add();
                         col.Field(z => z.Status).HeaderText("Status").Add();
                         col.Field(z => z.Type).HeaderText("Request Type").Add();        
                         col.Field(z => z.ProjectName).HeaderText("Project Name").Width(175).Add();
                         col.Field(z => z.LabShortName).HeaderText("Lab").Add();
                         col.Field(z => z.Requester).HeaderText("Requester").Add();
                         col.Field(z => z.AssignedTo).HeaderText("Assigned To").Add();
                         col.Field(z => z.ReceivedDate).HeaderText("Submitted Date").Add();
                         col.Field(z => z.ProcesHrs).HeaderText("Process/Tech Hrs").Template("#proctech").Add();            
                     }))



EH Eli Hellmer July 13, 2018 02:44 PM UTC

The code before this includes the style tag you provided, but this website will not let me add the code. It clears it out everytime I post it.

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team July 16, 2018 04:16 PM UTC

Hi Eli, 

Query #:- The code before this includes the style tag you provided, but this website will not let me add the code. It clears it out everytime I post it. 

We have checked your reported problem and we are unable to reproduce your issue. Please refer to the sample Link and screenshot:- 


 


We need some additional information details to find the cause of the issue. Please share us the following details. 

1. Reproduce the issue in the above sample and revert us back. 
2.  Exact scenario you need to achieve. 

Regards, 
Farveen sulthana T 


Loader.
Up arrow icon