[SOLVED] How to reduce input lag on Nested NumericEdit on DataGrid

[gac-noob]

Hi,

I have a DataGrid that contains the following columns: Quantity, Rate, Discount, and Amount

When a value is changed, I update the other values (e.g. when Quantity is changed, the Amount is updated, when Amount is changed, the Rate is updated, etc...)

My code block looks like this:

protected NumericEdit<decimal> QuantityNumericTextBox;
public void OnQuantityValueChange(CellEditContext context, decimal value)
{
     context.CellValue = value;
     AmountNumericTextBox.SetValue(((((100 - DiscountNumericTextBox.Value) / 100) * RateNumericTextBox.Value) * value).ToString());
     StateHasChanged();
}

protected NumericEdit<decimal> RateNumericTextBox;
public void OnRateValueChange(CellEditContext context, decimal value)
{
     context.CellValue = value;
     AmountNumericTextBox.SetValue(((((100 - DiscountNumericTextBox.Value) / 100) * value) * QuantityNumericTextBox.Value).ToString());
     StateHasChanged();
}

protected NumericEdit<decimal> DiscountNumericTextBox;
public void OnDiscountValueChange(CellEditContext context, decimal value)
{
     context.CellValue = value;
     AmountNumericTextBox.SetValue(((((100 - value) / 100) * RateNumericTextBox.Value) * QuantityNumericTextBox.Value).ToString());
     StateHasChanged();
}

protected NumericEdit<decimal> AmountNumericTextBox;
public void OnAmountValueChange(CellEditContext context, decimal value)
{
     context.CellValue = value;
     RateNumericTextBox.SetValue(((value / QuantityNumericTextBox.Value) / ((100 - DiscountNumericTextBox.Value) / 100)).ToString());
     StateHasChanged();
}

While the above code works, I noticed that there is quite a noticeable lag or delay each time a character is typed or maybe everytime a key is pressed? I'm guessing it is because, every time a key is pressed, all ValueChange() of my input controls are called?

Since this is a common functionality in many web apps, I'm guessing I am NOT doing this correctly? Maybe there is a correct or a better way to achieve my goal? Please share, I am very much willing to learn :)

By the way, I am running it in VS2019 community edition, I think in Debug mode (I don't really know how to use this yet, I'm still new to software development, but it says Debug)...Do I need to setup anything to test this in Release mode? And is performance different between Debug and Release mode?

Thanks in advance!

In case my razor code is also needed, I am posting it below for everyone's reference:

<DataGridColumn Caption="Qty" Editable="true" TItem="OrderItem" Field="@nameof(OrderItem.Quantity)">
     <DisplayTemplate>
          <Text class="text-right">
               @($"{(context as OrderItem)?.Quantity.ToString("N1")}")
          </Text>
     </DisplayTemplate>
     <EditTemplate>
          <Validation>
               <NumericEdit @ref="@QuantityNumericTextBox" class="text-right" Decimals="1"
                              TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@((v) => OnQuantityValueChange(context, v))">
                    <Feedback><ValidationError /></Feedback>
               </NumericEdit>
          </Validation>
     </EditTemplate>
</DataGridColumn>
<DataGridColumn Caption="Unit Cost" Editable="true" TItem="OrderItem" Field="@nameof(OrderItem.Rate)">
     <DisplayTemplate>
          <Text class="text-right">
               @($"{(context as OrderItem)?.Rate.ToString("N2")}")
          </Text>
     </DisplayTemplate>
     <EditTemplate>
          <Validation>
               <NumericEdit @ref="@RateNumericTextBox" class="text-right" Decimals="2"
                              TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@((v) => OnRateValueChange(context, v))">
                    <Feedback><ValidationError /></Feedback>
               </NumericEdit>
          </Validation>
     </EditTemplate>
</DataGridColumn>
<DataGridColumn Caption="% Disc." Editable="true" TItem="OrderItem" Field="@nameof(OrderItem.Discount)">
     <DisplayTemplate>
          <Text class="text-right">
               @($"{(context as OrderItem)?.Discount.ToString("N1")}")
          </Text>
     </DisplayTemplate>
     <EditTemplate>
          <Validation>
               <NumericEdit @ref="@DiscountNumericTextBox" class="text-right" Decimals="1"
                              TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@((v) => OnDiscountValueChange(context, v))">
                    <Feedback><ValidationError /></Feedback>
               </NumericEdit>
          </Validation>
     </EditTemplate>
</DataGridColumn>
<DataGridColumn Caption="Amount" Editable="true" TItem="OrderItem" Field="@nameof(OrderItem.Amount)">
     <DisplayTemplate>
          <Text class="text-right">
               @($"{(context as OrderItem)?.Amount.ToString("N2")}")
          </Text>
     </DisplayTemplate>
     <EditTemplate>
          <Validation>
               <NumericEdit @ref="@AmountNumericTextBox" class="text-right" Decimals="2"
                              TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@((v) => OnAmountValueChange(context, v))">
                    <Feedback><ValidationError /></Feedback>
               </NumericEdit>
          </Validation>
     </EditTemplate>
</DataGridColumn>

[stsrki]

Well, the problem is much bigger. It's basically a known problem in Blazorise/Blazor. Whenever you type something the component value must be updated, and also need to run the validation, and also update any validation state or error message. This means that Blazor will re-render parts of the UI. I hope with time this will be better as Blazor team roles some render optimizations.

I have made many optimizations recently(for 0.9.3) but the problem still occurs in some cases. You can try enabling DelayTextOnKeyPress and increasing DelayTextOnKeyPressInterval. This way you will have some kind of hybrid between onchange and oninput events. And the last option is to disable immediate updates on each keypress by disabling ChangeTextOnKeyPress.

[gac-noob]

Ahhhhhh I see...I kind of understand now, part of the limitations of Blazor maybe because this is relatively new compare to other languages..

I tried your recommended solution to use DelayTextOnKeyPress and DelayTextOnKeyPressInterval, and I used 20 for the interval, and it actually improved greatly input lag..thank you very much sir Mladen!

[gac-noob]

By the way sir Mladen, I just realized, (and your opinion is greatly appreciated sir) what if I use FocusOut event? Maybe I update the values when the focus exits the input control instead? What's your opinion about this? Also how do I use FocusOut? hehehe

[stsrki]

FocusOut is one of the implementations done in 0.9.3. You will need to wait a little more for it :)

[gac-noob]

Yahoooo!! heheheh thank you thank you very much sir Mladen!