Common Client-Side Issues

• Mar 16, 2021
• 6 minutes to read

The links below describe how to solve common client-side issues:

• The “X is undefined” error occurs or controls are rendered with incorrect styles

• Cannot access DevExpress ASP.NET controls on the client

• DevExpress MVC extensions do not work after the first callback

• The “ReferenceError: ‘X’ is not defined” error message appears when the Control.Enabled property is set to false

The “X is undefined” error occurs or controls are rendered with incorrect styles

Possible Errors:

• “‘aspx***’ is undefined”

• “ASPxClient*** is undefined”

• The default styles/images/scripts for DevExpress ASP.NET controls are not loaded.

Solution:

Check the following to solve this issue:

1. Make sure the ASPxHttpHandlerModule is registered in Web.config.

   The ASPxHttpHandlerModule allows DevExpress ASP.NET controls to load their resources. The Web.config file should contain a reference to this module in the system.web/httpModules and system.webServer/modules (for IIS7 in integrated mode) sections. Registration is automatic if you place a DevExpress control on a form in Design view or if you use Project Templates to create an application. You can register the module if you create controls at runtime.

   IIS (classic mode)

   XML

   <system.web>  
       <httpHandlers>  
       <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.vX.Y, Version=X.Y.Z.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" verb="GET"  
       path="DX.ashx" validate="false" />  
       </httpHandlers>  
       <httpModules>  
       <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.vX.Y, Version=X.Y.Z.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" name="ASPxHttpHandlerModule"/>  
       </httpModules>  
   </system.web>  
   

   IIS7 (integrated mode)

   XML

   <system.web>  
       <httpHandlers>  
           <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.vX.Y, Version=X.Y.Z.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" verb="GET"  
           path="DX.ashx" validate="false" />  
       </httpHandlers>  
       <httpModules>  
   
       </httpModules>  
   </system.web>  
   
   <system.webServer>  
       <validation validateIntegratedModeConfiguration="false" />  
       <handlers>  
           <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.vX.Y, Version=X.Y.Z.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" verb="GET" name="ASPxHttpHandlerModule"  
           path="DX.ashx" preCondition="integratedMode" />  
       </handlers>  
       <modules>  
           <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.vX.Y, Version=X.Y.Z.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" name="ASPxHttpHandlerModule"/>  
       </modules>  
   </system.webServer>
   

2. Make sure the application’s folder is marked as a separate IIS application.

3. Add “Full control“ permission for the “IIS_IUSRS“ account in the application folder.

4. Rewrite URL. Add an exception for the DXR.axd URL if you specify a Rewrite URL rule in your Proxy Layer/URL Rewrite Module that blocks/rewrites requests from resource handlers:

   • WebResource.axd (for standard handlers);
   • DXR.axd (for the DevExpresss ASPxHttpHandlerModule).

See Also:

• Why DevExpress ASP.NET controls scripts and styles do not work

• How To: resolve the “Cannot add duplicate collection entry of type ‘add’ with unique key attribute ‘name’ set to ‘ASPxHttpHandlerModule’” error

Cannot access DevExpress ASP.NET controls on the client

Error Description:

This error occurs when you try to use the following methods/events:

• The ClientScriptManager.RegisterStartupScript method.

• The window.onload event.

• The $(document).ready() jQuery function.

Solution:

This error occurs because DevExpress ASP.NET controls are not completely initialized on the client when you call the startup script, window.onload or document.ready. We do not recommended that you use these APIs with our controls on the client while other controls are still active. These approaches are not reliable and can lead to invalid access to controls on the client.

Use any of the following solutions to resolve the issue:

1. Handle the client-side Init event to initialize the control on the client when a page loads.

   Web Forms

   ASPX

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

   JS

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

   MVC

   C#

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

   VB.NET

   @Html.DevExpress().TextBox(  
       Sub(settings)  
           settings.Name = "TextBox"  
           settings.Properties.ClientSideEvents.Init = "OnTextBoxInit"  
       End Sub).GetHtml()  
   

   JS

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

2. Handle the ControlsInitialized / ControlsInitialized event to make sure that all DevExpress web controls are initialized and accessible on the client.

   WebForms

   ASPX

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

   JS

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

   Or:

   ASPX

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

   JS

   ASPxClientControl.GetControlCollection().ControlsInitialized.AddHandler(function(s, e) {  
       TextBox.SetText('...');  
   }  
   

   MVC

   C#

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

   VB.NET

   @Html.DevExpress().TextBox(  
       Sub(settings)  
           settings.Name = "TextBox"  
       End Sub).GetHtml() 
   

   JS

   MVCxClientGlobalEvents.AddControlsInitializedEventHandler(function () {  
       TextBox.SetText('...');  
   });  
   

   Note

   The ControlsInitialized event is raised each time DevExpress controls send a request to the server. You can use the constructor(isCallback) parameter to determine if an event is raised as a result of a DevExpress callback.

   JS

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

See Also:

• How To: Use jQuery/jQuery UI libraries with DevExpress ASP.NET Controls/MVC Extensions
• How To: perform user actions after each callback (like MVCxGlobalEvents)

DevExpress MVC extensions do not work after the first callback

Error Description:

The following errors occur when a DevExpress ASP.NET MVC extension sends a callback (for example, to sort, browse, filter GridView data or refresh CallbackPanel) when a page contains two or more DevExpress extensions in separate PartialViews:

• The loading image hangs.

• An extension is frozen.

• Subsequent callbacks do not work.

Solution:

DevExpress ASP.NET MVC extensions use jQuery callbacks and overwritten jQuery methods to handle actions. This requires to register jQuery script files before DevExpress script files. Otherwise, DevExpress ASP.NET MVC extensions do not operate correctly after a callback.

Try one of the following suggestions to resolve this issue:

1. DevExpress controls automatically register external client libraries in the “resources” section in the application’s Web.config file if you use the DevExpress Template Gallery to add DevExpress controls to a web page:

   • jquery-3.5.1.min.js
   • jquery.validate.min.js (1.17)
   • jquery.validate.unobtrusive.min.js (3.2.6)
   • jquery.unobtrusive-ajax.min.js (3.2.4)
   XML

   <configuration>
   <configSections>
       <sectionGroup name="devExpress">
       <!-- ...  -->
       <section name="resources" type="DevExpress.Web.ResourcesConfigurationSection, DevExpress.Web.v20.1, Version=20.1.17.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" requirePermission="false" />
       </sectionGroup>
   </configSections>
   <!-- ...  -->
   </configuration>
   

   XML

   <devExpress>
       <!-- ... -->
       <resources>
           <add type="ThirdParty" />
           <add type="DevExtreme" />
       </resources>
   </devExpress>
   

2. Add jQuery scripts to a root layout (for an empty project):

   HTML

   <head>  
       <title>@ViewBag.Title</title>  
       @Html.DevExpress().GetStyleSheets(  
           new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },  
           new StyleSheet { ExtensionSuite = ExtensionSuite.Editors },  
           new StyleSheet { ExtensionSuite = ExtensionSuite.GridView }  
           .....  
       )  
   
       <script src="@Url.Content("~/Scripts/jquery-1.11.1.min.js")" type="text/javascript"></script>  
       @Html.DevExpress().GetScripts(  
           new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },  
           new Script { ExtensionSuite = ExtensionSuite.Editors },  
           new Script { ExtensionSuite = ExtensionSuite.GridView }  
           ...  
       )  
   </head>  
   

3. Register jQuery bundles before DevExpress scripts (for a non-default MVC4/MVC5 project template):

   

   See Also:

   • JavaScript exceptions are raised after upgrading to v14.1 when using a jQuery version below 1.11 and registering Report Extension scripts
   • How to register DevExpress scripts with external client libraries that use jQuery

The “ReferenceError: ‘X’ is not defined” error message appears when the Control.Enabled property is set to false

Error Description:

The “ReferenceError: X is not defined” error message appears when you try to access a DevExpress ASP.NET control whose Enabled property is set to false.

Solution:

Client scripts are not rendered for a control if its Enabled property is set to false. This means you cannot access the control on the client. Instead, use the ClientEnabled property to disable the control and make it available on the client.

See Also:

• WebControl.Enabled
• Data Editors - The difference between the Enabled / Visible and ClientEnabled / ClientVisible properties