Change SfGrid cell caption at runtime

[Ben Junior]

I know how to use the SfGrid  QueryCellInfo  GridEvent to apply styles and formats to the cells but I would like to know if it is also possible to change the display caption of the cell without actually changing its underlying value. For example, if there is a column bind to the "Status" field and the field value is "OPEN" I can change its color based on another field value, in this case DueDate and if its value is less than today, the "Status" column background color will change to red, but it would be nice if the text could also change to "OVERDUE", but only for displaying not changing the value of the field.   I have tried the code below but it only change the colors not the text.

     else if (Args.Column.Field == "Status")

     {            DateTime returnDt = Convert.ToDateTime(Args.Data.EndDate);

             if (returnDt.Date < DateTime.Today.Date) { newClass = "colorRaStatusOverdue"; Args.Data.Status = "OverDue"; }

         }

 Args.Cell.AddClass(new string[] { newClass });

[Prathap Senthil]

Hi Ben Junior,

Based on your requirement, we suggest using the Column Template feature to achieve your requirement. Kindly refer to the code snippet and sample below for your reference.

<SfGrid DataSource="@Orders" >

    <GridEvents TValue="Order" QueryCellInfo="OnQueryCellInfo"></GridEvents>

    <GridColumns>

        <GridColumn Field="OrderID" HeaderText="Order ID" Width="120"></GridColumn>

        <GridColumn Field="CustomerID" HeaderText="Customer ID" Width="150"></GridColumn>

        <GridColumn Field="Status" HeaderText="Status" Width="150">

            <Template>

                @{

                    var data = context as Order;

                    DateTime dueDate = Convert.ToDateTime(data.DueDate);

                    if (dueDate < DateTime.Today)

                    {

                        <span>Overdue</span>

                    }

                    else

                    {

                        @data.Status

                    }

                }

            </Template>

        </GridColumn>

        <GridColumn Field="DueDate" HeaderText="Due Date" Width="150" ></GridColumn>

    </GridColumns>

</SfGrid>

 

<style>

    .colorRaStatusOverdue{

        background-color:red;

    }

</style>

Reference:https://blazor.syncfusion.com/documentation/datagrid/column-template

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

Regards,
Prathap Senthil

[Ben Junior]

Hi  Prathap Senthil,

Thanks so much for the code and the speed in reply. Awesome!!!!

Ben Junior

[Prathap Senthil]

Thanks for the update,

We are happy to hear that the provided solution was helpful. We are closing the thread now.