Can you have more than one Format on a GridColumn in a DataGrid?

[Jose]

I have a table that has a column of type decimal, however, some of the values in this column are either meant to be shown as percentages (Format = "p2") or currency (Format = "c2"). Is there anyway that my GridColumn of type decimalcan show these 2 formats

[Jose]

relevant code:    

    <SfGrid @ref="grid" TValue="DecimalAmountCriteriaDTO" Toolbar="@(new List<string>() { "Add", "Edit", "Update", "Cancel" })" AllowPaging="true">

            <GridEvents TValue="DecimalAmountCriteriaDTO" DataBound="DataBoundHandler" OnActionFailure="@ActionFailure" RowSelected="RowSelectHandler"></GridEvents>

            <SfDataManager Url="https://localhost:7120/DecimalAmountCriteria" Adaptor="Adaptors.WebApiAdaptor">

            </SfDataManager>

            <GridPageSettings PageSize="8"></GridPageSettings>

            <GridEditSettings NewRowPosition="NewRowPosition.Bottom" AllowAdding="true" AllowDeleting="true" AllowEditing="true" />

            <GridColumns>

                <GridColumn Field=@nameof(DecimalAmountCriteriaDTO.Id) HeaderText="ID" TextAlign="TextAlign.Left" Width="120" Visible="false" IsPrimaryKey="true" AllowEditing="false"></GridColumn>

                <GridColumn Field=@nameof(DecimalAmountCriteriaDTO.Description) HeaderText="Description" Width="140" AllowEditing="false">

                    <Template>

                        @{

                            var tooplip = (context as DecimalAmountCriteriaDTO);

                            Count++;

                            <SfTooltip @key="@Count" Position="Position.BottomLeft">

                                <TooltipTemplates>

                                    <Content>

                                        @tooplip.ToolTipMessage

                                    </Content>

                                </TooltipTemplates>

                                <td>@tooplip.Description</td>

                            </SfTooltip>

                        }

                    </Template>

                </GridColumn>

                <GridForeignColumn TValue="OperatorDTO" Field=@nameof(DecimalAmountCriteriaDTO.OperatorId) HeaderText="Operator" EditType="EditType.DropDownEdit" Format="" AllowEditing="@dropDownEdit" ForeignKeyField="Id" ForeignKeyValue="Display" Width="150">

                    <SfDataManager Url="https://localhost:7120/Operator" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>

                </GridForeignColumn>

                <GridColumn Field=@nameof(DecimalAmountCriteriaDTO.Value) HeaderText="Value" TextAlign="TextAlign.Left" Width="120" EditType="EditType.DefaultEdit" Format="@PercentageOrDollar"></GridColumn>

            </GridColumns>

        </SfGrid>

@code{

    public void DataBoundHandler()

    {

        if (grid is not null)

        {

            var viewData = grid.CurrentViewData.Cast<DecimalAmountCriteriaDTO>();

            foreach(var item in viewData)

            {

                if (item.SysVal == "TransAmountThreshold" && item.SysVal == "AvgCollBalThreshold")

                {

                    percentageOrDollar = "c2";

                    PercentageOrDollar = percentageOrDollar;

                }

                else

                {

                    percentageOrDollar = "p2";

                    PercentageOrDollar = percentageOrDollar;

                }

            }

        }

    }

}

[Naveen Palanivel]

Hi Jose

Thank you for reaching out to Syncfusion support.

Based on your request, it looks like you want to apply both a percentage and currency format in the same column of your grid component. We can help you achieve this by using the column template feature. Please see the attached code snippet and screenshot for reference.

<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>

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

            <Template>

                @{

                    var a = (context as Order).Freight;

 

                    if(a.Value < 40)

                    {

                        <div>@((context as Order).Freight) %</div>

                    }

                    else

                    {

                        <div>$@((context as Order).Freight)</div>

                    }

 

                }

 

            </Template>

 

        </GridColumn>

Please let us know if you have any concerns.

Regards,

Naveen Palanivel