How to change the row count in the Blazor Multiline TextBox?

When developing web applications, it’s often necessary to provide users with a text input field that can handle multiple lines of text. In Blazor TextBox applications using Syncfusion components, you can create a dynamic multiline TextBox that adjusts its row count based on user input and displays a scrollbar when a maximum row limit is reached.

Creating a Dynamic Multiline TextBox

To create a dynamic multiline TextBox using Syncfusion Blazor components, follow the steps below:

1. Ensure you have the Syncfusion Blazor library installed and properly set up in your project.

2. Add the following code to your Blazor component to create a TextBox that starts with one row and increases the row count with each new line entered, up to a maximum of five rows:

@using Syncfusion.Blazor.Inputs
<div style="margin:150px auto;width:500px">

    <h2>Auto Resize Textarea</h2>

    <SfTextBox ID="textarea"
               rows="@Rows"
               Multiline=true
               @oninput="@InputHandler"
               Placeholder="Enter your address"
               Width="400px">
    </SfTextBox>

</div>

@code {
    public int Rows = 1;
    public int MaxRows = 5; // Set your maximum limit here
    public string temp;

    private void InputHandler(Microsoft.AspNetCore.Components.ChangeEventArgs args)
    {
        temp = args.Value.ToString();
        var x = temp.Split('\n').Length;
        var y = temp.Split('\r').Length;
        var newRows = (x >= y) ? x : y;
        Rows = (newRows <= MaxRows) ? newRows : MaxRows;
    }
}

3. In the InputHandler method, the number of newline characters (\n and \r) in the input is counted. The larger count is taken as the new row count. If this count exceeds the maximum row limit (MaxRows), the row count is set to MaxRows.

4. The SfTextBox component is configured with the Multiline property set to true to allow for multiple lines of text.

5. The rows attribute is bound to the Rows property, which dynamically changes based on the input.

6. Once the maximum row limit is reached, the TextBox will display a scrollbar to accommodate additional lines.

Live Sample

For a live example and to see the TextBox in action, visit the Syncfusion Blazor Playground at the provided sample link.

Live Demo

Conclusion

I hope you enjoyed learning about how to change the row count in the Blazor Multiline TextBox.

You can refer to our Blazor TextBox feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor TextBox example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!