We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Setting format on individual rows

Hello,

I have a DataGrid which has a number of rows and primarily shows numbers in in the format of currency. So I have set the Format="C0" for all columns so these numbers are in the correct format.

I have one row that needs to show the numbers as a percentage. Is there any way to set the format of one row to Format="P1". I have looked through RowDataBound but don't see any way to do that.


Thanks


3 Replies

PS Prathap Senthil Syncfusion Team November 15, 2022 03:54 PM UTC

Hi Matthew,


Greetings from Syncfusion support


We suggest using a column template in Grid. so that your requirement can be archived. Kindly refer to the code snippet and UG documentation below for more information.


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


<SfGrid DataSource="@Orders" Height="315">

<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight"  TextAlign="TextAlign.Right" Width="120">

             <Template>

                @{

                    var Orders = (context as Order);

                    if(Orders.OrderID == 1001)

                    {

                        Var a @Orders.Freight;

                        // Here, you can customize your code.

                    }

                    else

                    {

                        @Orders.Freight;

                    }

                }

            </Template>

        </GridColumn>

</SfGrid>

 


Regards,

Prathap S



MA Matthew November 16, 2022 11:57 PM UTC

Hey Prathap,


Thanks I appreciate the response but I'm still struggling to understand how this lets me change the formatting of individual rows or cells. 


This is the code I have for the SFGrid:

<SfGrid DataSource="@CalculationsListObj" @ref="CalculationsGridObj" EnableAdaptiveUI="true" EnableAutoFill="true">

<GridEvents TValue="System.Dynamic.ExpandoObject" RowDataBound="CalculationsRowDataBound"></GridEvents>

<GridColumns>

    <GridColumn Field="Name" HeaderText="" IsPrimaryKey="true" TextAlign="TextAlign.Left" AllowEditing="false" AutoFit="true" ></GridColumn>

        <GridColumn Field="Column1" HeaderText="Year0" TextAlign="TextAlign.Left" Format="C0" AllowEditing="false" AutoFit="true" ></GridColumn>

    @foreach (var year in Helper.GetYearsBetween(Property.ForecastStartDate, Property.ForecastEndDate))

    {

                <GridColumn Field=@year.ToString() Type="ColumnType.Number" Format="C0" AllowEditing="false"/>

    }

    </GridColumns>

</SfGrid>


In the attached picture, the SFGrid is shown. All the columns are set to C0 formatting so all numbers in the columns are formatted for currency which is what I want. However, the last row I need all the values to be shown as a percentage, not currency formatting. Is there any way you could give me a bit more information or an example on how to do this?

Thanks!


Attachment: Screenshot_20221116_155433_54cc27d6.zip


PS Prathap Senthil Syncfusion Team November 18, 2022 01:54 PM UTC

Query:” Setting format on individual rows”

We created a sample based on your requirements. Kindly refer to the below code snippet and the sample solution for your reference.


<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight"  TextAlign="TextAlign.Right" Width="120">

             <Template>

                @{

                    var test = context as Order;

 

                    var b = test.Freight;

 

                    if(test.OrderID == 1007)

                    {

                        <div>@b.ToString("P")</div>

 

                    }

                    else

                    {

                      <div>@b.ToString("C2")</div>

                    }

                }

            </Template>

        </GridColumn>


Application

Description automatically generated with medium confidence



Attachment: BlazorDataGrid_72bbdfe6.zip

Loader.
Live Chat Icon For mobile
Up arrow icon