1. Home
  2. Forum
  3. Blazor
  4. Display double in custom format

Display double in custom format

Hi,

I have a `SfGrid`. The goal is to display big double in customized format, following this rule:


public static string ToUnitString(this double value)
{
          double abs = Math.Abs(value);
          string unit = string.Empty;
          const long trillion = 1000000000000;
          const long billion = 1000000000;
          const long million = 1000000;
          const long thousand = 1000;
          if (abs >= trillion)
          {
              unit = "T";
              value /= trillion;
          }
          else if (abs >= billion)
          {
              unit = "B";
              value /= billion;
          }
          else if (abs >= million)
          {
              unit = "M";
              value /= million;
          }
          else if (abs >= thousand)
          {
              unit = "K";
              value /= thousand;
          }

          return value.ToString("N1") + " " + unit;
      }


for example,

201,145 to be displayed as 201,1 K

301, 201,145 to be displayed as 301,2 M

...


Can you please suggest ? Thanks!


Yi


5 Replies
MS Monisha Saravanan Syncfusion Team March 31, 2022 01:39 PM UTC

Hi Han,


Greetings from Syncfusion support.


We suspect that you need to display the customized value in the Grid column. We suggest you to use column template feature of DataGrid by using this feature you can perform your own calculation and bind the return value to the Grid columns. Kindly refer the attached code snippet and UG for your reference.


<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Height="400">

    <GridColumns>

        <GridColumn HeaderText="Value" TextAlign="TextAlign.Right" Width="120">

            <Template>

                @{

                    double value = (context as Order).Freight;

                    var Result = @ToUnitString(value);

                    <div>@Result</div>

                }

            </Template>

        </GridColumn>

    </GridColumns>

</SfGrid>

@code {

    public static string ToUnitString(this double value)

{

          double abs = Math.Abs(value);

          ...

         return value.ToString("N1") + " " + unit;

      }

 

 


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


Kindly get back to us if you have further queries.


Regards,

Monisha


YH Yi Han April 4, 2022 03:28 PM UTC

Hi,

Thank you for your reply. This really helps for SfGrid.

I have the same problematic for SfPivotView,

When the pivot table's `DisplayOption` is table, the formatting does the trick


<PivotViewTemplates>
    <CellTemplate>
        @{
            var data = (context as AxisSet);
            if (data != null)
            {
                if (data.Axis == "value")
                {
                    var formatted = data.Value.ToUnitString();
                    <div>@formatted</div>
                }
                else
                {
                    @data.FormattedText
                }
            }
        }
    </CellTemplate>
</PivotViewTemplates>


But when I display the pivot view with option Chart

<PivotViewDisplayOption View=View.Chart></PivotViewDisplayOption>​

what is the equivalent for CellTemplate?

Many thanks!

Yi


AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team April 5, 2022 01:48 PM UTC

Hi Yi Han,

Currently, we are analyzing this query at our end, and we will update further details within two business days (April 7, 2022).


Regards,

Angelin Faith Sheeba.


AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team April 7, 2022 01:49 PM UTC

Hi Yi Han,


You can customize the row and column axis data labels by using the AxisLabelRender event. However, we are currently experiencing a problem while using “AxisLabelRender” event in our Blazor Pivot Table. Hence, We have considered this as a bug “Exception throws when using AxisLabelRender event in Pivot Chart”. And this fix will be available in our 2022, Volume 1 SP release which is estimated to be rolled out at the mid of may 2022. You can keep track of the bug from the below feedback link.


Feedback Link :   https://www.syncfusion.com/feedback/34038/exception-throws-when-using-axislabelrender-event-in-pivot-chart


Regards,

Angelin Faith Sheeba.


AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team May 16, 2022 02:36 PM UTC

Hi Han,


You can customize the row and column axis data labels by using AxisLabelRender event and using ChartTooltipRender event you can customize the tooltip text content. Please refer the below code example:


Code Example:

 

<SfPivotView TValue="ProductDetails">

      <PivotViewEvents TValue="ProductDetails" OnAxisLabelRender="AxisLabelRender" ChartTooltipRender="chartTooltip"> </PivotViewEvents>

</SfPivotView>

 

public void AxisLabelRender(Syncfusion.Blazor.Charts.AxisLabelRenderEventArgs args)

    {

        args.Text = ToUnitString(args.Value);

    }

 

public void chartTooltip(Syncfusion.Blazor.Charts.TooltipRenderEventArgs args)

    {

        var value = ToUnitString(Convert.ToDouble(args.Data.PointY));

        var tooltip= args.Text.Split(":");

        var ele1 = tooltip[1].Split(" ");

        if (ele1[1].Contains("$"))

        {

            value = "$"+ value;

        }

        args.Text= args.Text.Replace(ele1[1], value, StringComparison.Ordinal);

    }


Meanwhile, we have prepared a sample for your reference.


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PivotTable1800156984


Please let us know if you have any concerns.


Regards,

Angelin Faith Sheeba.


Loader.
Up arrow icon