1. Home
  2. Forum
  3. Blazor
  4. how to set color for each grid row when grid row knows what color it should be

how to set color for each grid row when grid row knows what color it should be

hello, I have these to color pickers 
               
               
               
               

and I would like to set grids row background-color with StatusType.BackColor and same grids row font color with StatusType.FontColor

i tried something like this but it didn't work

   
       
       
       
           
             
           
       
   
           


    public void RowBound(RowDataBoundEventArgs args)
    {
        _FontColor = args.Data.FontColor;
        _BackColor = args.Data.BackColor;
        StateHasChanged();
        args.Row.AddClass(new string[] { "cellColor" });
    }


11 Replies 1 reply marked as answer
AL Aleqsandre February 5, 2021 07:35 PM UTC

hello, I have these to color pickers 
               
                <SfColorPicker @bind-Value="@StatusType.BackColor"></SfColorPicker>
               
                <SfColorPicker @bind-Value="@StatusType.FontColor"></SfColorPicker>

and I would like to set grids row background-color with StatusType.BackColor and same grids row font color with StatusType.FontColor

i tried something like this but it didn't work

    <SfGrid @ref="this._SfGrid" DataSource="@this._StatusTypeList" AllowSelection="true" AllowSorting="true">
        <GridSelectionSettings Type="SelectionType.Single"></GridSelectionSettings>
        <GridEvents RowSelected="RowSelectHandler" RowDataBound="RowBound" RowDeselected="RowDeSelectHandler" TValue="LibraryServiceReference.StatusType"></GridEvents>
        <GridColumns>
            <GridColumn Field=@nameof(LibraryServiceReference.StatusType.Name) AutoFit="false" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "cellColor" }})">
             
            </GridColumn>
        </GridColumns>
    </SfGrid>
           

<style>
.cellColor{
    background-color: @_BackColor;
    color: @_FontColor;
}
</style>

    public void RowBound(RowDataBoundEventArgs args)
    {
        _FontColor = args.Data.FontColor;
        _BackColor = args.Data.BackColor;
        StateHasChanged();
        args.Row.AddClass(new string[] { "cellColor" });
    }


RN Rahul Narayanasamy Syncfusion Team February 8, 2021 11:41 AM UTC

Hi Aleqsandre, 

Greetings from Syncfusion. 

Query: how to set color for each grid row when grid row knows what color it should be - I would like to set grids row background-color with StatusType.BackColor and same grids row font color with StatusType.FontColor 

We have validated your query and you want to change the change the Grid row background color and font color using color picker(SfColorPicker). Here, we have prepared sample based on your requirement. Find the below code snippets and sample for your reference. 

 
<SfColorPicker @bind-Value="@color"></SfColorPicker> 
<SfColorPicker @bind-Value="@fontcolor"></SfColorPicker> 
 
<SfGrid DataSource="@Orders" EnableHover=false AllowSelection=false Height="280"> 
    <GridEvents TValue="Order" RowDataBound="RowBound"></GridEvents> 
    <GridColumns> 
        . . . 
    </GridColumns> 
</SfGrid> 
 
<style> 
    .rowcolor { 
        background-color: @color;    //for changing the row background color 
    } 
 
    .e-grid .e-rowcell {                              //changed using CSS 
        color: @fontcolor !important;     //for changing the font-color for row content 
    } 
 
</style> 
 
@code { 
    public string color { get; set; } = "#17d317"; 
    public string fontcolor { get; set; } = "#dd2905"; 
    public List<Order> Orders { get; set; } 
 
    . . . 
 
    public void RowBound(RowDataBoundEventArgs<Order> args) 
    {    
        args.Row.AddClass(new string[] { "rowcolor" });   //for changing the row background color 
    } 
} 


Please let us know if you have any concerns. 

Regards, 
Rahul 


AL Aleqsandre February 9, 2021 10:33 AM UTC

Hello, thank you for answer.
but I need to apply color for each grid rows. when I add a new row I want to be able to give it an individual color>
I am uploading sample in which I gave color and background color to each row but I couldn't fill the entire row;


Attachment: Desktop_4d8d90aa.rar

AL Aleqsandre February 12, 2021 11:49 AM UTC

Hello, I am waiting for response, hope you understood my question.

RN Rahul Narayanasamy Syncfusion Team February 15, 2021 01:57 PM UTC

Hi Aleqsandre, 

Thanks for sharing the details. 

Query: I need to apply color for each grid rows. when I add a new row I want to be able to give it an individual color 

We have validated your query and you want to provide individual color to each row while adding the record. Here, we have prepared a sample based on your requirement. We have achieved your requirement by using Microsoft JS interop in RowDataBound event. Find the below code snippets and sample for your reference. 

 
@using Syncfusion.Blazor.Grids 
@using Syncfusion.Blazor.Inputs 
@inject IJSRuntime JSRuntime 
 
<SfColorPicker @bind-Value="@color"></SfColorPicker> 
<SfColorPicker @bind-Value="@fontcolor"></SfColorPicker> 
<SfTextBox @bind-Value="_Name"></SfTextBox> 
<br /> 
<Syncfusion.Blazor.Buttons.SfButton OnClick="SetColor">SetColor</Syncfusion.Blazor.Buttons.SfButton> 
<br /> 
<SfGrid @ref="_Grid" DataSource="@_GridColorPickers" EnableHover=false AllowSelection=false Height="280"> 
    <GridEvents TValue="GridColorPicker" DataBound="Bound" RowDataBound="RowBound"></GridEvents> 
    <GridColumns> 
        <GridColumn Field=@nameof(GridColorPicker.ColorName) HeaderText="ColorName" Width="110"> 
        </GridColumn> 
        <GridColumn Field=@nameof(GridColorPicker.BackColor) HeaderText="ColorName" Width="110"> 
 
        </GridColumn> 
    </GridColumns> 
</SfGrid> 
 
 
@code { 
    SfGrid<GridColorPicker> _Grid; 
    . . . 
 
    public void SetColor() 
    { 
        _GridColorPickers.Add(new GridColorPicker { ColorName = _Name, BackColor = color, FontColor = fontcolor }); 
        _Grid.Refresh(); 
    } 
 
    . . . 
 
    public async Task RowBound(RowDataBoundEventArgs<GridColorPicker> args) 
    { 
        color = args.Data.BackColor; 
        fontcolor = args.Data.FontColor; 
        await Task.Delay(500); 
        await JSRuntime.InvokeAsync<object>("applycolor", color, fontcolor);    //calling interop function for applying the color 
    } 
} 
[Interop.js] 
window.applycolor = function (color, fontColor) { 
    var rowLength = document.querySelectorAll('.e-row').length; 
    if (rowLength > 0) { 
        document.querySelectorAll('.e-row')[rowLength - 1].bgColor = color;    //setting row color 
        var cellLength = document.querySelectorAll('.e-row')[rowLength - 1].cells.length; 
        for (var i = 0; i < cellLength; i++) { 
            document.querySelectorAll('.e-row')[rowLength - 1].cells[i].style.color = fontColor;    //setting text color for content of the cell 
        } 
    } 
}  
 
[_Host.cshtml] 
<head> 
    . . . 
    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" /> 
    <link rel='nofollow' href="css/site.css" rel="stylesheet" /> 
    <script src="~/Interop.js"></script> 
</head> 


Please let us know if you have any concerns. 

Regards, 
Rahul  


AL Aleqsandre February 15, 2021 06:35 PM UTC

Hello, thank you for answer.
Works good but it can't set correct back color, in below photo I used your answered sample and chose backcolor as black but it was set as blue, I guess you can try for yourself . 
please help if possible.

RN Rahul Narayanasamy Syncfusion Team February 18, 2021 12:59 PM UTC

Hi Aleqsandre, 

Thanks for the update. 

Query: Works good but it can't set correct back color, in below photo I used your answered sample and chose backcolor as black but it was set as blue, 

We have validated your query and we are able to reproduce the problem. We suggest you to resolve the problem by changing the below line in Interop.js file. Find the below code snippets and sample for your reference. 

[Interop.js] 
dow.applycolor = function (color, fontColor) { 
    var rowLength = document.querySelectorAll('.e-row').length; 
    if (rowLength > 0) { 
        //document.querySelectorAll('.e-row')[rowLength - 1].bgColor = color;    //remove this line  
        document.querySelectorAll('.e-row')[rowLength - 1].style.backgroundColor = color;    //add this line to resolve the problem 
        var cellLength = document.querySelectorAll('.e-row')[rowLength - 1].cells.length; 
        for (var i = 0; i < cellLength; i++) { 
            document.querySelectorAll('.e-row')[rowLength - 1].cells[i].style.color = fontColor; 
        } 
    } 
}  



Please let us know if you have any concerns. 

Regards, 
Rahul 


AL Aleqsandre February 18, 2021 04:45 PM UTC

hello,
I Have a list which contains lots of rows and this code doesn't work.
is it possible to color grid rows font and back ground from list which contains more than 50 records.

I have page which has two color pikers and grid, when pick colors for font and back ground, I save them to database, than I display them to grid, so if posible I want to color grid from database with list and at the same to be able to add new colors to that list and save back to database, and then load them all to gathter.

RN Rahul Narayanasamy Syncfusion Team February 23, 2021 01:47 PM UTC

Hi Aleqsandre, 

Thanks for the update. 

We have validated your query and modified the sample based on your requirement. Initially, we have rendered rows and applied the corresponding row color. Also, we have provide individual color(color selected from color picker) to each row while adding the record. Find the below code snippets and sample for your reference. 

[Index.razor] 
<SfColorPicker @bind-Value="@color"></SfColorPicker> 
<SfColorPicker @bind-Value="@fontcolor"></SfColorPicker> 
<SfTextBox @bind-Value="_Name"></SfTextBox> 
<br /> 
<Syncfusion.Blazor.Buttons.SfButton OnClick="SetColor">SetColor</Syncfusion.Blazor.Buttons.SfButton> 
<br /> 
<SfGrid @ref="_Grid" DataSource="@_GridColorPickers" EnableHover=false AllowSelection=false Height="280"> 
    <GridEvents TValue="GridColorPicker" RowDataBound="RowBound"></GridEvents> 
    . . . 
</SfGrid> 
 
 
@code { 
    SfGrid<GridColorPicker> _Grid; 
    . ..  
 
    public void SetColor() 
    { 
        _GridColorPickers.Add(new GridColorPicker { Id=_GridColorPickers.Count() +1 , ColorName = _Name, BackColor = color, FontColor = fontcolor }); 
        _Grid.Refresh(); 
    } 
 
    . . . 
 
    public class GridColorPicker 
    { 
        public int Id { get; set; } 
        public string ColorName { get; set; } 
        public string BackColor { get; set; } 
        public string FontColor { get; set; } 
    } 
 
    public async Task RowBound(RowDataBoundEventArgs<GridColorPicker> args) 
    { 
        await Task.Delay(100); 
        await JSRuntime.InvokeAsync<object>("applycolor", args.Data.BackColor, args.Data.FontColor, args.Data.Id); 
    } 
} 

[Interop.js] 
window.applycolor = function (color, fontColor, id) { 
    var rowLength = document.querySelectorAll('.e-row').length; 
    if (rowLength > 0) { 
        var cellLength = document.querySelectorAll('.e-row')[id - 1].cells.length; 
            document.querySelectorAll('.e-row')[id-1].style.backgroundColor = color;    
            for (var i = 0; i < cellLength; i++) { 
                document.querySelectorAll('.e-row')[id - 1].cells[i].style.color = fontColor; 
            } 
    } 
}  
 


Please let us know if you have any concerns. 

Regards, 
Rahul 


AL Aleqsandre February 26, 2021 01:33 PM UTC

Hello, now Its much better, but if you sort the grid it messes up the colors. :(
if possible can you fix it?

RN Rahul Narayanasamy Syncfusion Team March 5, 2021 02:15 PM UTC

Hi Aleqsandre, 

Thanks for the update. 

Query: now Its much better, but if you sort the grid it messes up the colors. :( if possible can you fix it? 

We have validated your query and we are able to reproduce the reported case at our end. We have modified the sample to work correctly while performing sorting operation. Find the below code snippets and sample for your reference. 

 
. . . 
<SfGrid @ref="_Grid" DataSource="@_GridColorPickers" AllowSorting="true" EnableHover=false AllowSelection=false Height="280"> 
    <GridEvents TValue="GridColorPicker"  OnActionComplete="Complete" RowDataBound="RowBound"></GridEvents> 
    <GridColumns> 
        . . . 
    </GridColumns> 
</SfGrid> 
 
 
@code { 
    SfGrid<GridColorPicker> _Grid; 
    . . . 
 
    public async Task refreshGrid() 
    { 
        List<int> ids = new List<int>(); 
        var rec = await _Grid.GetCurrentViewRecords(); 
        for (int i = 0; i < rec.Count(); i++) 
        { 
            ids.Add(rec.IndexOf(rec[i])+1); 
        } 
        for (int i = 0; i < rec.Count(); i++) 
        { 
            await JSRuntime.InvokeAsync<object>("applycolor", rec[i].BackColor, rec[i].FontColor, ids[i]); 
        } 
    } 
 
   .  .. 
 
    public async Task RowBound(RowDataBoundEventArgs<GridColorPicker> args) 
    { 
        await Task.Delay(100); 
        await JSRuntime.InvokeAsync<object>("applycolor", args.Data.BackColor, args.Data.FontColor, args.Data.Id); 
    } 
 
    public async Task Complete(ActionEventArgs<GridColorPicker> args) 
    { 
        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Sorting) 
        { 
            await Task.Delay(300); 
            await refreshGrid(); 
        } 
    } 
} 



Please let us know if you have any concerns. 

Regards, 
Rahul 


Marked as answer
Loader.
Up arrow icon