How to format columns like Excel?

[Phúc Mai Hoài]

Hi,  I have a problem, I want to move "$" to the left using "Format="$ ###.00" ". Is there currently any way to do this? Since I currently have some tables initialized with List<ExpandoObject> with undefined column data types I can't CSS.

Here, example code:

<SfGrid DataSource="@Orders" AllowPaging="true" Height="315">
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" Visible="false" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="$ ###.00" TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>

I want like this:

Format of Excel:

Thanks.

[Prathap Senthil]

Hi Phúc ,

Based on your requirements, we suggest using the column template feature to achieve the goal of moving "$" to the left. Please refer to the code snippet and sample below for your reference

<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@ToolbarItems" GridLines=Syncfusion.Blazor.Grids.GridLine.Both >

    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>

    <GridColumns>

        <GridColumn Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field="CustomerID" HeaderText="Customer Name" Width="120"></GridColumn>

        <GridColumn Field="Freight" HeaderText="Freight"  TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120">

            <Template>

                @{

                    var employee = (context as IDictionary<string, object>);

                    var edit = (double)employee["Freight"];

                }

                <span style="float:left;">$</span>@edit.ToString("###.00")

            </Template>

        </GridColumn>

 

        <GridColumn Field="ShipCountry" HeaderText="Ship Country" EditType="Syncfusion.Blazor.Grids.EditType.DropDownEdit" Width="150"></GridColumn>

        <GridColumn Field="Verified" HeaderText="Active" DisplayAsCheckBox="true" Width="150"></GridColumn>

    </GridColumns>

</SfGrid>

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

Regards,
Prathap Senthil

Attachment: DataGridColumnformat_b0ffc963.zip

[Phúc Mai Hoài]

Hi, Thanks for answering the previous question.

I have another issue in  List<ExpandoObject> , how can I change the background-color?

Following your example, I want to change the background color of values ​​greater than 1000, how should I do it?

[Prathap Senthil]

Based on your requirements, we suggest utilizing the QuercellInfo event to customize the cell according to your needs. Please refer to the code snippet and sample below for your reference.

<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@ToolbarItems" GridLines=Syncfusion.Blazor.Grids.GridLine.Both >

    <GridEvents QueryCellInfo="CustomizeCell" TValue="ExpandoObject"></GridEvents>

    <GridColumns>

        ----

    </GridColumns>

</SfGrid>

<style>

  

 

    .above-1000 {

        background-color: yellow;

    }

 

   

</style>

@code {

 

 

 

    public void CustomizeCell(QueryCellInfoEventArgs<ExpandoObject> args)

    {

      

 

        if (args.Column.Field == "Freight")

        {

            dynamic data = args.Data;

            if (data.Freight > 1000)

            {

                args.Cell.AddClass(new string[] { "above-1000" });

            }

        }

 

      

    }

 

 

}

Reference: https://blazor.syncfusion.com/documentation/datagrid/cell#using-event

Attachment: BlazorApp1_Modified_ca632255.zip