How to Ensure That a Control Is Initialized On The Client Side

• Jan 30, 2024
• 2 minutes to read

Important

Do not use the following methods/events to access our controls on the client side:

• ClientScriptManager.RegisterStartupScript
• window.onload
• $( document ).ready()

When these methods/events are being executed, our controls are not completely initialized on the client side. These approaches are not reliable and can cause errors and unexpected behavior.

Our ASP.NET Web Forms controls implement the Init event that fires on the client side when the control is initialized. Handle this event to initially set up the control.

ASPX

<dx:ASPxTextBox ID="TextBox" runat="server" ...>
    <ClientSideEvents Init="OnTextBoxInit" />
</dx:ASPxTextBox>  

JS

function OnTextBoxInit(s, e) {
    s.SetText('...');
}

Handle the ASPxClientGlobalEvents.ControlsInitialized event to make sure that every DevExpress control on the page is initialized and you can access it on the client side.

Note that the ControlsInitialized event is raised each time DevExpress controls send a request to the server. Use the isCallback parameter to determine if an event is raised as a result of a DevExpress callback.

ASPX (option1)

<dx:ASPxTextBox ID="TextBox" runat="server" ClientInstanceName="TextBox" />

<dx:ASPxGlobalEvents ID="GlobalEvents" runat="server">  
   <ClientSideEvents ControlsInitialized="OnControlsInitialized" />  
</dx:ASPxGlobalEvents>  

ASPX (option2)

<dx:ASPxTextBox ID="TextBox" runat="server" ClientInstanceName="TextBox" />

JS (option1)

function OnControlsInitialized(s, e) {
    if(!e.isCallback) // change editor text on the first load only
        TextBox.SetText('...');
}

JS (option2)

ASPxClientControl.GetControlCollection().ControlsInitialized.AddHandler(function(s, e) {
    if(!e.isCallback) // change editor text on the first load only
        TextBox.SetText('...');
}