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
close icon

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

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


2 Replies

JO Jose January 6, 2023 05:02 PM UTC

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;

                }

            }

        }



    }

}




NP Naveen Palanivel Syncfusion Team January 9, 2023 05:42 PM UTC


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


Loader.
Live Chat Icon For mobile
Up arrow icon