Breaking Change T1166128
Visible to All Users

Web Dashboard - Export utilizes Fetch instead of jQuery Ajax

What Changed

In v22.2 and earlier, Web Dashboard Control used jQuery Ajax to send web requests, and form.submit for export operations. In v23.1, the Fetch API is used for all types of requests, including export operations.

  • The FetchRemoteService is now the default implementation of the IRemoteService interface.
  • The IRemoteService became generic.
  • The Content-Disposition header is now explicitly exposed.

Reasons for Change

In v22.2 and earlier, we used form.submit for export in Web Dashboard Control and it wasn't possible to add custom headers for form.submit. The use of the Fetch API enhances the usability and API of our component and includes a unified method to pass request headers  from a client to a back-end server. This eliminates the need to write extra code for export operations when you need to process custom request headers.

Impact on Existing Apps

Starting with v23.1, Web Dashboard Control will automatically use Fetch API, if you have not explicitly configured dashboard options and options.ajaxRemoteService.

The request setting specified in the jQuery.ajaxSetup function will not be used in Web Dashboard Control requests, if you have not explicitly configured dashboard options and options.ajaxRemoteService.

How to Update Existing Apps

If you used the jQuery.ajaxSetup function to configure the request settings, select one of the following options:

The following code snippets show how to configure Fetch requests if you previously used the jQuery.ajaxSetup function:
The jQuery.ajaxSetup function with request headers:

Code
jQuery.ajaxSetup({ headers: { Authorization : 'Bearer ' + token }});

The options.fetchRemoteService with request headers:

Code
options.fetchRemoteService = { headers: { Authorization : 'Bearer ' + token }}; var dashboardControl = new DashboardControl(document.getElementById('holder1'), options)

How to Revert to Previous Behavior

If you want to continue to use jQuery Ajax in the Web Dashboard Control, refer to the following snippets based on the platform.

You cannot register more than one type of remote service in your application; use either fetchRemoteService or ajaxRemoteService.

ASP.NET Core, Angular, React, Vue

Code
options.ajaxRemoteService = { headers: { } }; var dashboardControl = new DashboardControl(document.getElementById('holder1'), options);

ASP.NET MVC, ASP.NET Web Forms, Blazor

Handle the BeforeRender event and place the following code in the event handler:

JavaScript
function onBeforeRender(s) { const dashboardControl = s.getDashboardControl(); dashboardControl.option('fetchRemoteService', undefined); dashboardControl.option('ajaxRemoteService', {}); }

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.