Breaking Change T1198625
Visible to All Users

Report Viewer (JavaScript-based) no longer depends on the Knockout library

What Changed

We redesigned our JavaScript framework components to be platform-independent. The JavaScript Report Viewer no longer relies on the Knockout.js library and uses native rendering mechanisms. This enables us to develop a native Document Viewer for Angular components.

Reasons for Change

  • Our current implementation relies on the KO (Knockout.js) library — a library that is no longer maintained. The use of unsupported libraries may lead to undesired maintenance issues for both our customers and the development team.
  • Lack of native development methodologies: customers may be unable to take full advantage of JavaScript framework capabilities, resulting in reduced performance, or integration challenges.

Impact on Existing Apps

These changes may affect applications with client-side customizations related to:

  • ReportPreview and TabPanel properties
  • Parameters and Edit Field values
  • Custom editor templates
  • Toolbar actions with Knockout-computed properties

How to Update Existing Apps

Since the Document Viewer component no longer uses the Knockout library, model properties can now be accessed directly without using a ko.Observable function call.

If you want to subscribe to property changes, you must use the event mechanism:

JavaScript
const disposableSubscription = model.events.on('propertyChanged', (args) => { if(args.propertyName === 'propertyName') { const newVal = args.newValue; *** } });

If the editor template that uses our model with observable properties has been changed in the application, the onValueChanged event must now be added because the editor will no longer automatically update the value.

HTML
<script type="text/html" id="custom-parameter"> <div data-bind="dxNumberBox: { value: value, onValueChanged: onValueChanged, showSpinButtons: true, min: 1, max: 8 }"> </div> </script>

How to Revert to Previous Behavior

The following code shows how to revert the previous behavior:

Properties

JavaScript
function beforeRender(sender, args) { const reportPreview = sender.GetReportPreview(); reportPreview.zoom(0.5); reportPreview.showMultipagePreview(true); const tabPanel = sender.GetPreviewModel().tabPanel; tabPanel.width(600); }

Parameters

JavaScript
function ParametersInitialized(sender, args) { var parameter1 = args.ActualParametersInfo.filter( x => x.parameterDescriptor.name == "Person1")[0]; var parameter2 = args.ActualParametersInfo.filter( x => x.parameterDescriptor.name == "Person2")[0]; var preValue = null; parameter1.value.subscribe(function (newVal) { var lookUps = parameter2.lookUpValues().filter( x => x.value != newVal); preValue && lookUps.push(preValue); preValue = parameter2.lookUpValues().filter( x => x.value == newVal)[0]; parameter2.lookUpValues(lookUps); }); parameter1.value('Tom'); args.Submit(); }

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.