Is there an API to get all textboxes in the current layout.

[Brice FROMENTIN]

Hello,

I am searching an API that returns me an array of TextBoxes (or Control) to apply generic algorithm, dos it exists ? If not, it is possible to have one to avoid javascript ?

Regards

Brice.

[Sureshkumar P]

Hi Brice, 

 

Greetings from Syncfusion support.  

 

We would like to inform you that we don’t have any property for returns the list of TextBoxes in the page. Also, without using JS interop we could not achieve the requested requirement in the Blazor platform since we could not access the DOM elements in the Blazor platform. 

 

Regards, 

Sureshkumar P. 

[Brice FROMENTIN]

It should be nice if we can create controls'intansce from their DOM counterpart.

In fact I make a DOM Query in JS and transform the result on Blazor Component. Is it already possible ?

[Sureshkumar P]

Hi Brice, 

 

We have prepared the sample to get the rendered TextBox elements in the page along with count by using JS interop in the external button click event and attached it below. Here, we got the textbox element in the class name of “e-textbox” which is applied to the all textbox input element.  

 

[index.razor] 

<SfTextBox></SfTextBox> 

<SfTextBox></SfTextBox> 

<SfTextBox></SfTextBox> 

<SfTextBox></SfTextBox> 

<SfTextBox></SfTextBox> 

<SfTextBox></SfTextBox> 

<SfTextBox></SfTextBox> 

<SfTextBox></SfTextBox> 

<SfTextBox></SfTextBox> 

<SfTextBox></SfTextBox> 

<SfTextBox></SfTextBox> 

<SfTextBox></SfTextBox> 

 

<button @onclick="onClick">Click to get the textbox in the page</button> 

@code{  

    [Inject] 

    protected IJSRuntime JsRuntime { get; set; } 

 

    public async Task onClick() 

    { 

        await JsRuntime.InvokeVoidAsync("onCreate", ""); 

    } 

} 

[daterange.js] 

window.onCreate = (id) => { 

    var textboxCount = document.querySelectorAll(".e-textbox").length; 

    var textboxItem = document.querySelectorAll(".e-textbox"); 

    console.log("All rendered TextBox element", textboxItem); 

    console.log("Rendered Textbox count", textboxCount); 

} 

 

 

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

 

Regards, 

Sureshkumar P. 

[Brice FROMENTIN]

If i want to màke some changes to textboxes, wich API do I use, EJ2 JS ?

[Berly Christopher]

Hi Brice, 

  

We would like to inform you that if you want to set any property to the individual TextBox component, you can set it from the Blazor server-side. Else, if you want to set the property value to the all components, you can set it from in the JS page.  

  

So, please share the requirement which you want to set to the TextBox component that will help us to provide exact details from our end.  

  

Regards, 

Berly B.C 

[Brice FROMENTIN]

I want to set value and  CSS class.

[Sureshkumar P]

Hi Brice, 

 

We would like to inform you that we can affect the DOM level changes by accessing the textbox element in the JS interop. If you want to affect the TextBox properties with help of instance, we need to done it by property binding in the razor page as mentioned in the below documentation and code example. 

 

@using Syncfusion.Blazor.Inputs 

 

<SfTextBox CssClass="@cssClass" Value="@val"></SfTextBox> 

<SfTextBox CssClass="@cssClass" Value="@val"></SfTextBox> 

<SfTextBox CssClass="@cssClass" Value="@val"></SfTextBox> 

<SfTextBox CssClass="@cssClass" Value="@val"></SfTextBox> 

@code{ 

    public string val { get; set; } = "First Name"; 

    public string cssClass { get; set; } = "e-custom"; 

} 

 

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

 

UG Link: https://blazor.syncfusion.com/documentation/textbox/data-binding/#one-way-binding  

 

Regards, 

Sureshkumar P.