How to change value in OnInput callback

[Daniele]

Hi,

I'm trying to update the value of a textbox in its OnInput event callback, but the value I set is ignored. In particular, I need to limit the input to 4 rows maximum, so I count how many "\n" are there and then edit the value.

That's my TextBox:

<SfTextBox @ref="HeadingTextBox" Value="@HeadingText" OnInput="OnTextInput" CssClass="settings-input-text-box" Multiline="true" HtmlAttributes="@ReportHeadingHtmlAttributes"/>

And that's the callback:

private async Task OnTextInput(ChangeEventArgs obj)
{
    var text = obj.Value?.ToString();

    if (!string.IsNullOrEmpty(text))
    {
        int rows = text.Split("\n").Length;
        while (rows > 4)
        {
            text = text.Substring(0, text.LastIndexOf("\n", StringComparison.InvariantCultureIgnoreCase));
            rows--;
        }
        
        HeadingText = text;
        await InvokeAsync(StateHasChanged);
    }
}

Doing this, the visible value in the TextBox isn't updated.

Any idea on how to solve this issue?

[Ponmani Murugaiyan]

Hi Daniele, 

 

Greetings from Syncfusion support. 

 

 

We request you use maxlength attribute to prevent the typing of value more than the expected characters. In the below sample we have restricted the more number of characters beyond four rows using the attribute’s value as 134. So you can calculate the character length based on your width and row and set the value to the respective attribute . 

 

@using Syncfusion.Blazor.Inputs 

 

<SfTextBox Multiline="true" HtmlAttributes="@htmlattributes" ID="syncText" Rows="4" Width="300px"></SfTextBox> 

 

@code{ 

 

    Dictionary<string, object> htmlattributes = new Dictionary<string, object>() 

    { 

       {"maxlength","134" } 

 

    }; 

 

} 

 

Sample Link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1531361007.zip  

Thanks, 

 

Ponmani M.