ASPxClientGlobalEvents.ControlsInitialized Event

Occurs on the client side after client object models of all DevExpress web controls contained within the page have been initialized.

Declaration

ControlsInitialized: ASPxClientEvent<ASPxClientControlsInitializedEventHandler<ASPxClientGlobalEvents>>

Event Data

The ControlsInitialized event's data class is ASPxClientControlsInitializedEventArgs. The following properties provide information specific to this event:

Property	Description
isCallback	Gets a value that specifies whether a callback is sent during a controls initialization.

Remarks

The ControlsInitialized event occurs after all DevExpress controls have been initialized, but prior to them being displayed within the browser. This event fires after all ASPxClientControlBase.Init client events of DevExpress web controls.

ASPX (option 1)

<script type="text/javascript">
    function OnControlsInitialized(s, e) {  
        TextBox.SetText('...');  
    }  
</script>

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

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

ASPX (option 2)

<script type="text/javascript">
    ASPxClientControl.GetControlCollection().ControlsInitialized.AddHandler(function(s, e) {  
        TextBox.SetText('...');  
    }  
</script>

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

MVC

<script type="text/javascript">
    MVCxClientGlobalEvents.AddControlsInitializedEventHandler(function () {  
        TextBox.SetText('...');  
    });  
</script>

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

Note that the ControlsInitialized event is raised after each request to the server caused by DevExpress controls. You can use the constructor(isCallback) parameter to determine if an event is raised as a result of a DevExpress callback.

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

A handler of the ControlsInitialized event is the primary place to manipulate all DevExpress web controls using their client-side APIs.

View Example: Text Box for ASP.NET Web Forms - How to apply the jQuery AutoComplete plugin to an editor

Example

All complicated DevExpress ASP.NET controls like the ASPxHtmlEditor and ASPxSplitter require some time to calculate their sizes on the initial page load. This requirement may cause some effects which may be annoying to users.

For example, the ASPxSplitter may “flicker” during page loading and the ASPxHtmlEditor may show its toolbar in the middle of its space.

This solution allows avoiding these problems and showing all controls only when they are completely initialized and resized.

The main idea is to wrap these controls with an ASPxPanel that is hidden on the client (ASPxPanelBase.ClientVisible = false). When all DevExpress controls are ready, the client-side ASPxClientGlobalEvents.ControlsInitialized event of the ASPxGlobalEvents is raised and the handler of this event may be used to show a panel with the client-side ASPxClientControlBase.SetVisible property.

ASPX

<dx:ASPxPanel ID="ASPxPanel1" runat="server" Width="100%" Height="100%" ClientVisible="false" ClientInstanceName="clientControlPanel">
     ...
</dx:ASPxPanel>
<dx:ASPxGlobalEvents ID="ASPxGlobalEvents1" runat="server">
     <ClientSideEvents ControlsInitialized="function(s,e){clientControlPanel.SetVisible(true);}" />
</dx:ASPxGlobalEvents>