C1NumericBox Format String Issue with Binding

C1NumericBox Format String Issue with Binding

Posted by: james on 2 December 2024, 9:18 pm EST

• 

  james

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 2 December 2024, 9:18 pm EST

  Hi

  There appears to be an issue when formatting with a % and the C1NumericBox

  The following will show 3% as 300%.
  
  Also, changing the binding to not multiply and divide by 100 will also show 3% as 300%.

  IMO this is because the Format string applies on the get side of things, but not on the set side of things.

  If you unbalance the get and the set with bind-Value to try and compensate for the format string, it ends up in a loop until the value reaches 0, and also does not work.

  <C1NumericBox 
                ButtonDisplayMode="@ButtonDisplayMode.None"
                Format="#,##0.0%"
                Style="@(new C1Style(){ Width = 150 })"
                TNumeric="decimal?"
                @bind-Value:get="@(Shift.ShiftFeeRate.HasValue ? Shift.ShiftFeeRate * 100 : (decimal?)null)"
                @bind-Value:set="(value) => Shift.ShiftFeeRate = value.HasValue ? value / 100 : null">
  
  </C1NumericBox>

  Hope that makes sense. Please advise.

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 4 December 2024, 6:48 am EST - Updated 4 December 2024, 6:53 am EST

  Hi James,

  The format string is defined by the DotNet standard numeric format strings defined at: https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings

  And for the percentage format, it is expected that the number is multiplied by 100 (not an issue with our control).

  If you want to have to shown the value as 3%, you could use the following and when getting the value, simply multiply it with 100.

  <button id="btn" @onclick="GetValue">Get Underlying Value</button>
  <C1NumericBox @ref="input" TNumeric="double?" Step="0.01"
                Format="#,##0.0%"
                Style="@(new C1Style() { Width = 150 })"
                @bind-Value="value">
  </C1NumericBox>
  
  @code {
      double? value = 0.03;
  
      C1NumericBox<double?> input;
  
      private void GetValue()
      {
          double? newValue = value * 100;
          Console.WriteLine(newValue);
      }
  }

  It doesn’t require handling the get/set, and seems to be working fine.

  

  1296×956 51.1 KB

  Regards,

  Ankit

• 

  james

  • Post Options:
  • Link
    Copy

  Posted 4 December 2024, 8:12 pm EST

  Hi Ankit

  You need to type something into the box to see the issue.

  For example, with your sample, type in the number 10, and then click anywhere in whitespace on the page. You will see it jump to 1000%. The issue does not happen using the buttons.

  Kind Regards
  
  James

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 5 December 2024, 7:09 am EST

  Hi James,

  As mentioned earlier, this is the expected behaviour of the percentage formatter. It multiplies the input value by 100. For example, entering the number 10 results in “1000%” because it is multiplied by 100. This behaviour is by design.

  The reason it works with the step is that the initial value is set to 0.03. When multiplied by 100, it becomes “3%,” which aligns with the expected format. Additionally, the step value is “0.01.”

  I am currently exploring whether there are alternative configuration options.

  I’ll keep you updated on my findings.

  Best regards,
  
  Ankit

• 

  james

  • Post Options:
  • Link
    Copy

  Posted 5 December 2024, 9:30 pm EST

  Hi Ankit

  I figured out a way to get the desired effect. It works well.
  
  A combination of using a literal for the percent sign in the format string, and a customised get and set:

  <C1NumericBox @ref="myNumBox" TNumeric="decimal?" Step="1"
                Format="0.##'%'"
                @bind-Value:get="myValue*100"
                @bind-Value:set="(
  v => {myValue = v == null ? v : Math.Round(v.Value,2)/100;
  })"
  Style="@(new C1.Blazor.Core.C1Style() { Width = 150 })"
  >
  </C1NumericBox>

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 5 December 2024, 11:50 pm EST

  Hi James,

  Yes, the approach mentioned above can be applied to your requirement, and it appears to work well.

  Please let us know if you encounter any issues.

  Best regards,

  Ankit