1. Home
  2. Forum
  3. Blazor
  4. Problem when using event QueryCellInfo

Problem when using event QueryCellInfo

Hi,

When I use event QueryCellInfo I get wrong visual appearance. Please look into attached file. Inside is two image:
  • HoverStyle - I mark how look cells
  • Selected style - selected row have only selected color in Command column

Below is code snippet

@code {

private void QueryCellInfoHandler(QueryCellInfoEventArgs<WorkOrderExDto> args)
{
    switch (args.Data.WorkOrder.WorkOrderStatus)
    {
        case 9999:
            args.Cell.AddClass(new string[] { "closed" });
            break;
 
        case 100:
            args.Cell.AddClass(new string[] { "progress" });
            break;
 
        case 500:
            args.Cell.AddClass(new string[] { "finished" });
            break;
    }
}
}

<style>
    .closed {
        color: green;
        background-color: white;
    }
 
    .progress {
        color: blue;
        background-color: white;
    }
 
    .finished {
        color: purple;
        background-color: white;
    }
</style>

What I make wrong?

Thanks in advance,
Kruno


Attachment: GridStyle_dd8cfe07.zip

3 Replies 1 reply marked as answer
VN Vignesh Natarajan Syncfusion Team February 12, 2021 04:11 AM UTC

Hi Krunoslav,  
 
Thanks for contacting Syncfusion support.  
 
Query: “When I use event QueryCellInfo I get wrong visual appearance HoverStyle - I mark how look cell Selected style - selected row have only selected color in Command column” 
 
We have analyzed your query and we are able to reproduce the reported issue at our end also while using your code example. On further validation we found that the reported issue occur due to class name “progress”. Below style is applied to progress class from unknown scss file. Hence the reported issue occur.  
 
 
 
So we suggest you to overcome the reported issue by changing the class name event handler. Since you want to apply styles to row, we suggest you to achieve you requirement using RowDataBound event of Grid instead of QueryCellInfo event. Refer the below code example.  
 
<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Search" })"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowEditOnDblClick="false" AllowDeleting="true"></GridEditSettings> 
    <GridEvents RowDataBound="RowDataHandler" TValue="Order"></GridEvents> 
</SfGrid> 
<style> 
    .e-row.closed .e-rowcell { 
        color: green; 
    } 
    .e-row.progres .e-rowcell { 
        color: blue;  
    } 
    .e-row.finished .e-rowcell { 
        color: purple;      
    } 
</style> 
@code{ 
    public void RowDataHandler(RowDataBoundEventArgs<Order> args) 
    { 
        if (args.Data.Freight < 10) 
        { 
            args.Row.AddClass(new string[] { "closed" }); 
        } 
        else if (args.Data.Freight > 10 && args.Data.Freight < 25) 
        { 
            args.Row.AddClass(new string[] { "progres" }); 
        } 
        else 
        { 
            args.Row.AddClass(new string[] { "finished" }); 
        } 
    } 
 
  
Kindly download the sample from below  
 
 
Refer our UG documentation for your reference 
 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan 


Marked as answer
KR Krunoslav February 13, 2021 09:50 PM UTC

Hi Vignesh,

This works perfectly. Thank you.

Regards,
Kruno

VN Vignesh Natarajan Syncfusion Team February 15, 2021 03:51 AM UTC

Hi Krunoslav,  

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution.  

Kinldy get back to us if you have further queries.  

Regards, 
Vignesh Natarajan 


Loader.
Up arrow icon