Unplanned
Last Updated: 04 Oct 2023 20:28 by Doug
Doug
Created on: 25 Nov 2022 12:31
Category: Signature
Type: Bug Report
3
Width and Height changes leads to cursor and drawing position mismatch

If the Signature Width or Height parameter values change at runtime, the drawing position no longer matches the cursor position. For example, if the Signature size increases, the drawing position will move down and right, and vice-versa.

A possible workaround is to recreate the component after changing the dimensions:

Signature Width: <TelerikNumericTextBox @bind-Value="@NumValue" Width="120px" />

<TelerikButton OnClick="@ResizeSignature">Resize Signature</TelerikButton>

<br /><br />

@if (ShowSignature)
{
    <TelerikSignature @bind-Value="@SignatureValue"
                      Width="@( $"{SignWidth}px" )"
                      Height="@( $"{SignHeight}px" )"
                      Maximizable="false">
    </TelerikSignature>
}

@code {
    private string SignatureValue { get; set; }

    private int NumValue { get; set; } = 300;

    private int SignWidth { get; set; }
    private int SignHeight { get; set; }

    private bool ShowSignature { get; set; } = true;

    async Task ResizeSignature()
    {
        ShowSignature = false;

        SignWidth = SignHeight = NumValue;

        await Task.Delay(1);

        ShowSignature = true;
    }

    protected override void OnInitialized()
    {
        SignWidth = SignHeight = NumValue;

        base.OnInitialized();
    }
}

2 comments
Doug
Posted on: 04 Oct 2023 20:28
Figured it out. I was only calling dialogRef.Refresh once, at the end of the ResizeSignature method but I need to call it twice. Once after ShowSignature = false, and again after ShowSignature = true. Now it works. 
Doug
Posted on: 04 Oct 2023 20:16
This workaround works when I use it on a regular Blazor component but when I put this code inside of a TelerikDialog component the issue remains. It will resize correctly but after it resizes, when you draw, the line it creates is below and right of where the cursor is. The only thing I had to add to the code above for the dialog is to call the Refresh method on the dialog reference. Otherwise I just put the html above inside the DialogContent and used the same code. Any workaround for that scenario?