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

• Jan 31, 2024

Important

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

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

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

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

Razor

@Html.DevExpress().TextBox(settings => {  
    settings.Name = "TextBox";  
    settings.Properties.ClientSideEvents.Init = "OnTextBoxInit";  
});  

JS

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

Handle the MVCxClientGlobalEvents.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 extensions send a request to the server. Use the isCallback parameter to determine if an event is raised as a result of a DevExpress callback.

Razor

@Html.DevExpress().TextBox(settings => {  
    settings.Name = "TextBox";  
}).GetHtml()  

JS

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