devexpress-reporting 23.1.5 → 23.2.1-alpha-23254-1700

package/dist/html/templates.html

@@ -13,26 +13,26 @@
 <script type="text/html" id="dxrd-borders">
     <div class="dxrd-bordereditor" data-bind="dxBorderEditor: { value: value, disabled: disabled }"></div>
 </script><script type="text/html" id="dxrd-colorpicker">
-    <div data-bind="dxColorBox: { value: displayValue, placeholder: $root.getLocalization('(Not set)', 'ReportStringId.UD_PropertyGrid_NotSetText'), editAlphaChannel: true, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element), position: { at: 'left bottom', collision: 'flipfit flipfit', my: 'left top', boundary: $root.getPopupContainer($element), of: $element } }, inputAttr: { 'aria-label': displayName, id: editorInputId } }"></div>
+    <div data-bind="dxColorBox: { value: displayValue, onValueChanged: onValueChanged, placeholder: $root.getLocalization('(Not set)', 'ReportStringId.UD_PropertyGrid_NotSetText'), editAlphaChannel: true, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element), position: { at: 'left bottom', collision: 'flipfit flipfit', my: 'left top', boundary: $root.getPopupContainer($element), of: $element } }, inputAttr: { 'aria-label': displayName, id: editorInputId } }"></div>
 </script><script type="text/html" id="dxrd-expressionstring">
-    <!-- ko if: $data.value() -->
+    <!-- ko if: value -->
     <div data-bind="dxExpressionEditor: getOptions({ options: value, fieldListProvider: $root.dataBindingsProvider, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() })"></div>
     <!-- /ko -->
 </script>
 <script type="text/html" id="dxrd-field">
-    <!-- ko displayNameExtender: { path: path, dataMember: value } -->
+    <!-- ko displayNameExtender: { path: path, dataMember: value, getPath: getPath, getDataMember: getDataMember } -->
     <!-- ko if: visible -->
-    <div data-bind="dxFieldListPicker: { path: path, acceptCustomValue: true, value: value, displayValue: $displayName, itemsProvider: $root.dataBindingsProvider, treeListController: treeListController, disabled: disabled, inputAttr: {id: editorInputId} }"></div>
+    <div data-bind="dxFieldListPicker: { path: path, onValueChanged: onValueChanged, acceptCustomValue: true, value: value, displayValue: $displayName, itemsProvider: $root.dataBindingsProvider, treeListController: treeListController, disabled: disabled, inputAttr: {id: editorInputId} }"></div>
     <!-- /ko -->
     <!-- /ko -->
 </script><script type="text/html" id="dxrd-filterstring">
-    <!-- ko if: $data.value() -->
+    <!-- ko if: value -->
     <div data-bind="dxFilterEditor: { options: value, fieldListProvider: $root.dataBindingsProvider, getDisplayNameByPath: $root.getDisplayNameByPath, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() }"></div>
     <!-- /ko -->
 </script>
 
 <script type="text/html" id="dxrd-filterstringgroup">
-    <!-- ko if: $data.value() -->
+    <!-- ko if: value -->
     <div data-bind="dxFilterEditor: { options: value, fieldListProvider: $root.dataBindingsGroupProvider, getDisplayNameByPath: $root.getDisplayNameByPath, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() }"></div>
     <!-- /ko -->
 </script>
@@ -46,19 +46,13 @@
 </script>
 
 <script type="text/html" id="dxrd-objectEditorContent">
-    <!-- ko if: $data.visible() && $data.editorCreated() -->
+    <!-- ko if: $data.visible() && editorCreated -->
     <div data-bind="template: { name: 'dx-propertieseditor', data: viewmodel }"></div>
     <!-- /ko -->
 </script>
 
-<script type="text/html" id="dxrd-objectEditor">
-    <div data-bind="dxPropertyGrid: { target: ko.observable($data), level: $parent.level, textToSearch: $parent.textToSearch }"></div>
-</script>
-
-
-
 <script type="text/html" id="dxrd-commonCollectionItem">
-    <div data-bind="dxPropertyGrid: { target: value, level: editor.level + 1, parentDisabled: editor.disabled }"></div>
+    <div data-bind="template: { name: 'dx-propertieseditor', data: getProperties() }"></div>
 </script>
 <script type="text/html" id="dxrd-textalignment">
     <div class="dxrd-textalignment-editor" data-bind="dxTextAlignmentEditor: { value: value, disabled: disabled }"></div>
@@ -76,7 +70,7 @@
 </script><script type="text/html" id="dxrd-surface-template-base">
     <!-- ko ifnot: isLoading -->
     <!-- ko with: surface -->
-    <div class="dxrd-surface-wrapper" data-bind="template: templateName, click: function(_, e) { !$root.selection.disabled() && $root.selection.clickHandler($data, e); e.stopPropagation(); }">
+    <div class="dxrd-surface-wrapper" data-bind="css: { 'dxrd-context-menu-container': selected() }, template: templateName, click: function(_, e) { $data.clickHandler($root.selection, e); }, event: $root.ContextMenuDisabled && $root.ContextMenuDisabled() ? null : { contextmenu: function(_, e) { $data.reportContextMenuHandler && $data.reportContextMenuHandler($root.selection, e); }}">
     </div>
     <!-- /ko -->
     <!-- /ko -->
@@ -88,9 +82,9 @@
 
 <script type="text/html" id="dxrd-designer">
     <div tabindex="-1" data-bind="cssArray: [surfaceClass($element), { 'dx-accessibility': $data.accessibilityCompliant } ]">
-        <div class="dxrd-designer-wrapper dx-editors dxd-surface-back-color dxd-scrollbar-color" data-bind="visible: (!$data.designMode || designMode()), cssArray: [$data.rootStyle, { 'dx-rtl' : $data.rtl, 'dx-ltr': !$data.rtl }]">
+        <div class="dxrd-designer-wrapper dx-editors dxd-surface-back-color dxd-scrollbar-color" data-bind="visible: (!designMode || designMode()), cssArray: [rootStyle, { 'dx-rtl' : rtl, 'dx-ltr': !rtl }]">
             <!-- ko foreach: parts -->
-            <!-- ko template: { name: templateName, data: model }-->
+            <!-- ko template: { name: templateName, data: viewModel || model }-->
             <!-- /ko -->
             <!-- /ko -->
         </div>
@@ -211,18 +205,18 @@
             </div>
             <div class="dx-accordion-content dxd-back-primary dxd-border-primary">
                 <!-- ko foreach: (contextActions || []) -->
-                <!-- ko if: $data.templateName -->
+                <!-- ko if: $data.templateName && !isContextMenuAction -->
                 <!-- ko template: templateName  -->
                 <!-- /ko -->
                 <!-- /ko -->
-                <!-- ko if: !$data.templateName -->
+                <!-- ko if: !$data.templateName && !isContextMenuAction -->
                 <div class="dxrd-properties-grid-action" data-bind="dxclick: function() { if($data.disabled && !$data.disabled() || !$data.disabled) { clickAction($root.editableObject()); } }, css: { 'dxrd-disabled-button': $data.disabled && $data.disabled() }, visible: (ko.unwrap($data.visible) == undefined) || ko.unwrap($data.visible)">
                     <div class="dxrd-properties-grid-action-image dxd-button-back-color dxd-state-normal dxd-back-highlighted" data-bind="css: $data.imageClassName, template: {name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}, attr: { title: $data.displayText && $data.displayText() || text }"></div>
                 </div>
                 <!-- /ko -->
                 <!-- /ko -->
                 <!-- ko with: popularProperties -->
-                <div class="dxrd-position-relative" data-bind="template: { name: 'dx-propertieseditor', data: $data }"></div>
+                <div class="dxrd-position-relative" data-bind="template: { name: 'dx-propertieseditor', data: { editors: $root.popularVisibleEditors(), rtl: rtl } }"></div>
                 <!-- /ko -->
             </div>
         </div>
@@ -232,20 +226,22 @@
 
 <script type="text/html" id="dxrd-group-actions">
     <div class="dxd-back-primary2 dxrd-property-grid-actions-group">
-        <!-- ko foreach: (groupActions || []) -->
-        <div class="dxd-border-primary dxrd-properties-grid-actions-group-content" data-bind="visible: items.some(x => !x.visible || ko.unwrap(x.visible))">
-            <div class="dxd-text-primary dxrd-properties-grid-action-name" data-bind="text: group"></div>
-            <!-- ko foreach: (items || []) -->
-            <!-- ko template: { name: $data.templateName, if: $data.templateName }  -->
-            <!-- /ko -->
-            <!-- ko if: !$data.templateName -->
-            <div class="dxrd-properties-grid-action" data-bind="dxclick: function() { if($data.disabled && !$data.disabled() || !$data.disabled) { clickAction($root.editableObject()); } }, css: { 'dxrd-disabled-button': $data.disabled && $data.disabled() }, visible: (ko.unwrap($data.visible) == undefined) || ko.unwrap($data.visible)">
-                <div class="dxrd-properties-grid-action-image dxd-button-back-color dxd-state-normal dxd-back-highlighted" data-bind="css: $data.imageClassName, template: {name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}, attr: { title: $data.displayText && $data.displayText() || text }"> </div>
+        <!-- ko if: $root.ShowPopularControlActions() -->
+            <!-- ko foreach: (groupActions || []) -->
+            <div class="dxd-border-primary dxrd-properties-grid-actions-group-content" data-bind="visible: items.some(x => !x.visible || ko.unwrap(x.visible))">
+                <div class="dxd-text-primary dxrd-properties-grid-action-name" data-bind="text: group"></div>
+                <!-- ko foreach: (items || []) -->
+                <!-- ko template: { name: $data.templateName, if: $data.templateName }  -->
+                <!-- /ko -->
+                <!-- ko if: !$data.templateName -->
+                <div class="dxrd-properties-grid-action" data-bind="dxclick: function() { if($data.disabled && !$data.disabled() || !$data.disabled) { clickAction($root.editableObject()); } }, css: { 'dxrd-disabled-button': $data.disabled && $data.disabled() }, visible: (ko.unwrap($data.visible) == undefined) || ko.unwrap($data.visible)">
+                    <div class="dxrd-properties-grid-action-image dxd-button-back-color dxd-state-normal dxd-back-highlighted" data-bind="css: $data.imageClassName, template: {name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}, attr: { title: $data.displayText && $data.displayText() || text }"> </div>
+                </div>
+                <!-- /ko -->
+                <!-- /ko -->
             </div>
             <!-- /ko -->
-            <!-- /ko -->
-        </div>
-        <!-- /ko -->
+        <!-- /ko-->
     </div>
 </script><script type="text/javascript" id="dx-propertygrid-searchbox">
     <div class="dx-property-grid-search-group dx-property-grid-search-collapsed" data-bind="css: { 'dx-property-grid-search-collapsed': !isSearching() }">
@@ -258,7 +254,7 @@
 </script>
 
 <script type="text/html" id="dxrd-propertiestab">
-    <div class="dxrd-properties-wrapper" data-bind="visible: active() && visible()">
+    <div class="dxrd-properties-wrapper" data-bind="visible: active && visible">
         <div class="dxd-text-primary dxrd-properties-sub-wrapper">
             <div class="dxrd-right-panel-header">
                 <span data-bind="text: text"></span>
@@ -376,33 +372,33 @@
         </div>
     </div>
 </script><script type="text/html" id="dx-right-panel-lightweight">
-    <div class="dxrd-right-panel dx-shadow dx-shadow-right dxd-border-secondary dxd-property-grid-group-header-back-color dxd-back-primary2" data-bind="styleunit: { width: tabPanel.width }, css: tabPanel.cssClasses(), resizable: tabPanel.getResizableOptions($element, 1, $root.calculateWithZoomFactor(325))">
-        <!-- ko foreach: tabPanel.tabs -->
+    <!-- ko with: tabPanel.getViewModel() -->
+    <div class="dxrd-right-panel dx-shadow dx-shadow-right dxd-border-secondary dxd-property-grid-group-header-back-color dxd-back-primary2" data-bind="styleunit: { width: contentElement.width }, css: class, resizable: getResizableOptions($element, 1, $root.calculateWithZoomFactor(325))">
+        <!-- ko foreach: tabs -->
         <!-- ko lazy: { template: $data.template } -->
         <!-- /ko -->
         <!-- /ko -->
     </div>
+    <!-- /ko -->
 </script>
 
 <script type="text/html" id="dxrd-right-panel-template-base">
-    <!-- ko with: tabPanel -->
-    <div class="dx-shadow dx-shadow-right dxd-border-secondary dxrd-tab-panel-wrapper" data-bind="styleunit: { width: $data.headerWidth }, css: $data.cssClasses({'dx-tab-panel-collapsed':$data.collapsed }), accessibilityKeyboardHelper: $data.keyboardHelper">
-        <div class="dxrd-right-tabs dxd-side-panel-tabs-back-color dxd-back-contrast" data-bind="css: $data.cssClasses()">
+    <div class="dx-shadow dx-shadow-right dxd-border-secondary dxrd-tab-panel-wrapper" data-bind="styleunit: { width: width }, css: class, dxMutationObserver: keyboardHelper">
+        <div class="dxrd-right-tabs dxd-side-panel-tabs-back-color dxd-back-contrast" data-bind="css: tabsElement.class">
             <!-- ko foreach: $data.tabs -->
-            <div role="button" class="dxrd-tab-item dx-accessibility-rightpanel-button dxd-side-panel-tab-back-color dxd-back-highlighted dx-accessibility-focus-border-accented" data-bind="dxAction: { model: $data, action: function(s) { $parent.toggleTabVisibility({ model: s }); }}, css: { 'dxd-state-active dxd-state-no-hover': active, 'dxrd-tab-item-disabled': disabled }, attr: { title: $data.text, 'aria-label': $data.text, 'aria-expanded': $data.active }, visible: visible">
-                <div class="dxrd-image-padding" data-bind="css: $data.imageClassName, template: {name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}"> </div>
+            <div role="button" class="dxrd-tab-item dx-accessibility-rightpanel-button dxd-side-panel-tab-back-color dxd-back-highlighted dx-accessibility-focus-border-accented" data-bind="dxAction: { action: function(s) { $data.click(); }}, css: css.class, attr: { title: text, 'aria-label': text, 'aria-expanded': active }, visible: visible">
+                <div class="dxrd-image-padding" data-bind="css: image.class, template: {name: image.templateName, if: !!ko.unwrap($data.image.templateName)}"> </div>
             </div>
             <!-- /ko -->
         </div>
 
-        <div class="dxrd-right-panel dxd-property-grid-group-header-back-color dxd-back-primary2" data-bind="styleunit: { width: $data.width }, css: $data.cssClasses(), resizable: $data.getResizableOptions($element, 50, 396)">
+        <div class="dxrd-right-panel dxd-property-grid-group-header-back-color dxd-back-primary2" data-bind="styleunit: { width: contentElement.width }, css: contentElement.class, resizable: getResizableOptions($element, 50, 396)">
             <!-- ko foreach: $data.tabs -->
             <!-- ko lazy: { template: $data.template } -->
             <!-- /ko -->
             <!-- /ko -->
         </div>
     </div>
-    <!-- /ko -->
 </script>
 <script type="text/html" id="dx-right-panel-switcher">
     <div class="dx-right-panel-switcher">
@@ -410,21 +406,21 @@
     </div>
 </script><script type="text/html" id="dxrd-toolbar-template-base">
     <div class="dxrd-toolbar-wrapper dxd-back-secondary-invariant dx-shadow-top">
-        <div class="dxrd-toolbar" data-bind="template: {name: 'dxrd-toolbar-tmplt', data: actionLists.toolbarItems }"></div>
+        <div class="dxrd-toolbar" data-bind="template: {name: 'dxrd-toolbar-tmplt', data: actionLists.getViewModel().toolbarItems }"></div>
     </div> 
 </script>
 
 <script type="text/html" id="dxrd-toolbar-tmplt">
     <!-- ko foreach: $data -->
-    <!-- ko if: $data.templateName -->
-    <!-- ko template: { name: $data.templateName, data: $data.contentData || $data } -->
+    <!-- ko if: templateName -->
+    <!-- ko template: { name: templateName, data: contentData || $data } -->
     <!-- /ko -->
     <!-- /ko -->
-    <!-- ko if: !$data.templateName -->
-    <div class="dxrd-toolbar-item" data-bind="visible: visible, class: 'dxrd-toolbar-item-' + $index(), css: {'dxrd-toolbar-item-with-separator dxd-border-primary': $data.hasSeparator } ">
-        <div role="button" class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" data-bind="attr: { 'aria-label': $data.displayText && $data.displayText() || text, 'aria-disabled': ko.unwrap($data.disabled) ? 'true' : 'false', 'aria-pressed': $data.selected ? ($data.selected() ? 'true' : 'false') : null }" >
-            <div data-bind="template: { name: ko.unwrap($data.imageTemplateName), if: !!ko.unwrap($data.imageTemplateName)}, attr: { class: 'dxrd-toolbar-item-image dxd-state-normal dxd-icon-highlighted ' + (ko.unwrap($data.imageClassName) || ''), title: $data.displayText && $data.displayText() || text }, }, dxclick: function() { if((typeof $data.disabled === 'function') && !disabled() || !disabled) { clickAction($root.model && $root.model()); } }, css: {'dxrd-disabled-button': disabled, 'dxd-button-back-color dxd-back-highlighted dxd-state-active': $data.selected }"> </div>
-            <div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: $data.hasSeparator"></div>
+    <!-- ko if: !templateName -->
+    <div class="dxrd-toolbar-item" data-bind="visible: visible, css: actionClass">
+        <div role="button" class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" data-bind="attr: block.attr" >
+            <div data-bind="template: { name: image.templateName, if: !!image.templateName }, attr: { class: image.class, title: displayText }, dxclick: click"> </div>
+            <div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: hasSeparator"></div>
         </div>
     </div>
     <!-- /ko -->
@@ -453,7 +449,16 @@
     </div>
 </script><script type="text/html" id="dxrd-zoom-select-template">
     <div class="dxrd-toolbar-item-zoom" data-bind="visible: visible">
-        <div class="dxrd-toolbar-item-zoom-editor" data-bind="dxSelectBox: { items: zoomLevels, value: $data.zoom, displayExpr: function(val) { return Math.round((val || this.option('value')) * 100) + '%'; }, displayCustomValue: true, acceptCustomValue: true, onCustomItemCreating: onCustomItemCreating, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true }"></div>
+        <div class="dxrd-toolbar-item-zoom-editor" data-bind="dxSelectBox: { 
+            items: widget.dataSource,
+            value: widget.value, 
+            onValueChanged: widget.onValueChanged, 
+            displayExpr: widget.displayExpr, 
+            displayCustomValue: true, 
+            acceptCustomValue: true, 
+            onCustomItemCreating: widget.onCustomItemCreating, 
+            disabled: disabled, 
+            dropDownOptions: { container: getPopupContainer($element) }, useItemTextAsTitle: true }"></div>
     </div>
 </script>
 <script type="text/html" id="dx-editor-addons">
@@ -482,34 +487,36 @@
 </script>
 <script type="text/html" id="dx-collectioneditor">
     <div class="dx-collectioneditor">
-        <div data-bind="dxdAccordion: { collapsed: collapsed, alwaysShow: alwaysShow }">
+        <div data-bind="dxdAccordion: { collapsed: collapsed, setCollapsed: setCollapsed, getCollapsed: getCollapsed, setCollapsedChangedEvent: setCollapsedChangedEvent, alwaysShow: alwaysShow }, dxMutationObserver: keyboardHelper">
             <div class="dx-collectioneditor-header dx-accordion-header">
                 <div class="dx-editor-header">
                     <div role="treeitem" class="dx-field dx-accessibility-focus-border-accented dxrd-accessibility-accordion-trigger" data-bind="attr: {
-                        'aria-expanded': alwaysShow() || !collapsed() ? 'true' : 'false',
+                        'aria-expanded': alwaysShow || !collapsed ? 'true' : 'false',
                         'aria-owns': contentId,
                         'id': headerId,
                     }">
                         <!-- ko if: showButtons-->
+                        <!-- ko with: buttons -->
                         <div class="dx-collectioneditor-actions-wrapper">
-                            <!-- ko if: isVisibleButton('up') -->
-                            <div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: up, disabled: isDisabledButton('up'), icon: 'dxrd-svg-operations-moveup', iconClass: 'dx-image-moveup' }, attr: { title: getDisplayTextButton('up') }"></div>
+                            <!-- ko if: up.visible -->
+                            <div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButton: { onClick: up.action, disabled: up.disabled, icon: 'dxrd-svg-operations-moveup', template: up.template }, attr: { title: up.text }"></div>
                             <!-- /ko -->
-                            <!-- ko if: isVisibleButton('down') -->
-                            <div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: down, disabled: isDisabledButton('down'), icon: 'dxrd-svg-operations-movedown', iconClass: 'dx-image-movedown' }, attr: { title: getDisplayTextButton('down') }"></div>
+                            <!-- ko if: down.visible -->
+                            <div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButton: { onClick: down.action, disabled: down.disabled, icon: 'dxrd-svg-operations-movedown', template: down.template }, attr: { title: down.text }"></div>
                             <!-- /ko -->                            
                             <div class="dx-collectioneditor-action-separator"></div>
-                            <!-- ko if: isVisibleButton('add') -->
-                            <div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: add, disabled: isDisabledButton('add'), icon: 'dxrd-svg-operations-add', iconClass: 'dx-image-add' }, attr: { title: getDisplayTextButton('add') }"></div>
+                            <!-- ko if: add.visible -->
+                            <div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButton: { onClick: add.action, disabled: add.disabled, icon: 'dxrd-svg-operations-add', template: add.template }, attr: { title: add.text }"></div>
                             <!-- /ko -->
-                            <!-- ko if: isVisibleButton('delete') -->
-                            <div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: remove, disabled: isDisabledButton('delete'), icon: 'dxrd-svg-operations-remove', iconClass: 'dx-image-remove' }, attr: { title: getDisplayTextButton('delete') }"></div>
+                            <!-- ko if: delete.visible -->
+                            <div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButton: { onClick: delete.action, disabled: delete.disabled, icon: 'dxrd-svg-operations-remove', template: delete.template }, attr: { title: delete.text }"></div>
                             <!-- /ko -->
                         </div>
                         <!-- /ko -->
+                        <!-- /ko -->
                         <!-- ko if: displayName -->
                         <div class="dx-collectioneditor-header-text dxd-text-primary" data-bind="styleunit: { 'paddingLeft': padding }">
-                            <div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed() }"></div>
+                            <div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed }"></div>
                             <div class="dx-group-header-font dxd-text-primary" data-bind="text: displayName, attr: { title: displayName }"></div>
                         </div>
                         <!-- /ko -->
@@ -517,23 +524,21 @@
                 </div>
             </div>
             <div role="group" class="dx-accordion-content" data-bind="attr: {
-                'aria-hidden': !alwaysShow() && collapsed() ? 'true' : 'false',
+                'aria-hidden': !alwaysShow && collapsed ? 'true' : 'false',
                 'aria-labelledby': headerId,
                 'id': contentId
             }">
-                <div data-bind="visible: !disabled(), dxScrollView: { showScrollbar: 'onHover', disabled: !showScroll, useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }">
-                    <!-- ko if: values().length === 0 && showButtons -->
+                <div data-bind="visible: !disabled, dxScrollView: { showScrollbar: 'onHover', disabled: !showScroll, useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }">
+                    <!-- ko if: values.length === 0 -->
                     <div class="dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info">
-                        <span class="dx-collectioneditor-empty-text" data-bind="text: getDisplayTextEmptyArray()"></span>
+                        <span class="dx-collectioneditor-empty-text" data-bind="text: emptyAreaText"></span>
                     </div>
                     <!-- /ko -->
-                    <!-- ko if: values().length !== 0 -->
+                    <!-- ko if: values.length !== 0 -->
                     <div class="dx-collectioneditor-items" data-bind="foreach: values">
-                        <div data-bind="with: $parent.createCollectionItemWrapper($parents[1], $index, $element)">
-                            <div class="dx-collectioneditor-item-container dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented" data-bind="attr: { 'aria-selected': $parents[1].selectedIndex() === $index() }, dxAction: { model: $data, action: $parents[1].select }, css: { 'dxd-state-selected' : $parents[1].selectedIndex() === $index() }">
+                            <div class="dx-collectioneditor-item-container dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented" data-bind="attr: { 'aria-selected': selected }, dxAction: { model: $data, action: select }, css: { 'dxd-state-selected' : selected }">
                                 <div class="dx-collection-item"></div>
                             </div>
-                        </div>
                     </div>
                     <!-- /ko -->                    
                 </div>
@@ -554,7 +559,7 @@
 </script>
 
 <script type="text/html" id="dx-commonCollectionItem">
-    <div data-bind="dxPropertyGrid: { target: value, level: editor.level + 1, parentDisabled: editor.disabled }"></div>
+    <div data-bind="template: { name: 'dx-propertieseditor', data: getProperties() }"></div>
 </script><script type="text/html" id="item-with-title">
     <div class="dx-listitem-with-title" data-bind="text: $data.display, attr: { title: $data.display }"></div>
 </script>
@@ -586,18 +591,18 @@
     </div>
 </script><script type="text/html" id="dx-property-editor">
     <div class="dx-editor" data-bind="visible: visible">
-        <div class="dx-group" data-bind="dxdAccordion: { collapsed: collapsed }">
+        <div class="dx-group" data-bind="dxdAccordion: { collapsed: collapsed, setCollapsed: setCollapsed, getCollapsed: getCollapsed, setCollapsedChangedEvent: setCollapsedChangedEvent }">
             <div class="dx-editor-header">
                 <div class="dx-field" data-bind="attr: { 
                         role: 'treeitem',
                         'id': isComplexEditor && headerId,
                         'aria-owns': isComplexEditor && contentId,
-                        'aria-expanded': isComplexEditor && (alwaysShow() || !collapsed() ? 'true' : 'false') },
+                        'aria-expanded': isComplexEditor && (alwaysShow || !collapsed ? 'true' : 'false') },
                     css: {'dxrd-accessibility-accordion-trigger dx-accessibility-focus-border-accented': isComplexEditor}">
                         <div class="dx-field-label dx-accordion-header dxd-text-primary" data-bind="styleunit: padding, css: { 'dx-accordion-empty': templateName === 'dx-emptyHeader' }">
                             <!-- ko if: isComplexEditor -->
                             <div data-bind="enable: templateName === 'dx-emptyHeader'">
-                                <div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed() }"></div>
+                                <div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed }"></div>
                                 <!-- ko if: !!$data.textToSearch -->
                                 <div class="dx-group-header-font" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName }"></div>
                                 <!-- /ko -->
@@ -608,17 +613,17 @@
                             <!-- /ko -->
                             <!-- ko if: !isComplexEditor -->
                             <!-- ko if: !!$data.textToSearch -->
-                            <label class="propertygrid-editor-displayName" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName, 'for': editorInputId }, css: { 'dx-field-label-required': isRequired }, style: { fontWeight: isPropertyModified() ? 'Bold' : ''}"></label>
+                            <label class="propertygrid-editor-displayName" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName, 'for': editorInputId }, css: { 'dx-field-label-required': isRequired }, style: { fontWeight: ko.unwrap(isPropertyModified) ? 'Bold' : ''}"></label>
                             <!-- /ko -->
                             <!-- ko ifnot: !!$data.textToSearch -->
-                            <label class="propertygrid-editor-displayName" data-bind="text: displayName, attr: { 'title': displayName, 'for': editorInputId }, css: { 'dx-property-required': isRequired }, style: { fontWeight: isPropertyModified() ? 'Bold' : ''}"></label>
+                            <label class="propertygrid-editor-displayName" data-bind="text: displayName, attr: { 'title': displayName, 'for': editorInputId }, css: { 'dx-property-required': isRequired }, style: { fontWeight: ko.unwrap(isPropertyModified) ? 'Bold' : ''}"></label>
                             <!-- /ko -->
                             <!-- /ko -->                            
                     </div>
                     <div class="dx-field-value" data-bind="css: { 'dxd-border-accented': $data.isPropertyHighlighted }">
                         <div data-bind="service: { name: 'createEditorAddOn' }"></div>
                         <!-- ko if: templateName !== 'dx-emptyHeader' -->
-                        <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: $data.isRendered } -->
+                        <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->
                         <!-- /ko -->
                         <!-- /ko -->
                     </div>
@@ -628,9 +633,9 @@
             <div class="dx-editor-content dx-accordion-content" role="group" data-bind="attr: {
                 'aria-labelledby': headerId,
                 'id': contentId,
-                'aria-hidden': !alwaysShow() && collapsed() ? 'true' : 'false'
+                'aria-hidden': !alwaysShow && collapsed ? 'true' : 'false'
             }">
-                <!-- ko if: (!$data.editorCreated || editorCreated) -->
+                <!-- ko if: editorCreated -->
                 <!-- ko template: contentTemplateName -->
                 <!-- /ko -->
                 <!-- /ko -->
@@ -708,7 +713,7 @@
     <div data-bind="css: { 'dx-rtl' : rtl }">
         <div class="dx-editors">
             <div class="dx-fieldset">
-                <!-- ko foreach: getEditors() -->
+                <!-- ko foreach: editors -->
                 <!-- ko template: editorTemplate -->
                 <!-- /ko -->
                 <!-- /ko -->
@@ -1451,22 +1456,22 @@
 </script>
 
 <script type="text/html" id="dx-treelist-edit-action">
-    <div class="dx-treelist-action-edit dx-accordion-button" data-bind="dxButtonWithTemplate: { icon: 'dxrd-svg-operations-edit', iconClass: 'dx-image-edit',  onClick: function() { $parent.collapsed(!$parent.collapsed()); } }, visible: $parent.hasContent, attr: { title: $data.displayText() }"></div>
+    <div class="dx-treelist-action-edit dx-accordion-button" data-bind="dxButtonWithTemplate: { icon: 'dxrd-svg-operations-edit', iconClass: 'dx-image-edit',  onClick: $parent.reverseCollapsed }, visible: $parent.hasContent, attr: { title: $data.displayText() }"></div>
 </script>
 
 <script type="text/html" id="dx-treelist-item-actions-with-edit">
-    <!-- ko template: { name: 'dx-treelist-edit-action', data: treeListEditAction() }  -->
+    <!-- ko template: { name: 'dx-treelist-edit-action', data: treeListEditAction }  -->
     <!-- /ko -->
     <!-- ko template: 'dx-treelist-item-actions'  -->
     <!-- /ko -->
 </script>
 <script type="text/html" id="dx-treelist-item-ellipsis">
-    <div class="dx-treelist-item dxd-list-item-back-color dxd-back-highlighted" data-bind="styleunit: padding, click: renderNext">
+    <div class="dx-treelist-item dxd-list-item-back-color dxd-back-highlighted" data-bind="styleunit: padding, click: events.click">
         <div class="dx-treelist-collapsedbutton"></div>
         <div class="dx-treelist-caption">
             <div class="dx-treelist-selectedcontent">
                 <div class="dx-treelist-text-wrapper">
-                    <div class="dx-treelist-ellipsis-text dxd-text-accented dxd-hyperlink-color" data-bind="text: $data.text()"></div>
+                    <div class="dx-treelist-ellipsis-text dxd-text-accented dxd-hyperlink-color" data-bind="text: text"></div>
                 </div>
             </div>
         </div>
@@ -1487,7 +1492,7 @@
 </script>
 
 <script type="text/html" id="dx-treelist-accordion-item">
-    <div data-bind="dxdAccordionExt: { collapsed: collapsed, lazyContentRendering: true }">
+    <div data-bind="dxdAccordionExt: { collapsed: collapsed, lazyContentRendering: true, setCollapsedChangedEvent: setCollapsedChangedEvent }">
         <!-- ko template: templates.headerItem -->
         <!-- /ko -->
         <div class="dx-fieldset dx-accordion-content dxd-back-primary">
@@ -1500,42 +1505,32 @@
 </script> 
 
 <script type="text/html" id="dx-treelist-item-actions-container">
-    <div class="dx-treelist-action-container" data-bind="visible: isSelected() || isHovered()">
-        <!-- ko template: actionsTemplate() -->
+    <div class="dx-treelist-action-container" data-bind="visible: isSelected || isHovered">
+        <!-- ko template: actionsTemplate -->
         <!-- /ko -->
     </div>
 </script>
 
 <script type="text/html" id="dx-treelist-header-item">
-    <div role="treeitem" class="dx-treelist-item dxd-list-item-back-color dxd-back-highlighted dx-accessibility-treelist-item dx-accessibility-focus-border-accented" data-bind="event: { 
-        dblclick: function() { $data.dblClickHandler ? $data.dblClickHandler($data) : $data.toggleCollapsed() },
-        mouseenter: mouseenter,
-        mouseleave: mouseleave 
-    },
-    styleunit: padding, css: $data.getCssRules(),
-    attr: { 
-          'aria-expanded': (hasItems && (!collapsed() ? 'true' : 'false')),
-          'aria-selected': (isSelected() || isMultiSelected()) ? 'true' : 'false',
-          'aria-level':level + 1,
-          'aria-label': text,
-          'aria-setsize': parent ? parent.items().length : 0,
-          'aria-posinset': parent ? parent.items.indexOf($data) + 1 : 0 }">
-        <!-- ko if: $data.hasItems-->
+    <div role="treeitem" class="dx-treelist-item dxd-list-item-back-color dxd-back-highlighted dx-accessibility-treelist-item dx-accessibility-focus-border-accented" data-bind="event: events,
+    styleunit: padding, css: cssRules,
+    attr: attr">
+        <!-- ko if: hasItems-->
         <div class="dx-treelist-collapsedbutton" data-bind="css: nodeImageClass, template: 'dxrd-svg-collapsed', click: toggleCollapsed"></div>
         <!-- /ko -->
-        <div class="dx-treelist-caption" data-bind="style: { 'padding-left': $data.hasItems ? '0px': '18px' }">
+        <div class="dx-treelist-caption" data-bind="style: { 'padding-left': hasItems ? '0px': '18px' }">
             <!-- ko if: actions && actions.length > 0 -->
             <!-- ko template: templates.actionsContainer -->
             <!-- /ko  -->
             <!-- /ko  -->
             <!-- ko if: isDraggable -->
-            <div class="dx-treelist-selectedcontent" data-bind="click: toggleSelected, draggable: dragDropHandler">
+            <div class="dx-treelist-selectedcontent" data-bind="click: function(s, e) { $root.hideContextMenu && $root.hideContextMenu(); toggleSelected(s, e); }, event: $root.ContextMenuDisabled && $root.ContextMenuDisabled() ? null : { contextmenu: toggleSelected }, draggable: dragDropHandler">
                 <!-- ko template: templates.headerItemContent -->
                 <!-- /ko -->
             </div>
             <!-- /ko -->
             <!-- ko ifnot: isDraggable -->
-            <div class="dx-treelist-selectedcontent" data-bind="click: toggleSelected">
+            <div class="dx-treelist-selectedcontent" data-bind="click: function(s, e) { $root.hideContextMenu && $root.hideContextMenu(); toggleSelected(s, e); }, event: $root.ContextMenuDisabled && $root.ContextMenuDisabled() ? null : { contextmenu: toggleSelected }">
                 <!-- ko template: templates.headerItemContent -->
                 <!-- /ko -->
             </div>
@@ -1546,10 +1541,10 @@
 
 <script type="text/html" id="dx-treelist-item-text-content">
     <div class="dx-treelist-text-wrapper">
-        <!--ko if: treeListController.searchEnabled -->
-        <div class="dx-treelist-text dx-highlighted-search-text" data-bind="searchHighlighting: { text: text, textToSearch: treeListController.textToSearch, searchOptions: treeListController.searchOptions }, attr: { title: text }"></div>
+        <!--ko if: searchModel.searchEnabled -->
+        <div class="dx-treelist-text dx-highlighted-search-text" data-bind="searchHighlighting: { text: text, textToSearch: searchModel.textToSearch, searchOptions: searchModel.searchOptions }, attr: { title: text }"></div>
         <!-- /ko  -->
-        <!--ko ifnot: treeListController.searchEnabled -->
+        <!--ko ifnot: searchModel.searchEnabled -->
         <div class="dx-treelist-text" data-bind="text: text, attr: { title: text }"></div>
         <!-- /ko  -->
     </div>
@@ -1557,7 +1552,7 @@
 
 
 <script type="text/html" id="dx-treelist-header-item-caption-content">
-    <div class="dx-treelist-image" data-bind="css: $data.imageClassName, template: {name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}, attr: { title: text }"> </div>
+    <div class="dx-treelist-image" data-bind="css: imageClassName, template: { name: imageTemplateName, if: !!imageTemplateName }, attr: { title: text }"> </div>
     <!-- ko template: templates.itemTextContent -->
     <!-- /ko -->
 </script><script type="text/html" id="dx-treelist-item-with-hover">
@@ -1574,7 +1569,7 @@
 </script>
 
 <script type="text/html" id="dx-treelist-accordion-item-with-hover">
-    <div data-bind="dxdAccordionExt: { collapsed: collapsed, lazyContentRendering: true }">
+    <div data-bind="dxdAccordionExt: { collapsed: collapsed, lazyContentRendering: true, setCollapsedChangedEvent: setCollapsedChangedEvent }">
         <!-- ko template: "dx-treelist-header-item-with-hover" -->
         <!-- /ko -->
         <div class="dx-fieldset dx-accordion-content dxd-back-primary">
@@ -1588,21 +1583,17 @@
 
 <script type="text/html" id="dx-treelist-header-item-with-hover">
     <div class="dx-background-inheritor dxd-back-highlighted dxd-state-selected">
-        <div class="dx-treelist-item dx-fontsize-reestablished dxd-list-item-back-color" data-bind="event: {
-         dblclick: function() { $data.dblClickHandler ? $data.dblClickHandler($data) : $data.toggleCollapsed() },
-         mouseenter: mouseenter,
-         mouseleave: mouseleave
-    }, styleunit: padding, css: { 'dx-treelist-item-selected dxd-state-selected dxd-back-secondary': isSelected() || isMultiSelected() }">
+        <div class="dx-treelist-item dx-fontsize-reestablished dxd-list-item-back-color" data-bind="event: events, styleunit: padding, css: { 'dx-treelist-item-selected dxd-state-selected dxd-back-secondary': isSelected || isMultiSelected }">
             <div class="dx-treelist-collapsedbutton" data-bind="css: nodeImageClass, template: 'dxrd-svg-collapsed', click: toggleCollapsed, style: { 'visibility': hasItems ? 'visible' : 'hidden' }"></div>
             <div class="dx-treelist-caption">
                 <!-- ko if: actions && actions.length > 0 -->
-                <div class="dx-treelist-action-container" data-bind="visible: $data.isSelected() || $data.isHovered()">
-                    <!-- ko template: actionsTemplate() -->
+                <div class="dx-treelist-action-container" data-bind="visible: isSelected || isHovered">
+                    <!-- ko template: actionsTemplate -->
                     <!-- /ko -->
                 </div>
                 <!-- /ko  -->
                 <div class="dx-treelist-selectedcontent" data-bind="click: toggleSelected,  draggable: isDraggable ? dragDropHandler : null">
-                    <div class="dx-treelist-image" data-bind="css: $data.imageClassName, template: {name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}, attr: { title: text }"> </div>
+                    <div class="dx-treelist-image" data-bind="css: imageClassName, template: { name: imageTemplateName, if: !!imageTemplateName }, attr: { title: text }"> </div>
                     <div class="dx-treelist-text-wrapper">
                         <div class="dx-treelist-text" data-bind="text: text, attr: { title: text }"></div>
                     </div>
@@ -1612,7 +1603,13 @@
     </div>
 </script><script type="text/html" id="dx-treelist">
     <div role="group" class="dx-treelist dxd-text-primary">
-        <!-- ko template: $data.visibleItems !== undefined ? 'dx-treelist-paginate' : 'dx-treelist-common' -->
+        <!-- ko foreach: items -->
+        <!-- ko lazy: { resolver: resolver, innerBindings: { template: templateName } } -->
+        <!-- /ko -->
+        <!-- ko if: !collapsed -->
+        <!-- ko template: { name: 'dx-treelist' } -->
+        <!-- /ko -->
+        <!-- /ko -->
         <!-- /ko -->
     </div>
 </script>
@@ -1621,27 +1618,6 @@
     <div class="dxrd-treelist-search-panel" data-bind="dxTextBox: { mode: 'search',  value:value, valueChangeEvent: 'keyup', showClearButton: true, placeholder: searchPlaceholder()}"></div>
 </script>
 
-<script type="text/html" id="dx-treelist-common">
-    <!-- ko foreach: items -->
-    <!-- ko lazy: { resolver: resolver, innerBindings: { template: templateName } } -->
-    <!-- /ko -->
-    <!-- ko if: !$data.collapsed() -->
-    <!-- ko template: { name: 'dx-treelist', data: $data } -->
-    <!-- /ko -->
-    <!-- /ko -->
-    <!-- /ko -->
-</script>
-
-<script type="text/html" id="dx-treelist-paginate">
-    <!-- ko foreach: visibleItems -->
-    <!-- ko template: templateName -->
-    <!-- /ko -->
-    <!-- ko if: !$data.collapsed() -->
-    <!-- ko template: { name: 'dx-treelist', data: $data } -->
-    <!-- /ko -->
-    <!-- /ko -->
-    <!-- /ko -->
-</script>
 <script type='text/html' id='dxdd-connection-line'>
     <svg class="dxdd-connection-line dxrd-width-100 dxrd-height-100" >
         <line class="dxd-qb-relationship-line-color" data-bind="attr: { x1: startPoint().relativeX, y1: startPoint().relativeY, x2: endPoint().relativeX, y2: endPoint().relativeY }" />
@@ -2206,7 +2182,7 @@
 </script>
 
 <script type='text/html' id='dxqb-properties-wrapper'>
-    <div class="dxrd-properties-wrapper" data-bind="visible: active() && visible()">
+    <div class="dxrd-properties-wrapper" data-bind="visible: active && visible">
         <div class="dxd-text-primary dxrd-properties-wrapper-full-height">
             <!-- ko with: model -->
             <div class="dxrd-properties-grid dxd-border-primary dxrd-top-0px" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true }" >
@@ -2274,21 +2250,21 @@
     <!-- /ko -->
 </script>
 <script type="text/html" id="dxqb-collectioneditor-template">
-    <div class="dxrd-accordion-collection-item" data-bind="dxdAccordion: { collapsed: collapsed }">
+    <div class="dxrd-accordion-collection-item" data-bind="dxdAccordion: { collapsed: collapsed, setCollapsed: setCollapsed, getCollapsed: getCollapsed, setCollapsedChangedEvent: setCollapsedChangedEvent }">
         <div class="dxrd-group-header dx-accordion-header">
             <div>
-                <div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="css: { 'dx-image-expanded': !collapsed() }, template: 'dxrd-svg-collapsed'"></div>
-                <div class="dx-group-header-font" data-bind="text: $root.getLocalization($parent.name), attr: { title: $root.getLocalization($parent.name) }"></div>
+                <div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="css: { 'dx-image-expanded': !collapsed }, template: 'dxrd-svg-collapsed'"></div>
+                <div class="dx-group-header-font" data-bind="text: $root.getLocalization(value.name), attr: { title: $root.getLocalization(value.name) }"></div>
             </div>
         </div>
         <div class="dx-accordion-content">
-            <div data-bind="dxPropertyGrid: { target: value, level: 1, parentDisabled: editor.disabled }"></div>
+            <div data-bind="template: { name: 'dx-propertieseditor', data: getProperties({ level: 1 }) }"></div>
         </div>
     </div>
 </script>
 
 <script type='text/html' id='dxqb-properties-wrapper-editorlist'>
-    <div class="dxrd-properties-wrapper" data-bind="visible: active() && visible()">
+    <div class="dxrd-properties-wrapper" data-bind="visible: active && visible">
         <div  class="dxd-text-primary dxrd-height-100">
             <!-- ko with: model -->
             <div class="dxrd-properties-grid dxd-border-primary dxrd-top-0px" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true }" >
@@ -2342,7 +2318,7 @@
         </div>
     </div>
 </script><script type="text/html" id="dxqb-expressionstring">
-    <!-- ko if: $data.value() -->
+    <!-- ko if: $data.value -->
     <div data-bind="dxExpressionEditor: getOptions({ options: value, fieldListProvider: $root.parametersBindingsProvider, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() })"></div>
     <!-- /ko -->
 </script><script id="dxqb-filtereditor-changeparameter" type="text/html">
@@ -2395,11 +2371,13 @@
 </script>
 
 <script type="text/html" id="dxqb-treelist-header-item-with-search">
-    <div class="dx-treelist-item dxd-list-item-back-color dxd-back-highlighted" data-bind="event: { dblclick: function() { $data.dblClickHandler ? $data.dblClickHandler($data) : $data.toggleCollapsed() } }, styleunit: padding, css: { 'dx-treelist-item-selected dxd-state-selected': isSelected() || isMultiSelected() }">
+    <div class="dx-treelist-item dxd-list-item-back-color dxd-back-highlighted" data-bind="event: { dblclick: events.dblclick },
+            styleunit: padding,
+            css: { 'dx-treelist-item-selected dxd-state-selected': isSelected || isMultiSelected }">
         <div class="dx-treelist-collapsedbutton"></div>
         <div class="dx-treelist-caption">
             <div class="dx-treelist-selectedcontent" data-bind="click: toggleSelected,  draggable: isDraggable ? dragDropHandler : null">
-                <div class="dx-treelist-image" data-bind="css: $data.imageClassName, template: {name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}, attr: { title: text }"> </div>
+                <div class="dx-treelist-image" data-bind="css: imageClassName, template: { name: imageTemplateName, if: !!imageTemplateName }, attr: { title: text }"> </div>
                 <!-- ko template: { name: 'dx-treelist-item-text-content' } -->
                 <!-- /ko -->
             </div>
@@ -2760,12 +2738,12 @@
             </div>
         </div>
         <div class="dx-jsonwizard-parameter-middle-container">
-            <div data-bind="dxTextBox: { value: name, placeholder: $data.namePlaceholder() }, dxValidator: { validationRules: $parent.editor.editorOptions.nameValidationRules || [] }"></div>
+            <div data-bind="dxTextBox: { value: name, placeholder: $data.namePlaceholder() }, dxValidator: { validationRules: nameValidationRules || [] }"></div>
         </div>
         <div class="dx-jsonwizard-parameter-right-container">
             <div class="dx-jsonwizard-parameter">
                 <div data-bind="dxTextBox: { value: _editingValue, placeholder: $data.valuePlaceholder() }, visible: !$data.isExpression()"></div>
-                <div data-bind="dxExpressionEditor: { options: _expression, fieldListProvider: $parent.editor.editorOptions.itemsProvider, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() }, visible: $data.isExpression"></div>
+                <div data-bind="dxExpressionEditor: { options: _expression, fieldListProvider: itemsProvider, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() }, visible: $data.isExpression"></div>
             </div>
         </div>
         <!-- ko template: { name: 'dx-wizard-menu-box-editorswitch', data: $data } -->
@@ -2817,14 +2795,14 @@
                 <div class="dx-treelist-collapsedbutton" data-bind="css: nodeImageClass"></div>
                 <div class="dx-treelist-caption">
                     <!-- ko if: actions && actions.length > 0 -->
-                    <div class="dx-treelist-action-container" data-bind="visible: isSelected() || isHovered()">
+                    <div class="dx-treelist-action-container" data-bind="visible: isSelected || isHovered">
                         <!-- ko foreach: actions -->
-                        <!-- ko if: $data.templateName -->
+                        <!-- ko if: templateName -->
                         <!-- ko template: templateName  -->
                         <!-- /ko -->
                         <!-- /ko -->
-                        <!-- ko if: !$data.templateName -->
-                        <div class="dx-treelist-action" data-bind="dxButtonWithTemplate: { onClick: function() { clickAction($parent); }, icon: $data.imageTemplateName, iconClass: $data.imageClassName, disabled: $data.disabled && $data.disabled() }, attr: { title: text }"></div>
+                        <!-- ko if: !templateName -->
+                        <div class="dx-treelist-action" data-bind="dxButtonWithTemplate: { onClick: function() { clickAction($parent); }, icon: imageTemplateName, iconClass: imageClassName, disabled: ko.unwrap(disabled) }, attr: { title: text }"></div>
                         <!-- /ko -->
                         <!-- /ko -->
                     </div>
@@ -2837,7 +2815,7 @@
                          return true;
                     }"></div>
                             <div class="dx-treelist-text dx-treelist-text-with-checkbox">
-                                <div class="dx-queryname-textbox" data-bind="dxTextBox: { value: queryName }"></div>
+                                <div class="dx-queryname-textbox" data-bind="dxTextBox: { value: queryName, onValueChanged: queryNameHasChanged }"></div>
                             </div>
                         </div>
                     </div>
@@ -2961,7 +2939,7 @@
 </script>
 
 <script type="text/html" id="dx-treelist-accordion-item-with-checkbox">
-    <div data-bind="dxdAccordionExt: { collapsed: collapsed, lazyContentRendering: true }">
+    <div data-bind="dxdAccordionExt: { collapsed: collapsed, lazyContentRendering: true, setCollapsedChangedEvent: setCollapsedChangedEvent }">
         <!-- ko template: "dx-treelist-header-item-with-checkbox" -->
         <!-- /ko -->
         <div class="dx-fieldset dx-accordion-content dxd-back-primary">
@@ -2975,49 +2953,45 @@
 
 <script type="text/html" id="dx-treelist-header-item-with-checkbox">
 <div class="dx-background-inheritor dxd-back-highlighted dxd-state-selected">
-    <div data-bind="event: {
-         dblclick: function() { $data.dblClickHandler ? $data.dblClickHandler($data) : $data.toggleCollapsed() },
-         mouseenter: mouseenter,
-         mouseleave: mouseleave
-         },
-         attr: { class: 'dx-treeview-item dx-treelist-item dx-fontsize-reestablished dxd-list-item-back-color ' + ($data.hasItems ? 'dx-treelist-list-item-content ' : 'dx-treelist-field-item-content ') + ($data.isSelected() ? 'dx-treelist-item-selected dxd-state-selected dxd-back-secondary' : '') },
+    <div data-bind="event: events,
+         attr: { class: 'dx-treeview-item dx-treelist-item dx-fontsize-reestablished dxd-list-item-back-color ' + (hasItems ? 'dx-treelist-list-item-content ' : 'dx-treelist-field-item-content ') + (isSelected ? 'dx-treelist-item-selected dxd-state-selected dxd-back-secondary' : '') },
          styleunit: padding, css: { 'dx-state-hover': isHovered }">
-        <!-- ko ifnot: $data.hasItems-->
-        <!-- ko if: $data.showIcon -->
-        <div class="dx-treelist-image" data-bind="css: $data.imageClassName, template: {name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}, attr: { title: text }"> </div>
+        <!-- ko ifnot: hasItems-->
+        <!-- ko if: showIcon -->
+        <div class="dx-treelist-image" data-bind="css: imageClassName, template: { name: imageTemplateName, if: !!imageTemplateName  }, attr: { title: text }"> </div>
         <!-- /ko -->
-        <!-- ko ifnot: $data.showIcon -->
+        <!-- ko ifnot: showIcon -->
         <div class="dx-treelist-collapsedbutton" data-bind="css: nodeImageClass"></div>
         <!-- /ko -->
         <!-- /ko -->
-        <!-- ko if: $data.hasItems -->
+        <!-- ko if: hasItems -->
         <div class="dx-treelist-collapsedbutton" data-bind="css: nodeImageClass, visible: hasItems, template: 'dxrd-svg-collapsed', click: toggleCollapsed"></div>
         <!-- /ko -->
         <div class="dx-treelist-caption">
             <!-- ko if: actions && actions.length > 0 -->
-            <div class="dx-treelist-action-container" data-bind="visible: isSelected() || isHovered()">
+            <div class="dx-treelist-action-container" data-bind="visible: isSelected || isHovered">
                 <!-- ko foreach: actions -->
-                <!-- ko if: $data.templateName -->
+                <!-- ko if: templateName -->
                 <!-- ko template: templateName  -->
                 <!-- /ko -->
                 <!-- /ko -->
-                <!-- ko if: !$data.templateName -->
-                <div class="dx-treelist-action" data-bind="dxButtonWithTemplate: { onClick: function() { clickAction($parent); }, icon: $data.imageTemplateName, iconClass: $data.imageClassName, disabled: $data.disabled && $data.disabled() }, attr: { title: text }"></div>
+                <!-- ko if: !templateName -->
+                <div class="dx-treelist-action" data-bind="dxButtonWithTemplate: { onClick: function() { clickAction($parent); }, icon: imageTemplateName, iconClass: imageClassName, disabled: ko.unwrap(disabled) }, attr: { title: text }"></div>
                 <!-- /ko -->
                 <!-- /ko -->
             </div>
             <!-- /ko  -->
-            <div class="dx-treelist-selectedcontent" data-bind="event: { dblclick: function() { $data.dblClickHandler && $data.dblClickHandler($data); } }, click: toggleSelected,  draggable: isDraggable ? dragDropHandler : null, css: { 'dxrd-disabled': $data.data.disabled && $data.data.disabled() }">
+            <div class="dx-treelist-selectedcontent" data-bind="click: toggleSelected,  draggable: isDraggable ? dragDropHandler : null, css: { 'dxrd-disabled': data.disabled }">
                 <div class="dx-treelist-text-wrapper">
                     <div class="dx-add-queries-page-checkbox" data-bind="dxCheckBox: { value: data.checked, disabled: data.selectionDisabled }, click: function(treeNode, e) {
                          treeNode.data.toggleChecked();
                          e.stopPropagation();
                          return true;
                     }"></div>
-                    <!--ko if: treeListController.searchEnabled -->
-                    <div class="dx-treelist-text dx-highlighted-search-text dx-treelist-text-with-checkbox" data-bind="searchHighlighting: { text: text, textToSearch: treeListController.textToSearch, searchOptions: treeListController.searchOptions }, attr: { title: text }"></div>
+                    <!--ko if: searchModel.searchEnabled -->
+                    <div class="dx-treelist-text dx-highlighted-search-text dx-treelist-text-with-checkbox" data-bind="searchHighlighting: { text: text, textToSearch: searchModel.textToSearch, searchOptions: searchModel.searchOptions }, attr: { title: text }"></div>
                     <!-- /ko  -->
-                    <!--ko ifnot: treeListController.searchEnabled -->
+                    <!--ko ifnot: searchModel.searchEnabled -->
                     <div class="dx-treelist-text dx-treelist-text-with-checkbox" data-bind="text: text, attr: { title: text }"></div>
                     <!-- /ko  -->
                 </div>
@@ -3029,7 +3003,7 @@
 
 <script type="text/html" id="dx-treelist-action-with-popover">
     <div class="dx-treelist-action-with-popover dxrd-display-inline-block" >
-        <div class="dx-treelist-action" data-bind="dxButtonWithTemplate: { onClick: function() { clickAction($parent); }, icon: $data.imageTemplateName, iconClass: $data.imageClassName , disabled: $data.disabled && $data.disabled() }, attr: { title: text }"></div>
+        <div class="dx-treelist-action" data-bind="dxButtonWithTemplate: { onClick: function() { clickAction($parent); }, icon: imageTemplateName, iconClass: imageClassName , disabled: ko.unwrap(disabled) }, attr: { title: text }"></div>
             <!-- ko template: { name: 'dx-popover-list-items', data: ko.utils.extend($parent.data, { position: $root.rtl ? 'left' : 'right', popupContainer: $root.getPopupContainer }) }-->
             <!-- /ko  -->
     </div>
@@ -3113,7 +3087,7 @@
 </script>
 
 <script type="text/html" id="dx-objectdatasource-expression-popup">
-    <!-- ko if: $data.value() -->
+    <!-- ko if: $data.value -->
     <div data-bind="dxExpressionEditor: getOptions({ options: value, fieldListProvider: value().itemsProvider, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() })"></div>
     <!-- /ko -->
 </script>
@@ -3142,13 +3116,13 @@
 </script>
 
 <script type="text/html" id="dxrd-parameter-collection-item">
-    <div class="dx-accordion" data-bind="dxdAccordion: { collapsed: collapsed }">
-        <div class="dxrd-group-header dx-accordion-header dxd-text-primary dxd-border-primary dxrd-border-bottom-0"  data-bind="styleunit: { 'marginLeft' : editor.padding }, css: { 'dxrd-group-header-collapsed': collapsed() }">
-            <div class="dx-collapsing-image dxrd-display-inline-block" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed() }" ></div>
-            <span class="dxrd-group-header-text dxd-text-primary" data-bind="text: value().name"></span>
+    <div class="dx-accordion" data-bind="dxdAccordion: $data">
+        <div class="dxrd-group-header dx-accordion-header dxd-text-primary dxd-border-primary dxrd-border-bottom-0"  data-bind="styleunit: { 'marginLeft' : padding }, css: { 'dxrd-group-header-collapsed': collapsed }">
+            <div class="dx-collapsing-image dxrd-display-inline-block" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed }" ></div>
+            <span class="dxrd-group-header-text dxd-text-primary" data-bind="text: value.name"></span>
         </div>
         <div class="dx-accordion-content dxd-border-primary">
-            <div data-bind="dxPropertyGrid: { target: value, level: editor.level + 1 }"></div>
+            <div data-bind="template: { name: 'dx-propertieseditor', data: getProperties() }"></div>
         </div>
     </div>
 </script>
@@ -3158,15 +3132,15 @@
         <div class="dx-collectioneditor dxrd-height-100" >
             <div class="dxrd-datasource-parameters-collection">
                 <div class="dxrd-datasource-parameters-container dxd-border-secondary" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true  }">
-                    <!-- ko if: values().length === 0 -->
+                    <!-- ko if: values.length === 0 -->
                     <div class="dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info">
-                        <span class="dxrd-datasource-parameters-empty-text" data-bind="text: getDisplayTextEmptyArray()"></span>
+                        <span class="dxrd-datasource-parameters-empty-text" data-bind="text: emptyAreaText"></span>
                     </div>
                     <!-- /ko -->
-                    <!-- ko if: values().length !== 0 -->
+                    <!-- ko if: values.length !== 0 -->
                     <div class="dx-collectioneditor-items" data-bind="foreach: values">
-                        <div class="dx-background-inheritor dxd-back-highlighted dxd-state-selected" data-bind="with: $parent.createCollectionItemWrapper($parents[1], $index, $element)">
-                            <div class="dx-collectioneditor-item-container dx-fontsize-reestablished dxd-list-item-back-color" data-bind="dxclick: $parents[1].select, css: { 'dxd-state-selected dxd-back-secondary' : $parents[1].selectedIndex() === $index() }">
+                        <div class="dx-background-inheritor dxd-back-highlighted dxd-state-selected">
+                            <div class="dx-collectioneditor-item-container dx-fontsize-reestablished dxd-list-item-back-color" data-bind="dxclick: select, css: { 'dxd-state-selected dxd-back-secondary' : selected }">
                                 <div class="dx-collection-item"></div>
                             </div>
                         </div>
@@ -3175,8 +3149,8 @@
                 </div>
             </div>
             <div class="dxrd-collectioneditor-wizard-buttons" data-bind="visible: showButtons">
-                <div class="dxrd-collectioneditor-action" data-bind="dxButton: { onClick: add, text: getDisplayTextButton('add') }, attr: { title: getDisplayTextButton('add') }"></div>
-                <div class="dxrd-collectioneditor-action" data-bind="dxButton: { onClick: remove, disabled: selectedIndex() === null, text: $parent.removeButtonTitle }, attr: { title: $parent.removeButtonTitle }"></div>
+                <div class="dxrd-collectioneditor-action" data-bind="dxButton: { onClick: buttons.add.action, text: buttons.add.text }, attr: { title: buttons.add.text }"></div>
+                <div class="dxrd-collectioneditor-action" data-bind="dxButton: { onClick: buttons.delete.action, disabled: selectedIndex === null, text: $parent.removeButtonTitle }, attr: { title: $parent.removeButtonTitle }"></div>
             </div>
         </div>
     </div>
@@ -3327,15 +3301,15 @@
     <div class="dxrv-preview-date-range-mobile">
         <div class="dx-fieldset">
             <div class="dx-field">
-                <div data-bind="dxSelectBox: { dataSource: items, displayExpr: 'displayName', value: popupModel.textRangeValue, useItemTextAsTitle: true , placeholder: $root.getLocalization('Select Period', 'AnalyticsCoreStringId.Mobile_DateRange_SelectPeriod') }"></div>
+                <div data-bind="dxSelectBox: { dataSource: items, displayExpr: 'displayName', onValueChanged: popupModel.onTextChanged, useItemTextAsTitle: true , placeholder: popupModel.selectPeriodPlaceholder }"></div>
             </div>
             <div class="dx-field">
                 <div class="dx-fieldset-column">
-                    <div class="dx-fieldset-header" data-bind="text: $root.getLocalization('From','AnalyticsCoreStringId.Mobile_DateRange_From')"></div>
+                    <div class="dx-fieldset-header" data-bind="text: popupModel.fromText"></div>
                     <div class="dxrv-daterange-editor-button" data-bind="css: { 'dx-button-default': popupModel.startButton.focused }, dxButton: popupModel.startButton"></div>
                 </div>
                 <div class="dx-fieldset-column dx-fieldset-column-right">
-                    <div class="dx-fieldset-header" data-bind="text: $root.getLocalization('Until','AnalyticsCoreStringId.Mobile_DateRange_Until')"></div>
+                    <div class="dx-fieldset-header" data-bind="text: popupModel.untilText"></div>
                     <div class="dxd-back-secondary dx-fieldset-column-separator"></div>
                     <div class="dxrv-daterange-editor-button" data-bind="css: { 'dx-button-default': popupModel.endButton.focused }, dxButton: popupModel.endButton"></div>
                 </div>
@@ -3343,11 +3317,11 @@
             <div class="dx-field">
                 <div class="dxrv-daterange-editor-item">
                     <!-- ko if: popupModel.startButton.focused -->
-                    <!-- ko template: { name: 'dxrv-daterange-calendar', data: _createTemplateData(startDate, undefined) } -->
+                    <!-- ko template: { name: 'dxrv-daterange-calendar', data: startRange } -->
                     <!-- /ko -->
                     <!-- /ko -->
                     <!-- ko if: popupModel.endButton.focused -->
-                    <!-- ko template: { name: 'dxrv-daterange-calendar', data: _createTemplateData(endDate, startDate) } -->
+                    <!-- ko template: { name: 'dxrv-daterange-calendar', data: endRange } -->
                     <!-- /ko -->
                     <!-- /ko -->
                 </div>        
@@ -3355,16 +3329,16 @@
         </div>
     </div>
 </script><script type="text/html" id="dxrd-preview-page-mobile">
-    <div class="dxrdp-content" data-bind="dxclick: clickToBrick, styleunit: { width: width, height: height }, autoFit: { autoFitBy: $root.reportPreview.autoFitBy, zoom: zoom, width: originalWidth, height: originalHeight, previewSize: $root.reportPreview.previewSize, brickLoading: brickLoading, skipIfInvisible: true }">
+    <div class="dxrdp-content" data-bind="dxclick: clickToBrick, styleunit: { width: width, height: height }, autoFit: autoFitOptions">
         <div class="dxrdp-loading-wrapper" data-bind="styleunit: { width: width, height: height, lineHeight: height }, style: { 'background-color': color }, visible: pageLoading, text: loadingText">
         </div>
         <img class="dxrd-width-100 dxrd-height-100" data-bind="attr: { src: displayImageSrc }, style:{ 'background-color': color }" />
-        <div class="dxrdp-active-border" data-bind="css: { 'dxrdp-active': active() && $parents[1].blocks().length > 1 }, visible: !$root.slideOptions.readerMode"></div>
+        <div class="dxrdp-active-border" data-bind="css: { 'dxrdp-active': active && hasBricks }, visible: !readerMode"></div>
         <!-- ko foreach: activeBricks -->
-        <!-- ko template: { name: "dxrd-page-brick-mobile", data: $data } -->
+        <!-- ko template: { name: "dxrd-page-brick-mobile" } -->
         <!--/ko-->
         <!--/ko-->
-        <!-- ko if: !brickLoading() && $data.editingFields-->
+        <!-- ko if: !brickLoading && editingFields-->
         <!-- ko foreach: editingFields -->
         <!-- ko template: template -->
         <!--/ko-->
@@ -3374,17 +3348,17 @@
 </script>
 
 <script type="text/html" id="dxrd-page-brick-mobile">
-    <div class="dxrd-report-preview-brick" data-bind="style: { top: topP, left: $data.leftP, right: $data.rightP, height: heightP, width: widthP }, css: { 'dxrd-report-preview-brick-selected': $data.active }">
+    <div class="dxrd-report-preview-brick" data-bind="style: { top: topP, left: leftP, right: rightP, height: heightP, width: widthP }, css: { 'dxrd-report-preview-brick-selected': active }">
     </div>
 </script><script type="text/html" id="dxrdp-search-mobile">
     <!-- ko if: $data.enabled -->
     <div class="dxrdp-search-wrapper" data-bind="styleunit:{ height: height }, dxrdSearchBar: $data">
         <div class="dxrd-mobile-search">
-            <div class="dxrdp-taptosearch" data-bind="visible: !$data.editorVisible(), dxclick: function(s, e) { $data.focusEditor(e); }">
-                <div class="dxrdp-taptosearch-text" data-bind="text: $root.getLocalization('Tap here to Search', 'ASPxReportsStringId.WebDocumentViewer_Mobile_TapHereToSearch')"></div>
+            <div class="dxrdp-taptosearch" data-bind="visible: !editorVisible, dxclick: focusEditor">
+                <div class="dxrdp-taptosearch-text" data-bind="text: tapToSearchText"></div>
             </div>
-            <div class="dxrdp-search-panel" data-bind="visible: $data.editorVisible()">
-                <div class="dxrdp-search-editor" data-bind="dxTextBox: { value: searchText, onEnterKey: function() { $data.startSearch(); } }"></div>
+            <div class="dxrdp-search-panel" data-bind="visible: editorVisible">
+                <div class="dxrdp-search-editor" data-bind="dxTextBox: { value: searchText, onValueChanged: onSearchTextChanged, onEnterKey: startSearch }"></div>
             </div>
         </div>
     </div>
@@ -3442,7 +3416,7 @@
 </script>
 
 <script type="text/html" id="dxrd-menu-parameters-content">
-    <div data-bind="dxPopup: { wrapperAttr: { class: 'dxrd-menu-parameters-popup' }, showTitle: false, width: '100vw', height: '100vh', visible: visible, container: $root.getPopupContainer($element), }">
+    <div data-bind="dxPopup: { wrapperAttr: { class: 'dxrd-menu-parameters-popup' }, showTitle: false, onHidden: onHidden, width: '100vw', height: '100vh', visible: visible, container: $root.getPopupContainer($element), }">
         <!-- ko template: { name: 'dxrv-preview-parameters-mobile', data: $data }-->
         <!-- /ko -->
     </div>
@@ -3452,7 +3426,7 @@
     <div class="dxrdp-parameters-mobile" data-bind="dxValidationGroup: {}, css: className">
         <div class="dxrdp-parameters-title" data-bind="text: $data.title"> </div>
         <div class="dxrdp-parameters-scroll" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true, bounceEnabled: false }">
-            <!-- ko template: { name: $data.contentTemplate, data: model }-->
+            <!-- ko template: { name: $data.contentTemplate, data: model.getViewModel() }-->
             <!-- /ko -->
         </div>
         <div class="dxrdp-parameters-buttons text-buttons" data-bind="foreach: { data: $data.actionButtons }, cacheElement: { action: function(element) { $data.cacheElementContent(element); } }">
@@ -3464,30 +3438,24 @@
     </div>
 </script>
 
-<script type="text/html" id="dxrv-preview-parameters-mobile-content">
-    <div class="dx-fieldset">
-        <div data-bind="dxPropertyGrid: { target: ko.observable($data) }"></div>
-    </div>
-</script>
-
 <script id="dxrv-range-parameter-mobile" type="text/html">
-    <div data-bind="dxrvDateRangeEditor: {value: $data.value(), isMobile: true }"></div>
+    <div data-bind="dxrvDateRangeEditor: {value: value, isMobile: true }"></div>
 </script><script type="text/html" id="dxrdp-surface-mobile">
-    <div class="dxrd-preview-wrapper dxrdp-fullscreen dxrd-preview-surface" data-bind="style: { pointerEvents: $data.documentId === null ? 'none' : '', touchEvents: $data.documentId === null ? 'none' : '' }, styleunit: { top: topOffset, height: previewWrapperSize().height, width: previewWrapperSize().width }, slide: $root.slideOptions, mobileZoom: { zoom: mobileZoom, zoomUpdating: zoomUpdating }, dxclick: function(s,e) { if(!$root.brickEventsDisabled()) { $data.showActions(s,e); } }, css: { 'dxrp-editing-fields-hightlighted': editingFieldsHighlighted }">
+    <div class="dxrd-preview-wrapper dxrdp-fullscreen dxrd-preview-surface" data-bind="style: { pointerEvents: surfaceEvents, touchEvents: surfaceEvents }, styleunit: { top: topOffset, height: previewWrapperSizeHeight, width: previewWrapperSizeWidth }, slide: slideOptions, mobileZoom: mobileZoomOptions, dxclick: click, css: { 'dxrp-editing-fields-hightlighted': editingFieldsHighlighted }">
         <!-- ko template: {name: 'dxrd-preview-progress-bar', data: progressBar }-->
         <!-- /ko -->
 
         <div class="dxrd-mobile-content">
-            <div class="dxrd-mobile-gallery" data-bind="style: { pointerEvents: $data.zoomUpdating() ? 'none' : '', touchEvents: $data.zoomUpdating() ? 'none' : '' }, dxGalleryReportPreview: { dataSource: $root.gallery.items, gallery: $root.gallery, animationEnabled: $root.gallery.animationEnabled, disabled: $data.zoomUpdating, selectedIndex: $root.gallery.selectedIndex, width:'100%', height: '100%', showIndicator: false, loop: true, onSelectionChanged: onSlide, swipeEnabled: $root.slideOptions.swipeEnabled }">
+            <div class="dxrd-mobile-gallery" data-bind="style: { pointerEvents: galleryEvents, touchEvents: galleryEvents }, dxGalleryReportPreview: { dataSource: gallery.items, gallery: gallery, slideOptions: slideOptions, animationEnabled: gallery.animationEnabled, disabled: zoomUpdating, width:'100%', height: '100%', showIndicator: false, loop: true, onSelectionChanged: onSlide, onOptionChanged: gallery.onOptionChanged }">
                 <div data-options="dxTemplate: { name: 'item' }">
-                    <div class="dxrd-scrollView-mobile" data-bind="dxScrollView: $root.reportPreview.getScrollViewOptions()">
-                        <div class="dxrd-gallery-blocks" data-bind="style: $root.gallery.contentSize()">
-                            <!-- ko foreach: $data.blocks() -->
-                            <!-- ko if: $data.page -->
-                            <div class="dxrd-gallery-block" data-bind="styleunit: position, css: $data.classSet">
-                                <div class="dxrd-gallery-block-content" data-bind="styleunit: { width: Math.max(page.width(), position().width), height: Math.max(page.height(), position().height) }, style: { 'background-color': page.color }">
-                                    <div class="dxrdp-active-border" data-bind="css: { 'dxrdp-active': page.active() && $parents[0].blocks().length > 1, 'dxrdp-page-padding': $parents[0].blocks().length > 1 }, visible: $root.slideOptions.readerMode"></div>
-                                    <div class="dxrd-mobile-page" data-bind="styleunit: { width: page.width, height: page.height }, style: { pointerEvents: $root.brickEventsDisabled() ? 'none' : '', touchEvents: $root.brickEventsDisabled() ? 'none' : '' }">
+                    <div class="dxrd-scrollView-mobile" data-bind="dxScrollView: reportPreview.scrollViewOptions">
+                        <div class="dxrd-gallery-blocks" data-bind="style: gallery.contentSize">
+                            <!-- ko foreach: blocks -->
+                            <!-- ko if: page -->
+                            <div class="dxrd-gallery-block" data-bind="styleunit: position, css: classSet">
+                                <div class="dxrd-gallery-block-content" data-bind="styleunit: { width: Math.max(page.width, position.width), height: Math.max(page.height, position.height) }, style: { 'background-color': page.color }">
+                                    <div class="dxrdp-active-border" data-bind="css: { 'dxrdp-active': page.active && active, 'dxrdp-page-padding': page.active && active }, visible: reportPreview.slideOptions.readerMode"></div>
+                                    <div class="dxrd-mobile-page" data-bind="styleunit: { width: page.width, height: page.height }, style: { pointerEvents: reportPreview.pageEvents, touchEvents: reportPreview.pageEvents }">
                                         <!-- ko template: { name :'dxrd-preview-page-mobile', data: page } -->
                                         <!-- /ko -->
                                     </div>
@@ -3504,20 +3472,20 @@
     <input type="text" class="dxrd-display-none" />
 </script>
 <script type="text/html" id="dxrp-editing-field-container">
-    <div class="dxrp-editing-field-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle(), zoom: zoom, css: { active: active(), readonly: field.readOnly() }">
-        <div class="dxrp-editing-field-borders" data-bind="style: borderStyle()"></div>
+    <div class="dxrp-editing-field-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle, zoom: zoom, css: { active: active, readonly: field.readOnly }">
+        <div class="dxrp-editing-field-borders" data-bind="style: borderStyle"></div>
         <div class="dxrp-editing-field-content" data-bind="dxclick: activateEditor">
-            <!-- ko if: !active() || field.readOnly()  -->
-            <!-- ko if: htmlValue()  -->
-            <div class="dxrp-editing-field-readonly-text" data-bind="style: textStyle(), css: {'dxrp-editing-field-text-wordwrap': !wordWrap}">
-                <div class="dxrp-editing-field-text-html dxrp-editing-field-text-html-complex" data-bind="style: breakOffsetStyle(), html: htmlValue()"></div>
+            <!-- ko if: !active || field.readOnly  -->
+            <!-- ko if: field.htmlValue  -->
+            <div class="dxrp-editing-field-readonly-text" data-bind="style: textStyle, css: {'dxrp-editing-field-text-wordwrap': !wordWrap}">
+                <div class="dxrp-editing-field-text-html dxrp-editing-field-text-html-complex" data-bind="style: breakOffsetStyle, html: field.htmlValue"></div>
             </div>
             <!--/ko-->
-            <!-- ko ifnot: htmlValue()  -->
-            <div class="dxrp-editing-field-readonly-text" data-bind="style: textStyle(), css: {'dxrp-editing-field-text-wordwrap': !wordWrap}, text: field.editValue()"></div>
+            <!-- ko ifnot: field.htmlValue  -->
+            <div class="dxrp-editing-field-readonly-text" data-bind="style: textStyle, css: {'dxrp-editing-field-text-wordwrap': !wordWrap}, text: field.editValue"></div>
             <!--/ko-->
             <!--/ko-->
-            <!-- ko if: active() && !field.readOnly() -->
+            <!-- ko if: active && !field.readOnly -->
             <!-- ko template: { name: editorTemplate, data: data } -->
             <!--/ko-->
             <!--/ko-->
@@ -3526,45 +3494,45 @@
 </script>
 
 <script type="text/html" id="dxrp-editing-field-text">
-    <textarea class="dxrp-editing-field-text" data-bind="value: value, valueUpdate: 'keypress', style: textStyle(), event: { blur: hideEditor, keyup: keypressAction }"></textarea>
+    <textarea class="dxrp-editing-field-text" data-bind="value: value, valueUpdate: 'keypress', style: textStyle, event: { blur: hideEditor, keyup: keypressAction }"></textarea>
 </script>
 
 <script type="text/html" id="dxrp-editing-field-mask">
-    <div class="dxrp-editing-field-mask" data-bind="dxTextBox: options, childStyle: { style: textStyle(), selector: '.dx-texteditor-input'}"></div>
+    <div class="dxrp-editing-field-mask" data-bind="dxTextBox: options, childStyle: { style: textStyle, selector: '.dx-texteditor-input'}"></div>
 </script>
 
 <script type="text/html" id="dxrp-editing-field-number">
-    <div class="dxrp-editing-field-mask" data-bind="dxNumberBox: options, childStyle: { style: textStyle(), selector: '.dx-texteditor-input'}"></div>
+    <div class="dxrp-editing-field-mask" data-bind="dxNumberBox: options, childStyle: { style: textStyle, selector: '.dx-texteditor-input'}"></div>
 </script>
 
 <script type="text/html" id="dxrp-editing-field-datetime">
-    <div  class="dxrp-editing-field-datetime dxrd-width-100" data-bind="dxDateBox: $data.getOptions({ dropDownOptions: { container: $root.getPopupContainer($element), position: { at: 'left bottom', collision: 'flipfit flip', my: 'left top', boundary: $root.getPopupContainer($element), of: $element } } }), childStyle: { style: textStyle(), selector: '.dx-texteditor-input'}"></div>
+    <div  class="dxrp-editing-field-datetime dxrd-width-100" data-bind="dxDateBox: $data.getOptions({ dropDownOptions: { container: $root.getPopupContainer($element), position: { at: 'left bottom', collision: 'flipfit flip', my: 'left top', boundary: $root.getPopupContainer($element), of: $element } } }), childStyle: { style: textStyle, selector: '.dx-texteditor-input'}"></div>
 </script>
 
 <script type="text/html" id="dxrp-editing-field-image">
-    <div class="dxrp-editing-field-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle() ">
+    <div class="dxrp-editing-field-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle ">
         <!-- ko template: 'dxrp-editing-field-image-editor' -->
         <!-- /ko -->
     </div>
 </script>
 
 <script type="text/html" id="dxrp-editing-field-image-editor">
-    <div class="dxrd-height-100 dxrd-width-100" data-bind="dxPictureEditor: $data.getPictureEditorOptions()"></div>
+    <div class="dxrd-height-100 dxrd-width-100" data-bind="dxPictureEditor: $data"></div>
 </script>
 
 <script type="text/html" id="dxrp-editing-field-checkbox">
-    <div class="dxrp-editing-field-check-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle(), zoom: zoom, click: onClick">
-        <div class="dxrp-editing-field-check" tabindex="1" data-bind="style: checkStyle(), template: {name: $data.checkStateStyleIcon, if: !!ko.unwrap($data.checkStateStyleIcon)}"> </div>
+    <div class="dxrp-editing-field-check-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle, zoom: zoom, click: onClick">
+        <div class="dxrp-editing-field-check" tabindex="1" data-bind="style: checkStyle, template: { name: checkStateStyleIcon, if: !!checkStateStyleIcon }"> </div>
     </div>
 </script>
 
 <script type="text/html" id="dxrp-editing-field-radio">
-    <div class="dxrp-editing-field-check-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle(), zoom: zoom, click: onClick">
-        <div class="dxrp-editing-field-check" data-bind="style: checkStyle()">
+    <div class="dxrp-editing-field-check-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle, zoom: zoom, click: onClick">
+        <div class="dxrp-editing-field-check" data-bind="style: checkStyle">
             <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 760 760" preserveAspectRatio="xMidYMid meet">
                 <g fill="#010101" stroke="none">
                     <path d="M32,380a348,348 0 1,0 696,0a348,348 0 1,0 -696,0" class="highlight dxrd-stroke-width-50 dxrd-stroke-rgb-0"  />
-                    <path d="M185,380a195,195 0 1,0 390,0a195,195 0 1,0 -390,0" data-bind="style: { fill: checked() ? 'black' : 'transparent' }" />
+                    <path d="M185,380a195,195 0 1,0 390,0a195,195 0 1,0 -390,0" data-bind="style: { fill: checked ? 'black' : 'transparent' }" />
                 </g>
             </svg>
         </div>
@@ -3572,14 +3540,14 @@
 </script>
 
 <script type="text/html" id="dxrp-character-comb-editing-field">
-    <div class="dxrp-editing-field-charactercomb dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle(), dxclick: activateEditor, zoom: zoom, css: { active: active(), readonly: field.readOnly() }">
-        <!-- ko if: !active() || field.readOnly()  -->
+    <div class="dxrp-editing-field-charactercomb dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle, dxclick: activateEditor, zoom: zoom, css: { active: active, readonly: field.readOnly }">
+        <!-- ko if: !active || field.readOnly  -->
         <!-- ko foreach: cells -->
         <div class="dxrp-editing-field-charactercomb-cell" data-bind="style: style, text: text"></div>
         <!-- /ko -->
         <!-- /ko -->
-        <!-- ko if: active() && !field.readOnly() -->
-        <textarea  class="dxrp-editing-field-text dxrd-background-white" data-bind="value: field._editorValue, valueUpdate: 'keypress', style: textStyle(), event: { blur: hideEditor, keyup: keypressAction }"></textarea>
+        <!-- ko if: active && !field.readOnly -->
+        <textarea  class="dxrp-editing-field-text dxrd-background-white" data-bind="value: field.editorValue, valueUpdate: 'keypress', style: textStyle, event: { blur: hideEditor, keyup: keypressAction }"></textarea>
         <!--/ko-->
     </div>
 </script>
@@ -3590,41 +3558,42 @@
         </form>
     </div>
     <div data-bind="dxPopup: {
-        width: popupWidth,
-        height: popupHeight,
-        title: getPopupTitle(),
-        visible: popupVisible,
+        width: popupOptions.width,
+        height: popupOptions.height,
+        title: popupOptions.title,
+        visible: popupOptions.visible,
         showCloseButton: true,
-        toolbarItems: popupButtons,
-        wrapperAttr: { class: 'dxrd-print-dialog dx-editors dx-widget' },
-        container: $root.getPopupContainer($element), 
-        position: { of: $root.getPopupContainer($element) }
+        onHidden: popupOptions.onHidden,
+        toolbarItems: popupOptions.toolbarItems,
+        wrapperAttr: popupOptions.wrapperAttr,
+        container: popupOptions.getPopupContainer($element), 
+        position: { of: popupOptions.getPopupContainer($element) }
     }">
         <div class="dxrd-print-dialog-content">
-            <div data-bind="text: $root.getLocalization('The browser sent the document to the printer.', 'ASPxReportsStringId.WebDocumentViewer_Print_Popup_Caption')"></div>
+            <div data-bind="text: printingTexts.caption"></div>
             <p></p>
-            <!-- ko if: $data.printingTextPrefix -->
-            <div class="dxrdp-print-text-prefix" data-bind="text: printingTextPrefix"></div>  
+            <!-- ko if: printingTexts.prefix -->
+            <div class="dxrdp-print-text-prefix" data-bind="text: printingTexts.prefix"></div>  
             <!-- /ko -->
-            <a href="" class="dxrd-preview-printing-link" data-bind="click: printingLinkCallback, text: $root.getLocalization('document in PDF format', 'ASPxReportsStringId.WebDocumentViewer_Print_Popup_LinkText')"></a>
-            <!-- ko if: $data.printingTextPostfix -->
-            <div class="dxrdp-print-text-postfix" data-bind="text: printingTextPostfix"></div>
+            <a href="" class="dxrd-preview-printing-link" data-bind="click: printingLinkCallback, text: printingTexts.link"></a>
+            <!-- ko if: printingTexts.postfix -->
+            <div class="dxrdp-print-text-postfix" data-bind="text: printingTexts.postfix"></div>
             <!-- /ko -->
         </div>        
     </div>
 </script><script type="text/html" id="dxrd-preview-export-options">
-    <div class="dxrd-preview-export-options-wrapper dxrd-preview-property-wrapper" data-bind="visible: active() && visible()">
+    <div class="dxrd-preview-export-options-wrapper dxrd-preview-property-wrapper" data-bind="visible: active && visible">
     <div class="dxrd-right-panel-header dxd-text-primary">
         <span data-bind="text: $root.getLocalization('Export Options', 'DevExpress.XtraReports.UI.XtraReport.ExportOptions')"></span>
     </div>
-    <!-- ko if: model-->
     <div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); }  }">
-        <div class="dx-fieldset" data-bind="accessibilityKeyboardHelper: $data.keyboardHelper">
-            <div class="dxrd-right-panel-content dxrd-export-options-content" data-bind="dxPropertyGrid: { target: model }"></div>
+        <div class="dx-fieldset" data-bind="dxMutationObserver: keyboardHelper">
+            <div class="dxrd-right-panel-content dxrd-export-options-content" role="tree">
+                <!-- ko template: { name: 'dx-propertieseditor', data: propertyGrid } -->
+                <!-- /ko -->
+            </div>
         </div>
     </div>
-    <!-- /ko -->
-
 </div>
 </script>
 
@@ -3634,23 +3603,23 @@
             <div class="dxrd-preview-export-to dxd-button-back-color dxd-state-normal dxd-icon-highlighted" 
                 data-bind="dxMenu: {
                     wrapperAttr: { class: 'dxrd-preview-export-to dxd-button-back-color dxd-state-normal dxd-icon-highlighted' },
-                    disabled: $data.disabled(),
-                    items: items,
+                    disabled: disabled,
+                    items: widget.items,
                     cssClass: 'dxrdp-export-to-menu',
-                    onItemClick: clickAction,
-                    onSubmenuShowing: $data.eventHandlers.onSubmenuShowing($root.getPopupContainer($element), $element),
-                    onSubmenuShown: $data.eventHandlers.onSubmenuShown,
-                    onSubmenuHiding: $data.eventHandlers.onSubmenuHiding,
-                    onItemRendered: $data.eventHandlers.onItemRendered,
+                    onItemClick: click,
+                    onSubmenuShowing: widget.onSubmenuShowing(getPopupContainer($element), $element),
+                    onSubmenuShown: widget.onSubmenuShown,
+                    onSubmenuHiding: widget.onSubmenuHiding,
+                    onItemRendered: widget.onItemRendered,
                     tabIndex: '-1'
                 }">
-                <div class="dxrd-preview-export-menu-item" data-options="dxTemplate: { name: 'item' }" data-bind="attr: { title: $root.getLocalization(text, $data.textId) }">
+                <div class="dxrd-preview-export-menu-item" data-options="dxTemplate: { name: 'item' }" data-bind="attr: { title: text }">
                     <!--ko if: $data.format -->
-                    <div class="dxrd-preview-export-item-text" data-bind="text: $root.getLocalization($data.text, $data.textId)"></div>
+                    <div class="dxrd-preview-export-item-text" data-bind="text: text"></div>
                     <!-- /ko -->
                     <!--ko ifnot: $data.format -->
                     <div class="dxrd-preview-export-item-image-wrapper">
-                        <div class="dxrd-preview-export-item-image" data-bind="css: ko.unwrap($data.imageClassName), template: ko.unwrap($data.imageTemplateName)"> </div>
+                        <div class="dxrd-preview-export-item-image" data-bind="css: imageClassName, template: imageTemplateName"> </div>
                     </div>
                     <div class="dx-menu-item-popout-container">
                         <div class="dx-menu-item-popout"></div>
@@ -3659,7 +3628,7 @@
                 </div>
             </div>
         </div>
-        <div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: $data.hasSeparator"></div>
+        <div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: hasSeparator"></div>
     </div>
 </script>
 <script type="text/html" id="dxrd-page-brick-clickable">
@@ -3676,14 +3645,14 @@
 </script>
 
 <script type="text/html" id="dxrd-preview-page">
-    <div role="img" class="dxrd-report-preview-content dxrd-position-relative dxrd-width-100 dxrd-height-100"  data-bind="attr: {'aria-label': $parent.currentPageAriaLabelImgAlt($data.pageIndex) }, dxclick: clickToBrick, 'brick-selection-prog': { page: $data, preview: $parent, click: function(pageIndex) { $parent.goToPage(pageIndex) } }">
-        <div class="dxrd-report-preview-content-loading-wrapper dxrd-background-white"  data-bind="styleunit: { 'width': width() + 2, 'height': height() + 2 }, visible: pageLoading">
-            <div class="dxrd-report-preview-content-loading-panel dxrd-text-align-center"  data-bind="styleunit: { 'paddingTop': height() / 2.3 }">
+    <div role="img" class="dxrd-report-preview-content dxrd-position-relative dxrd-width-100 dxrd-height-100"  data-bind="attr: {'aria-label': currentPageAriaLabelImgAlt() }, dxclick: clickToBrick, 'brick-selection-prog': brickSelectionProg">
+        <div class="dxrd-report-preview-content-loading-wrapper dxrd-background-white"  data-bind="styleunit: { 'width': width + 2, 'height': height + 2 }, visible: pageLoading">
+            <div class="dxrd-report-preview-content-loading-panel dxrd-text-align-center"  data-bind="styleunit: { 'paddingTop': height / 2.3 }">
                 <div class="dxrd-report-preview-content-loading-panel-text" data-bind="text: loadingText"></div>
             </div>
         </div>
         <div>
-            <img class="dxrd-pointer-events-none dxrd-width-100 dxrd-height-100" data-bind="attr: { src: displayImageSrc, 'alt': $parent.currentPageAriaLabelImgAlt($data.pageIndex) }" />
+            <img class="dxrd-pointer-events-none dxrd-width-100 dxrd-height-100" data-bind="attr: { src: displayImageSrc, 'alt': currentPageAriaLabelImgAlt() }" />
             <!-- ko foreach: activeBricks -->
             <!-- ko template: { name: "dxrd-page-brick-mobile", data: $data } -->
             <!--/ko-->
@@ -3692,8 +3661,8 @@
             <!-- ko template: { name: "dxrd-page-brick-clickable", data: $data } -->
             <!--/ko-->
             <!--/ko-->
-            <!-- ko if: !brickLoading() && $data.editingFields-->
-            <div data-bind="accessibilityKeyboardHelper: $data.editingFieldsKeyboardHelper">
+            <!-- ko if: !brickLoading && $data.editingFields-->
+            <div data-bind="dxMutationObserver: editingFieldsKeyboardHelper">
                 <!-- ko foreach: editingFields -->
                 <!-- ko template: template -->
                 <!--/ko-->
@@ -3704,10 +3673,10 @@
     </div>
 </script>
 <script type="text/html" id="dxrp-popup-editing-field-image">
-    <div class="dxrp-editing-field-container" data-bind="style: containerStyle() ">
+    <div class="dxrp-editing-field-container" data-bind="style: containerStyle">
         <div class="dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="dxclick: activateEditor, css: parentPopupClass">
-            <div class="dxrp-editing-field-popup-container-cloned" data-bind="dxPainter: $data.getPainter()"></div>
-            <!-- ko template: { name: 'dx-picture-editing-popup', data: $data.getPopupData() } -->
+            <div class="dxrp-editing-field-popup-container-cloned" data-bind="dxPainter: getPainterOptions()"></div>
+            <!-- ko template: { name: 'dx-picture-editing-popup' } -->
             <!-- /ko -->
         </div>
     </div>
@@ -3715,27 +3684,27 @@
 
 <script type="text/html" id="dx-picture-editing-popup">
     <div class="dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen" data-bind="dxPopup: {
-            width: contentData.containerStyle().width,
-            height: contentData.containerStyle().height,
-            position: { boundary: $root.getPopupContainer($element), of: getPositionTarget($element), collision: 'flipfit flipfit' },
-            container: $root.getPopupContainer($element),
+            width: containerStyle.width,
+            height: containerStyle.height,
+            position: { boundary: popupData.getPopupContainer($element), of: popupData.getPositionTarget($element), collision: 'flipfit flipfit' },
+            container: popupData.getPopupContainer($element),
             showTitle: false,
-            target: $root.getPopupContainer($element),
+            target: popupData.getPopupContainer($element),
             deferRendering: false,
             hideOnOutsideClick: true,
             showCloseButton: false,
-            onContentReady: onContentReady,
-            onHiding: onHiding,
-            onShown: onShown,
-            shading: shading,
+            onContentReady: popupData.onContentReady,
+            onHiding: popupData.onHiding,
+            onShown: popupData.onShown,
+            shading: popupData.shading,
             wrapperAttr: { class: 'dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen' },
             animation: { 
                 show: { type: 'slide', duration: 0, to: { opacity: 1 }, from: { opacity: 0 } },
                 hide: { type: 'fade', duration: 100, to: { opacity: 0 }, from: { opacity: 1 } }
             },
-            visible: isVisible($element) }">
-        <!-- ko if: showContent -->
-        <!-- ko template: { name: contentTemplate, data: contentData, afterRender: $data.renderedHandler } -->
+            visible: popupData.visible }">
+        <!-- ko if: popupData.showContent -->
+        <!-- ko template: { name: popupData.contentTemplate, afterRender: popupData.renderedHandler } -->
         <!--/ko-->
         <!--/ko-->
     </div>
@@ -3743,14 +3712,15 @@
         <div class="dxrd-toolbar-item-zoom" data-bind="visible: visible">
             <div class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" >
                 <div class="dxrd-toolbar-item-zoom-editor" data-bind="dxSelectBox: {
-                    items: zoomItems, value: $data.zoom, displayExpr: displayExpr, displayCustomValue: true,
-                    acceptCustomValue: true, onCustomItemCreating: onCustomItemCreating, useItemTextAsTitle: true,
+                    items: widget.dataSource, value: widget.value, onValueChanged: widget.onValueChanged, 
+                    displayExpr: widget.displayExpr, displayCustomValue: true, acceptCustomValue: true,
+                    onCustomItemCreating: widget.onCustomItemCreating, useItemTextAsTitle: true,
                     width: 140,
                     dropDownOptions: { 
-                        container: $root.getPopupContainer($element), 
+                        container: getPopupContainer($element), 
                         position: { my: 'left top', at: 'left bottom', of: $element },
                         wrapperAttr: { class: 'dx-zoom-selectbox-popup-wrapper' }
-                    }, tabIndex: '-1', inputAttr: { 'aria-label': $root.getLocalization('Zoom', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelZoomCombobox') }}">
+                    }, tabIndex: '-1', inputAttr: widget.inputAttr }">
                 </div>
             </div>
         </div>
@@ -3758,62 +3728,64 @@
 
 <script type="text/html" id="dxrd-preview-toolbar-scrollable">
     <div class="dxrd-toolbar-wrapper dxrdp-toolbar-scrollable dx-shadow-top dxd-back-secondary-invariant" data-bind="dxScrollView: { showScrollbar: 'onHover', direction: 'horizontal', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }">
-        <div class="dxrd-toolbar" role="toolbar" data-bind="keyDownActions: actionLists, accessibilityKeyboardHelper: $data.keyboardHelper">
+        <div class="dxrd-toolbar" role="toolbar" data-bind="keyDownActions: actionLists, dxMutationObserver: keyboardHelper">
             <div id="dxrd-preview-toolbar-live-region" class="dxrd-visually-hidden" aria-live="polite" aria-atomic="true"></div>
             <div class="dx-accessibility-container-background dxd-back-accented"></div>
-            <!-- ko template: {name: 'dxrd-toolbar-tmplt', data: actionLists.toolbarItems } -->
+            <!-- ko template: {name: 'dxrd-toolbar-tmplt', data: actionLists.getViewModel().toolbarItems } -->
             <!-- /ko -->
         </div>
     </div>
 </script>
 
 <script type="text/html" id="dxrd-preview-search">
-    <div role="search" aria-haspopup="listbox" class="dxrd-preview-search-wrapper" data-bind="visible: active() && visible(), accessibilityKeyboardHelper: $data.keyboardHelper">
+    <div role="search" aria-haspopup="listbox" class="dxrd-preview-search-wrapper" data-bind="visible: active && visible, dxMutationObserver: keyboardHelper">
         <div id="dxrd-preview-search-live-region" class="dxrd-visually-hidden" aria-live="polite" aria-atomic="true"></div>
-        <!-- ko with: model -->
+        <!-- ko with: model.getViewModel() -->
         <div class="dxrd-preview-search-tab-header">
-            <span class="dxrd-preview-search-tab-header-text dxrd-right-panel-header dxd-text-primary" data-bind="text: $root.getLocalization('Search', 'ASPxReportsStringId.SearchDialog_Header')"></span>
+            <span class="dxrd-preview-search-tab-header-text dxrd-right-panel-header dxd-text-primary" data-bind="text: headerText"></span>
             <div class="dxrd-preview-search-tab-editor-button-container">
-                <div class="dxrd-preview-search-editor" data-bind="dxSearchEditor: { searchModel: $data, inputAttr: { 'type': 'search', 'title': $root.getLocalization('Search', 'ASPxReportsStringId.SearchDialog_Header') }}"></div>
-                <div data-bind="dxButton: { disabled: $data.stopSearchDisabled(), text: $data.loading() ? $root.getLocalization('Stop', 'ASPxReportsStringId.SearchDialog_StopButton'): $root.getLocalization('Search', 'ASPxReportsStringId.SearchDialog_SearchButton'), onClick: $data.searchButtonClick  }" class="dxrd-preview-search-button"></div>                
+                <div class="dxrd-preview-search-editor dx-searcheditor" data-bind="dxTextBox: searchEditor"></div>
+                <div data-bind="dxButton: buttons.searchButton" class="dxrd-preview-search-button"></div>                
             </div>
             <div class="dxrd-preview-search-tab-header-text">
-                <div class="dxrd-preview-search-checkbox" data-bind="dxCheckBox: { value: matchCase, text: $root.getLocalization('Match case', 'ASPxReportsStringId.SearchDialog_Case')}"></div>
-                <div class="dxrd-preview-search-checkbox dxrd-preview-search-checkbox-second" data-bind="dxCheckBox: { value: matchWholeWord, text: $root.getLocalization('Match whole word only', 'ASPxReportsStringId.SearchDialog_WholeWord')}"></div>           
+                <div class="dxrd-preview-search-checkbox" data-bind="dxCheckBox: matchCaseEditor"></div>
+                <div class="dxrd-preview-search-checkbox dxrd-preview-search-checkbox-second" data-bind="dxCheckBox: matchWholeWordEditor"></div>           
             </div>
         </div>
-        <!-- ko if: (searchResultCount() > 0 || loading()) -->
-        <div  class="dxrd-preview-search-result-header dxd-border-primary dxd-text-primary">            
-            <div class="dxrd-preview-search-tab-header dxrd-preview-search-indicator-group">
-                <div class = "dxrd-preview-search-results dxrd-preview-search-result-text" data-bind="attr: { id: $data.searchResultHeaderId, 'aria-busy': $data.loading() ? 'true' : 'false' }">
-                    <span class="dxrd-preview-search-result-text-bold" data-bind="text: $data.searchResultCount"></span>&nbsp
-                    <span data-bind="text: $root.getLocalization('results in', 'ASPxReportsStringId.SearchDialog_Results_In')"></span>&nbsp
-                    <span class="dxrd-preview-search-result-text-bold" data-bind="text: $data.searchResultPageCount"></span>&nbsp
-                    <span data-bind="text: $root.getLocalization('pages', 'ASPxReportsStringId.SearchDialog_Results_Pages')"></span>
-                </div>
-                <div class="dxrd-preview-search-results-navigation">
-                    <div class="dxrdp-search-loading" data-bind="dxLoadIndicator: { visible: $data.loading }"></div>
-                    <div data-bind="dxButtonWithTemplate: { icon: 'dxrd-svg-operations-arrowup', onClick: $data.findUp  }" class="dxrd-preview-search-results-navigation-button dx-searcheditor-button dx-widget dx-dropdowneditor-button dxd-icon-highlighted dx-shape-standard"></div>
-                    <div data-bind="dxButtonWithTemplate: { icon: 'dxrd-svg-operations-arrowdown', onClick: $data.findDown  }" class="dxrd-preview-search-results-navigation-button dx-searcheditor-button dx-widget dx-dropdowneditor-button dxd-icon-highlighted dx-shape-standard"></div>                
+        <!-- ko if: (searchResultCount > 0 || loading) -->
+        <div class="dxrd-preview-search-result-wrapper">
+            <div  class="dxrd-preview-search-result-header dxd-border-primary dxd-text-primary">
+                <div class="dxrd-preview-search-tab-header dxrd-preview-search-indicator-group">
+                    <div class = "dxrd-preview-search-results dxrd-preview-search-result-text" data-bind="attr: { id: searchResultHeaderId, 'aria-busy': loading ? 'true' : 'false' }">
+                        <span class="dxrd-preview-search-result-text-bold" data-bind="text: searchResultCount"></span>&nbsp
+                        <span data-bind="text: resultsInText"></span>&nbsp
+                        <span class="dxrd-preview-search-result-text-bold" data-bind="text: searchResultPageCount"></span>&nbsp
+                        <span data-bind="text: resultsPagesText"></span>
+                    </div>
+                    <div class="dxrd-preview-search-results-navigation">
+                        <div class="dxrdp-search-loading" data-bind="dxLoadIndicator: { visible: loading }"></div>
+                        <div data-bind="dxButton: buttons.upButton " class="dxrd-preview-search-results-navigation-button dx-searcheditor-button dx-widget dx-dropdowneditor-button dxd-icon-highlighted dx-shape-standard"></div>
+                        <div data-bind="dxButton: buttons.downButton " class="dxrd-preview-search-results-navigation-button dx-searcheditor-button dx-widget dx-dropdowneditor-button dxd-icon-highlighted dx-shape-standard"></div>
+                    </div>
                 </div>
-            </div> 
-        </div>  
-        <div class="dx-accessibility-container-background dxd-back-accented"></div> 
-        <div class="dxrd-preview-search-result dxd-border-accented" data-bind="dxList: { dataSource: searchResultDataSource, pageLoadMode: 'scrollBottom', focusStateEnabled:false, hoverStateEnabled:false, onItemRendered: onItemRendered, noDataText: '', encodeNoDataText: true }, attr: { 'aria-labelledby': $data.searchResultHeaderId }">
-            <div class="dxrd-preview-search-result-item dxd-list-item-back-color dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented"
-             data-bind="dxAction: { model: $data, action: $parent.itemClickAction }, attr: {'aria-label': $data.data.text + ', ' + $root.dx._static.formatSearchResult($data.data) + ', ' + ($parent.searchResult().indexOf($data.data) + 1) + ' of ' + $parent.searchResult().length }" 
-             data-options="dxTemplate : { name: 'item' }"
-             >  
-                <div class="dx-accessibility-field-background dxd-back-accented"></div>
-                <div class="dxrd-preview-search-tab-item-text propertygrid-editor-displayName dxd-text-primary" data-bind="text: $data.data.text"></div>
-                <div class="dxrd-preview-search-tab-item-info dxd-text-primary" data-bind="text: $root.dx._static.formatSearchResult($data.data)"></div>
+            </div>
+            <div class="dx-accessibility-container-background dxd-back-accented"></div>
+            <div class="dxrd-preview-search-result dxd-border-accented" data-bind="dxList: { dataSource: searchResultDataSource, pageLoadMode: 'scrollBottom', focusStateEnabled:false, hoverStateEnabled:false, onItemRendered: onItemRendered, noDataText: '', encodeNoDataText: true }, attr: { 'aria-labelledby': searchResultHeaderId }">
+                <div class="dxrd-preview-search-result-item dxd-list-item-back-color dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented"
+                data-bind="dxAction: { model: data, action: itemClickAction }, attr: attr"
+                data-options="dxTemplate : { name: 'item' }"
+                 >
+                    <div class="dx-accessibility-field-background dxd-back-accented"></div>
+                    <div class="dxrd-preview-search-tab-item-text propertygrid-editor-displayName dxd-text-primary" data-bind="text: data.text"></div>
+                    <div class="dxrd-preview-search-tab-item-info dxd-text-primary" data-bind="text: info"></div>
+                </div>  
             </div>  
-        </div>        
+        </div>
         <!-- /ko -->
-        <!-- ko if: (searchCompleted() && searchResultCount() == 0) -->
+        <!-- ko if: (searchCompleted && searchResultCount == 0) -->
         <div  class="dxrd-preview-search-result-header dxd-border-primary dxd-text-primary">
             <div class="dxrd-preview-search-tab-header dxrd-preview-search-indicator-group">
-                <div data-bind="text: noResultText()" class = "dxrd-preview-search-result-text">
+                <div data-bind="text: noResultText" class = "dxrd-preview-search-result-text">
                 </div>
             </div>
         </div>
@@ -3823,35 +3795,35 @@
 </script>
 
 <script type="text/html" id="dxrd-preview-progress-bar">
-    <div role="dialog" class="dxrd-preview-progress dxd-popup-back-color dxd-back-primary2 dxd-border-primary" data-bind="visible: visible, css: $data.cssClasses, accessibilityKeyboardHelper: $data.progressBarAccessibility">
+    <div role="dialog" class="dxrd-preview-progress dxd-popup-back-color dxd-back-primary2 dxd-border-primary" data-bind="visible: visible, css: cssClasses, dxMutationObserver: progressBarAccessibilityKeyboardHelper">
         <div class="dxrd-preview-progress-text dxd-text-primary" data-bind="text : text"></div>
         <div class="dxrd-preview-progress-bar dxd-back-primary">
-            <div class="dxrd-preview-progress-value dxd-preview-progress-bar-value-color dxd-back-accented" data-bind="style : { width: progress()  + '%' }"></div>
+            <div class="dxrd-preview-progress-value dxd-preview-progress-bar-value-color dxd-back-accented" data-bind="style : { width: progress  + '%' }"></div>
         </div>
-        <div role="button" class="dxrd-preview-progress-cancel dxd-hyperlink-color dxd-border-accented dxd-text-accented dx-accessibility-list-item dx-accessibility-border-accented" data-bind="text: cancelText, visible: $data.cancelVisible, dxAction: { model: $data, action: function() { $data.stop && stop(); }}"></div>
+        <div role="button" class="dxrd-preview-progress-cancel dxd-hyperlink-color dxd-border-accented dxd-text-accented dx-accessibility-list-item dx-accessibility-border-accented" data-bind="text: cancelButton.text, visible: cancelButton.visible, click: function() { cancelButton.action && cancelButton.action(); }"></div>
     </div>
 </script>
 
 <script type="text/html" id="dxrd-preview-parameters">
-    <div class="dxrd-preview-parameters-wrapper dxrd-preview-property-wrapper" data-bind="visible: active() && visible()">
+    <div class="dxrd-preview-parameters-wrapper dxrd-preview-property-wrapper" data-bind="visible: active && visible">
         <div class="dxrd-right-panel-header dxd-text-primary">
-            <span data-bind="text: $root.getLocalization('Preview Parameters', 'ASPxReportsStringId.ReportDesigner_Preview_ParametersTitle')"></span>
-            <!-- ko if: (model && !model.isEmpty()) -->
+            <span data-bind="text: model.headerText"></span>
+            <!-- ko if: (model && !model.isEmpty) -->
             <!-- /ko -->
         </div>
-        <!-- ko if: (!model || model.isEmpty()) -->
-        <div class="dxrd-group-header-parameters-empty dxd-text-primary" data-bind="text: $root.getLocalization('The report does not contain any parameters.', 'ASPxReportsStringId.WebDocumentViewer_NoParameters')"></div>
+        <!-- ko if: (!model || model.isEmpty) -->
+        <div class="dxrd-group-header-parameters-empty dxd-text-primary" data-bind="text: model.emptyText"></div>
         <!-- /ko -->
-        <!-- ko if: (model && !model.isEmpty()) -->
-        <div class="dxrd-right-panel-body" id="propertiesPanel" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }, dxValidationGroup: {}, accessibilityKeyboardHelper: $data.keyboardHelper">
+        <!-- ko if: (model && !model.isEmpty) -->
+        <div class="dxrd-right-panel-body" id="propertiesPanel" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }, dxValidationGroup: {}, dxMutationObserver: keyboardHelper">
             <div role="tree" class="dx-fieldset dxrd-right-panel-content">
-                <!-- ko template: { name: 'dx-propertieseditor', data: $data.propertyGrid } -->
+                <!-- ko template: { name: 'dx-propertieseditor', data: propertyGrid } -->
                 <!-- /ko -->
             </div>
             <div class="dxrd-preview-parameter-actions-container">
                 <div class="dxrd-preview-parameter-action dxrd-preview-loading" data-bind="dxLoadIndicator: { visible: model.parametersLoading }"></div>
-                <div class="dxrd-preview-parameter-action dxrdp-parameters-reset dx-accessibility-focus-border-accented" data-bind="dxButton: { text: $root.getLocalization('Reset', 'ASPxReportsStringId.ParametersPanel_Reset'), onClick: function() { model.restore(); } }"></div>
-                <div class="dxrd-preview-parameter-action dxrdp-parameters-submit dx-accessibility-focus-border-accented" data-bind="dxButton: { text: $root.getLocalization('Submit', 'ASPxReportsStringId.ParametersPanel_Submit'), onClick: function(params) { model.validateAndSubmit(params); } }"></div>
+                <div class="dxrd-preview-parameter-action dxrdp-parameters-reset dx-accessibility-focus-border-accented" data-bind="dxButton: model.resetButton"></div>
+                <div class="dxrd-preview-parameter-action dxrdp-parameters-submit dx-accessibility-focus-border-accented" data-bind="dxButton: model.submitButton"></div>
             </div>
         </div>
         <!-- /ko -->
@@ -3862,14 +3834,16 @@
     <div class="dxrd-preview-pager dxrd-toolbar-item" data-bind="visible: visible">
         <div class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" >
             <div class="dxrd-preview-pager-selectbox" data-bind="dxSelectBox: {
-                dataSource: pageItems, value: selectedItem, opened: opened, displayExpr: displayExpr, useItemTextAsTitle: true,
-                onFocusOut: focusOut, onKeyUp: keyUp, itemTemplate: itemTemplate, searchMode: searchMode, searchEnabled: searchEnabled,
-                searchTimeout: searchTimeout, disabled: disabled,
+                dataSource: widget.dataSource, onValueChanged: widget.onValueChanged, value: widget.value,
+                opened: widget.opened, displayExpr: widget.displayExpr, useItemTextAsTitle: true,
+                onKeyUp: widget.onKeyUp, itemTemplate: widget.itemTemplate,
+                searchMode: widget.searchMode, searchEnabled: widget.searchEnabled,
+                searchTimeout: widget.searchTimeout, disabled: widget.disabled,
                 dropDownOptions: {
-                    container: $root.getPopupContainer($element),
-                    wrapperAttr: { class: 'dx-page-selectbox-popup-wrapper', 'aria-label': $root.getLocalization('Pager', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelPagerCombobox')  },
+                    container: getPopupContainer($element),
+                    wrapperAttr: widget.wrapperAttr,
                 },
-                tabIndex: '-1', inputAttr: { 'aria-label': $root.getLocalization('Pager', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelPagerCombobox') } }">
+                tabIndex: '-1', inputAttr: widget.inputAttr }">
             </div>
         </div>
         <div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: $data.hasSeparator"></div>
@@ -3877,14 +3851,14 @@
 </script>
 
 <script type="text/html" id="dxrd-preview-document-map">
-<div class="dxrd-preview-document-map dxrd-height-100 dxrd-overflow-hidden" data-bind="visible: active() && visible()" >
+<div class="dxrd-preview-document-map dxrd-height-100 dxrd-overflow-hidden" data-bind="visible: active && visible" >
     <div class="dxrd-right-panel-header dxd-text-primary">
         <div class="dxrd-display-inline-block" data-bind="text: $root.getLocalization('Document Map', 'ASPxReportsStringId.DocumentViewer_RibbonCommandText_DocumentMap')"></div>
     </div>
     <!-- ko if: model -->
-    <!-- ko with: model -->
-    <div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }, accessibilityKeyboardHelper: $parent.keyboardHelper">
-        <div role="tree" id="documentMapTree" data-bind="treelist: documentMapOptions" class="dxrd-width-100 dxrd-height-100"></div>
+    <!-- ko with: model.getViewModel() -->
+    <div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }, dxMutationObserver: keyboardHelper">
+        <div role="tree" id="documentMapTree" data-bind="treelist: treeListOptions" class="dxrd-width-100 dxrd-height-100"></div>
     </div>
     <!-- /ko -->
     <!-- /ko -->
@@ -3892,36 +3866,36 @@
 </script><script type="text/html" id="dxrd-report-preview">
     <div class="dxrd-preview dxrd-designer-wrapper dxd-scrollbar-color dxd-surface-back-color" data-bind="visible: reportPreview.previewVisible, cssArray: [ $data.rootStyle , { 'dx-rtl' : $data.rtl, 'dx-ltr': !$data.rtl } ]">
         <!-- ko foreach: parts -->
-        <!-- ko template: { name: templateName, data: model }-->
+        <!-- ko template: { name: templateName, data: viewModel || model }-->
         <!-- /ko -->
         <!-- /ko -->
     </div>
 </script>
 
 <script type="text/html" id="dxrdp-surface">
-    <div class="dxrd-preview-wrapper" data-bind="textCopier, css: { 'dx-rtl': $data.rtlReport, 'dxrp-editing-fields-hightlighted': editingFieldsHighlighted } ">
-        <!-- ko with: progressBar-->
+    <div class="dxrd-preview-wrapper" data-bind="textCopier, css: { 'dx-rtl': rtlReport, 'dxrp-editing-fields-hightlighted': editingFieldsHighlighted } ">
+        <!-- ko with: progressBar -->
         <!-- ko template: 'dxrd-preview-progress-bar'-->
         <!-- /ko -->
         <!-- /ko -->
-        <div class="dxrd-preview-surface" data-bind="accessibilityKeyboardHelper: $data.previewBrickKeyboardHelper">
-            <!-- ko if: !showMultipagePreview() -->
+        <div class="dxrd-preview-surface" data-bind="dxMutationObserver: previewBrickKeyboardHelper">
+            <!-- ko if: !showMultipagePreview -->
             <div class="dxrd-report-preview-holder" role="list">
-                <!-- ko with: currentPage-->
-                <!-- ko if: pageLoading() || (!pageLoading() && displayImageSrc()) -->
-                <div role="listitem" class="dxrd-report-preview dx-accessibility-page-item dx-accessibility-border-accented" data-bind="autoFit: { autoFitBy: $parent.autoFitBy, zoom: zoom, width: originalWidth, height: originalHeight, rightPanelWidth: $root.tabPanel.width, previewSize: $parent.previewSize, brickLoading: brickLoading }, styleunit: { width: width, height: height }">
-                    <!-- ko template: { name: 'dxrd-preview-page', afterRender: function() { $parent.delayedInit() } }-->
+                <!-- ko with: currentPage -->
+                <!-- ko if: pageLoading || (!pageLoading && displayImageSrc) -->
+                <div role="listitem" class="dxrd-report-preview dx-accessibility-page-item dx-accessibility-border-accented" data-bind="autoFit: autoFitOptions, styleunit: { width: width, height: height }">
+                    <!-- ko template: { name: 'dxrd-preview-page', afterRender: function() { delayedInit() } }-->
                     <!-- /ko -->
                 </div>
                 <!-- /ko -->
                 <!-- /ko -->
             </div>
             <!-- /ko -->
-            <!-- ko if: showMultipagePreview() && !!currentPage() -->
-            <div class="dxrd-report-preview-holder" role="list" data-bind="lazyImages: { enabled: showMultipagePreview, updateCallback: onSizeChanged }">
-                <!-- ko foreach: {data: pages, afterRender: function() { $parent.model.delayedInit() } }  -->
-                <!-- ko lazy: { if: pageLoading() || (!pageLoading() && displayImageSrc()) } -->
-                <div role="listitem" class="dxrd-report-preview dxrd-report-preview-multipage dx-accessibility-page-item dx-accessibility-border-accented" data-bind="styleunit: { 'width': width(), 'height': height() }, toView: { active: active }, css : { 'dxrd-report-preview-active': active }">
+            <!-- ko if: showMultipagePreview && !!currentPage -->
+            <div class="dxrd-report-preview-holder" role="list" data-bind="lazyImages: lazyImagesOptions">
+                <!-- ko foreach: {data: pages, afterRender: function() { delayedInit() } }  -->
+                <!-- ko lazy: { if: pageLoading || (!pageLoading && displayImageSrc) } -->
+                <div role="listitem" class="dxrd-report-preview dxrd-report-preview-multipage dx-accessibility-page-item dx-accessibility-border-accented" data-bind="styleunit: { 'width': width, 'height': height }, toView: { setPageActiveChangedEvent: setPageActiveChangedEvent }, css : { 'dxrd-report-preview-active': active }">
                     <!-- ko template: 'dxrd-preview-page'-->
                     <!-- /ko -->
                 </div>
@@ -3929,8 +3903,8 @@
                 <!-- /ko -->
             </div>
             <!-- /ko -->
-            <div data-bind="css: { 'dxrd-visually-hidden': currentPage() }" class="dxrd-report-preview-placeholder">
-                <div aria-live="assertive" aria-atomic="true" class="dxd-empty-area-placeholder-text-color dxd-text-info" data-bind="text: emptyDocumentCaption()"></div>
+            <div data-bind="css: { 'dxrd-visually-hidden': !!currentPage }" class="dxrd-report-preview-placeholder">
+                <div aria-live="assertive" aria-atomic="true" class="dxd-empty-area-placeholder-text-color dxd-text-info" data-bind="text: emptyDocumentCaption"></div>
             </div>
         </div>
     </div>
@@ -3942,33 +3916,20 @@
     <div data-bind="dxViewerExport: $data"></div>
 </script><script type="text/html" id="dxrv-daterange-editor">
     <div class="dxrv-daterange-editor">
-        <div data-bind="cacheElement: { action: function(element) { $data._$element = element; } }, dxEllipsisEditor: { value: _displayText, readOnly:true, inputAttr: { 'aria-label': $parent.displayName, id: _editorInputId }, openOnFieldClick: true, buttonAction: function() { $data._showPopup(); } }"></div>
+        <div data-bind="cacheElement: { action: cacheElement }, dxEllipsisEditor: { value: displayValue, readOnly:true, inputAttr: { 'aria-label': $parent.displayName, id: _editorInputId }, openOnFieldClick: true, buttonAction: function() { showPopup(); } }"></div>
         <!-- ko template: { name: popupTemplate, data: popupModel } -->
         <!-- /ko -->
     </div>
 </script>
 
 <script type="text/html" id="dxrv-daterange-editor-popup">
-    <div role="dialog" aria-modal="true" data-bind="dxPopup: {
-                width: 'max-content',
-                height: $root.calculateWithZoomFactor(362),
-                wrapperAttr: { class: 'dxrv-daterange-editor-popup-wrapper' },
-                position: { my: 'right top', at: 'right bottom', of: $data._$element, collision: 'fit fit', offset: '1 -1' },
-                container: $root.getPopupContainer($element),
-                target: $root.getPopupContainer($element),
-                showTitle: false,
-                showCloseButton: false,
-                hideOnOutsideClick: true,
-                animation: {},
-                shading: false,
-                visible: _popupVisible
-         }">
-        <div data-bind="dxScrollView: { showScrollbar: 'always', direction: 'horizontal', useNative: false, onInitialized: function(e) { e.component.option('useKeyboard', false); } }">
-            <div class="dxrv-daterange-editor-popup-container" data-bind="accessibilityKeyboardHelper: $data.dialogKeyboardHelper">
-                <div role="listbox" class="dxrv-daterange-editor-list dxrv-daterange-editor-item dxd-border-primary dx-accessibility-daterange-item" data-bind="attr: { 'aria-label': $root.getLocalization('Predefined periods', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelPredefinedPeriods') }, accessibilityKeyboardHelper: $data.dialogKeyboardHelper.predefinedDateRangesKeyboardHelper, dxScrollView: { showScrollbar: 'onHover', scrollByContent: false, bounceEnabled: false, useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }">
+    <div role="dialog" aria-modal="true" data-bind="dxPopup: getPopupSettings()">
+        <div data-bind="dxScrollView: scrollViewOptions">
+            <div class="dxrv-daterange-editor-popup-container" data-bind="dxMutationObserver: dialogKeyboardHelper">
+                <div role="listbox" class="dxrv-daterange-editor-list dxrv-daterange-editor-item dxd-border-primary dx-accessibility-daterange-item" data-bind="attr: predefinedRanges.attr, dxScrollView: predefinedRanges.scrollViewOptions, dxMutationObserver: predefinedRanges.accessibilityKeyboardHelper">
                     <div class="dx-accessibility-container-background dxd-back-accented"></div>
-                    <!-- ko foreach: items -->
-                    <div role="option" class="dxrv-daterange-editor-list-item dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented" data-bind="attr: { 'aria-selected': $parent._isSelected($data) }, css: { 'dxd-state-selected': $parent._isSelected($data) }, dxAction: { model: $data, action: function() { $parent.applyDate($data.range(), true) }}">
+                    <!-- ko foreach: predefinedRanges.items -->
+                    <div role="option" class="dxrv-daterange-editor-list-item dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented" data-bind="attr: { 'aria-selected': selected }, css: { 'dxd-state-selected': selected }, dxAction: { action: click }">
                         <div class="dx-accessibility-field-background dxd-back-accented"></div>
                         <!-- ko text: displayName -->
                         <!-- /ko -->
@@ -3977,12 +3938,12 @@
                 </div>
                 <div class="dxrv-daterange-editor-item">
                     <div class="dx-accessibility-container-background dxd-back-accented"></div>
-                    <!-- ko template: { name: 'dxrv-daterange-calendar', data: _createTemplateData(startDate, undefined) } -->
+                    <!-- ko template: { name: 'dxrv-daterange-calendar', data: startRange } -->
                     <!-- /ko -->
                 </div>
                 <div class="dxrv-daterange-editor-item">
                     <div class="dx-accessibility-container-background dxd-back-accented"></div>
-                    <!-- ko template: { name: 'dxrv-daterange-calendar', data: _createTemplateData(endDate, startDate) } -->
+                    <!-- ko template: { name: 'dxrv-daterange-calendar', data: endRange } -->
                     <!-- /ko -->
                 </div>
             </div>
@@ -3991,7 +3952,7 @@
 </script>
 
 <script type="text/html" id="dxrv-daterange-calendar">
-    <div tabIndex="0" class="dx-accessibility-calendar-item dx-accessibility-daterange-item" data-bind="dxCalendar: { value: value, cellTemplate: 'select_cell', height: height, min: min }">
+    <div tabIndex="0" class="dx-accessibility-calendar-item dx-accessibility-daterange-item" data-bind="dxCalendar: { value: value, onValueChanged: onValueChanged, cellTemplate: 'select_cell', height: height, min: min }">
         <div class="dxrv-daterange-cell" data-options="dxTemplate:{ name:'select_cell' }">
             <div class="dxrv-daterange-cell-text" data-bind="text: text"></div>
             <div data-bind="css: { 'dxd-back-accented': $parent.inRange(date) }"></div>
@@ -4000,12 +3961,12 @@
 </script>
 
 <script id="dxrv-range-parameter" type="text/html">
-    <div data-bind="dxrvDateRangeEditor: {value: $data.value() }"></div>
+    <div data-bind="dxrvDateRangeEditor: {value: value }"></div>
 </script><script type="text/html" id="dxrd-propertieseditor">
     <div data-bind="css: { 'dx-rtl' : rtl }">
         <div class="dx-editors">
             <div class="dx-fieldset dxrd-parameters-fieldset dxd-border-primary">
-                <!-- ko foreach: getEditors() -->
+                <!-- ko foreach: editors -->
                 <!-- ko template: editorTemplate -->
                 <!-- /ko -->
                 <!-- /ko -->
@@ -4032,14 +3993,14 @@
 
 <script type="text/html" id="dxrd-multivalue">
     <!-- ko with: value -->
-    <div data-bind="dxTagBox: $parent.getOptions({ dataSource: $data.dataSource, searchEnabled: true, useItemTextAsTitle: true, searchExpr: $data.searchExpr || ['displayValue'], value: $data.value,
-         displayExpr: $data.displayExpr || 'displayValue', valueExpr: $data.valueExpr || 'value', multiline: false, showSelectionControls: true,
-         showDropDownButton: !!$data.showDropDownButton, selectAllMode: 'allPages', selectedItems: $data.selectedItems,
-         inputAttr: { 'aria-label': $parent.displayName, id: $parent.editorInputId },
-         disabled: $parent.disabled,
-         selectAllText: $root.getLocalization('Select All', 'AnalyticsCoreStringId.SelectAll'),
-         placeholder: $root.dx._static.selectPlaceholder(), maxDisplayedTags: $data.maxDisplayedTags, showMultiTagOnly: true, dropDownOptions: { container: $root.getPopupContainer($element), position: { boundary: $root.getPopupContainer($element), collision: 'flipfit flipfit', of: $element, at: 'bottom', my: 'top' } } }), 
-         dxValidator: { validationRules: $parent.validationRules || [] }">
+    <div data-bind="dxTagBox: getOptions({ dataSource: dataSource, searchEnabled: true, useItemTextAsTitle: true, searchExpr: searchExpr || ['displayValue'], value: value,
+         displayExpr: displayExpr || 'displayValue', valueExpr: valueExpr || 'value', multiline: false, showSelectionControls: true,
+         showDropDownButton: !!showDropDownButton, selectAllMode: 'allPages', selectedItems: selectedItems,
+         inputAttr: { 'aria-label': displayName, id: editorInputId },
+         disabled: disabled,
+         selectAllText: selectAllText,
+         placeholder: placeholder, maxDisplayedTags: maxDisplayedTags, showMultiTagOnly: true, dropDownOptions: { container: getPopupContainer($element), position: { boundary: getPopupContainer($element), collision: 'flipfit flipfit', of: $element, at: 'bottom', my: 'top' } } }), 
+         dxValidator: { validationRules: validationRules || [] }">
     </div>
     <!-- /ko -->
 </script>
@@ -4048,34 +4009,34 @@
     <!-- ko if: value -->
     <div class="dxrd-editor" data-bind="visible: visible">
         <div data-bind="dxCollectionEditor: { values: value, info: info, level: level, displayName: $root.getLocalization(displayName) }">
-            <div data-bind="dxPropertyGrid: { target: value, level: editor.level + 1 }"></div>
+            <div data-bind="template: { name: 'dx-propertieseditor', data: getProperties() }"></div>
         </div>
     </div>
     <!-- /ko -->
 </script>
 <script type="text/html" id="dxrd-parameters-property-editor">
     <div class="dx-editor" data-bind="visible: visible">
-        <div class="dx-group" data-bind="dxdAccordion: { collapsed: $data.collapsed, alwaysShow: $data.alwaysShow }">
-            <div class="dx-editor-header" data-bind="css: { 'dxrd-empty-header': $data.hideEditorHeader }">
+        <div class="dx-group" data-bind="dxdAccordion: { collapsed: collapsed, alwaysShow: alwaysShow, setCollapsed: setCollapsed, getCollapsed: getCollapsed, setCollapsedChangedEvent: setCollapsedChangedEvent }">
+            <div class="dx-editor-header" data-bind="css: { 'dxrd-empty-header': hideEditorHeader }">
                 <!-- ko ifnot: $data.hideEditorHeader -->
                 <div class="dx-field" data-bind="attr: { 
                         role: 'treeitem',
                         'id': isComplexEditor && headerId,
                         'aria-owns': isComplexEditor && contentId,
-                        'aria-expanded': isComplexEditor && (alwaysShow() || !collapsed() ? 'true' : 'false') },
+                        'aria-expanded': isComplexEditor && (alwaysShow || !collapsed ? 'true' : 'false') },
                     css: {
                         'dxrd-accessibility-accordion-trigger dx-accessibility-focus-border-accented': isComplexEditor,
-                        'dxrd-vertical-label': $data.editorOptions && $data.editorOptions.hasVerticalLabel
+                        'dxrd-vertical-label': editorOptions && editorOptions.hasVerticalLabel
                     }">
                         <div class="dx-field-label dxrd-group-label dxd-back-secondary dx-accordion-header dxd-text-primary" data-bind="styleunit: padding, css: {
                             'dx-accordion-empty': templateName === 'dx-emptyHeader',
-                            'dxd-back-secondary': $data.isGroupLabel,
-                            'dx-accordion-hide-collapsing-image': $data.alwaysShow()
+                            'dxd-back-secondary': isGroupLabel,
+                            'dx-accordion-hide-collapsing-image': alwaysShow
                         }">
                             <!-- ko if: isComplexEditor -->
                             <div data-bind="enable: templateName === 'dx-emptyHeader'">
-                                <!-- ko ifnot: $data.alwaysShow() -->
-                                <div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed() }"></div>
+                                <!-- ko ifnot: $data.alwaysShow -->
+                                <div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed }"></div>
                                 <!-- /ko -->
                                 <!-- ko if: !!$data.textToSearch -->
                                 <div class="dx-group-header-font" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName }"></div>
@@ -4087,17 +4048,17 @@
                             <!-- /ko -->
                             <!-- ko if: !isComplexEditor -->
                             <!-- ko if: !!$data.textToSearch -->
-                            <label class="propertygrid-editor-displayName" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName, 'for': editorInputId }, css: { 'dx-field-label-required': isRequired }, style: { fontWeight: isPropertyModified() ? 'Bold' : ''}"></label>
+                            <label class="propertygrid-editor-displayName" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName, 'for': editorInputId }, css: { 'dx-field-label-required': isRequired }, style: { fontWeight: isPropertyModified ? 'Bold' : ''}"></label>
                             <!-- /ko -->
                             <!-- ko ifnot: !!$data.textToSearch -->
-                            <label class="propertygrid-editor-displayName" data-bind="text: displayName, attr: { 'title': displayName, for: editorInputId }, css: { 'dx-property-required': isRequired }, style: { fontWeight: isPropertyModified() ? 'Bold' : ''}"></label>
+                            <label class="propertygrid-editor-displayName" data-bind="text: displayName, attr: { 'title': displayName, for: editorInputId }, css: { 'dx-property-required': isRequired }, style: { fontWeight: isPropertyModified ? 'Bold' : ''}"></label>
                             <!-- /ko -->
                             <!-- /ko -->                            
                     </div>
                     <div class="dx-field-value" data-bind="css: { 'dxd-border-accented': $data.isPropertyHighlighted }">
                         <div data-bind="service: { name: 'createEditorAddOn' }"></div>
                         <!-- ko if: templateName !== 'dx-emptyHeader' -->
-                        <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: $data.isRendered } -->
+                        <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->
                         <!-- /ko -->
                         <!-- /ko -->
                     </div>
@@ -4108,9 +4069,9 @@
             <div class="dx-editor-content dx-accordion-content" role="group" data-bind="attr: {
                 'aria-labelledby': headerId,
                 'id': contentId,
-                'aria-hidden': !alwaysShow() && collapsed() ? 'true' : 'false'
+                'aria-hidden': !alwaysShow && collapsed ? 'true' : 'false'
             }">
-                <!-- ko if: (!$data.editorCreated || editorCreated) -->
+                <!-- ko if: editorCreated -->
                 <!-- ko template: contentTemplateName -->
                 <!-- /ko -->
                 <!-- /ko -->
@@ -4125,24 +4086,20 @@
         <div class="dx-picture-editing-active" data-bind="dxPopup: {
                 width: 48, height: 'auto',
                 wrapperAttr: { class: 'dx-picture-editing-active' },
-                position:{ my: 'left top', at: 'right top', boundary: $root.getPopupContainer($element), of: $data.$element, collision: 'fit fit', offset: '1 -1' },
-                container: shadingEnabled() ? '.dx-overlay-wrapper.dx-picture-edit-popup-content-fullscreen' : $root.getPopupContainer($element),
-                target: $root.getPopupContainer($element),
+                position:{ my: 'left top', at: 'right top', boundary: getPopupContainer($element), of: element, collision: 'fit fit', offset: '1 -1' },
+                container: shadingEnabled ? '.dx-overlay-wrapper.dx-picture-edit-popup-content-fullscreen' : getPopupContainer($element),
+                target: getPopupContainer($element),
                 showTitle: false,
-                onContentReady: function(e) {                    
-                    e.component && e.component.registerKeyHandler('tab', function(_) {
-                        $data.active(false);
-                    });
-                },
+                onContentReady: onContentReady,
                 showCloseButton: false,
                 animation: {},
                 shading: false,
-                visible: $data.active
+                visible: true
             }">
             <div data-options="dxTemplate: { name: 'content' }">
-                <div class="dx-picture-editing-toolbar" data-bind="foreach: $data.actions">
-                    <div class="dx-picture-editing-toolbar-item" data-bind="dxclick: $data.action, attr: { title: title }">
-                        <div class="dx-picture-editing-toolbar-item-icon" data-bind="template: { name: icon, afterRender: $data.renderedHandler }"> </div>
+                <div class="dx-picture-editing-toolbar" data-bind="foreach: actions">
+                    <div class="dx-picture-editing-toolbar-item" data-bind="dxclick: action, attr: { title: title }">
+                        <div class="dx-picture-editing-toolbar-item-icon" data-bind="template: { name: icon }"> </div>
                     </div>
                     <!-- ko template: { if: $data.template, name: $data.template, data: $data.templateOptions }-->
                     <!-- /ko -->
@@ -4163,9 +4120,10 @@
             width: width,
             height: height,
             wrapperAttr: { class: 'dx-picture-edit-popup-content' },
-            hideOnOutsideClick: $data.hideOnOutsideClick,
-            onShown: $data.onShown,
-            onContentReady: $data.onContentReady,
+            hideOnOutsideClick: hideOnOutsideClick,
+            onShown: onShown,
+            onHidden: onHidden,
+            onContentReady: onContentReady,
             position: { my: 'left top', at: 'right top', boundary: $root.getPopupContainer($element), of: getPositionTarget($element), collision: 'flipfit fit', offset: '-10 0' },
             container: getPositionTarget($element),
             showTitle: false,
@@ -4183,15 +4141,15 @@
     <div class="dx-picture-editing-brush-options">
         <div class="dx-picture-editing-line-width">
             <div class="dx-picture-editing-text" data-bind="text: brushWidthText"></div>
-            <div class="dx-picture-editing-line-width-slider" data-bind="dxSlider: { min: 1, max: 9, value: $data.lineWidth,
+            <div class="dx-picture-editing-line-width-slider" data-bind="dxSlider: { min: 1, max: 9, value: lineWidth, onValueChanged: onLineWidthChanged,
              label: { visible: true },
              tooltip: { enabled: true, showMode: 'always', position: 'bottom' } }"></div>
         </div>
         <div class="dx-picture-editing-line-color">
             <div class="dx-picture-editing-text" data-bind="text: brushColorText"></div>
-            <div class="dx-picture-editing-brush-options-colors" data-bind="foreach: $data.colors">
-                <div class="dx-picture-editing-brush-options-color" data-bind="css: { selected: $data.isSelected }">
-                    <div class="dx-picture-editing-brush-options-color-cell" data-bind="style: { background: $data.value }, dxclick: $data.action"></div>
+            <div class="dx-picture-editing-brush-options-colors" data-bind="foreach: colors">
+                <div class="dx-picture-editing-brush-options-color" data-bind="css: { selected: isSelected }">
+                    <div class="dx-picture-editing-brush-options-color-cell" data-bind="style: { background: value }, dxclick: action"></div>
                 </div>
             </div>
         </div>
@@ -4203,14 +4161,14 @@
         <div class="dx-picture-editing-sizemode">
             <div class="dx-picture-editing-text" data-bind="text: sizeModeText"></div>
             <div class="dx-picture-editing-sizemode-values" data-bind="foreach: { data: sizeModeValues }">
-                <div class="dx-picture-editing-sizemode-alignment-value" data-bind="css: { selected: isSelected }, template: $data.iconTemplate, dxclick: $data.action, attr: { title: $data.attrTitle }">
+                <div class="dx-picture-editing-sizemode-alignment-value" data-bind="css: { selected: isSelected }, template: iconTemplate, dxclick: action, attr: { title: attrTitle }">
                 </div>
             </div>
         </div>
         <div class="dx-picture-editing-alignment">
             <div class="dx-picture-editing-text" data-bind="text: alignmentText"></div>
             <div class="dx-picture-editing-alignment-values" data-bind="foreach: { data: alignmentValues }">
-                <div class="dx-picture-editing-sizemode-alignment-value" data-bind="css: { selected: isSelected }, template: $data.iconTemplate, dxclick: $data.action, , attr: { title: $data.attrTitle }">
+                <div class="dx-picture-editing-sizemode-alignment-value" data-bind="css: { selected: isSelected }, template: iconTemplate, dxclick: action, , attr: { title: attrTitle }">
                 </div>
             </div>
         </div>
@@ -4219,7 +4177,7 @@
 
 <script type="text/html" id="dx-picture-editing-imagepickerwithfilter">
     <div class="dx-picture-editing-filtercontent" data-bind="styleunit: { width: contentWidth }">
-        <div class="dx-picture-editing-filtercontent-editor" data-bind="dxTextBox: { value: filter, valueChangeEvent: 'keyup', placeholder: searchPlaceholder(), showClearButton: true  }"></div>
+        <div class="dx-picture-editing-filtercontent-editor" data-bind="dxTextBox: { value: filter, valueChangeEvent: 'keyup', onValueChanged: onFilterChanged, placeholder: searchPlaceholder, showClearButton: true  }"></div>
         <div class="dx-picture-editing-filtercontent-images">
             <!-- ko template: 'dx-picture-editing-imagespicker' -->
             <!-- /ko -->
@@ -4230,14 +4188,14 @@
 <script type="text/html" id="dx-picture-editing-imagespicker">
     <div class="dx-picture-editing-imagescontainer dxd-text-primary" data-bind="styleunit: { width: contentWidth }, dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true }">
         <!-- ko foreach: images -->
-        <div class="dx-picture-editing-block dxd-state-normal dxd-back-highlighted" data-bind="styleunit: { width: $parent.width + 10 }, visible: visible, click: function() { $parent.action($data); }">
-            <div class="dx-picture-editing-block-image" data-bind="styleunit: { width: $parent.width, height: $parent.height }, style: { backgroundImage: 'url(' + ($data.url || $data.data) + ')' }"></div>
+        <div class="dx-picture-editing-block dxd-state-normal dxd-back-highlighted" data-bind="styleunit: { width: width + 10 }, visible: visible, click: action">
+            <div class="dx-picture-editing-block-image" data-bind="styleunit: { width: width, height: height }, style: { backgroundImage: 'url(' + (url || data) + ')' }"></div>
             <!-- ko if: $data.text-->
             <!-- ko if: $parent.filterEnabled -->
-            <div class="dx-picture-editing-block-text" data-bind="searchHighlighting: { text: $data.text, textToSearch: $parent.filter }, attr: { title: $data.text }"></div>
+            <div class="dx-picture-editing-block-text" data-bind="searchHighlighting: { text: text, textToSearch: filter }, attr: { title: text }"></div>
             <!-- /ko -->
             <!-- ko ifnot: $parent.filterEnabled -->
-            <div class="dx-picture-editing-block-text" data-bind="text: $data.text, attr: { title: $data.text }"></div>
+            <div class="dx-picture-editing-block-text" data-bind="text: text, attr: { title: text }"></div>
             <!-- /ko -->
             <!-- /ko -->
         </div>
@@ -4247,7 +4205,7 @@
     <div data-bind="dxSelectBox: getOptions({ dataSource: values, value: value, valueExpr: 'value', displayExpr: 'displayValue', displayCustomValue: true, disabled: disabled, useItemTextAsTitle: true, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, dropDownOptions: { container: $root.getPopupContainer($element) }, popupPosition: { boundary: $root.getPopupContainer($element) }, inputAttr: { 'aria-label': displayName, id: editorInputId } }), dxValidator: { validationRules: $data.validationRules || [] }"></div>
 </script>
 <script type="text/html" id="dxrdv-signature">
-    <div data-bind="dxSelectBox: getOptions({ dataSource: getAvailableSignature($root), value: value, itemTemplate: 'signature', displayExpr: 'displayName', valueExpr: 'key', showClearButton: true, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, dropDownOptions: { minWidth: '300px', container: $root.getPopupContainer($element) }, popupPosition: { boundary: $root.getPopupContainer($element) }, inputAttr: { 'aria-label': displayName, id: editorInputId } }), dxValidator: { validationRules: $data.validationRules || [] }">
+    <div data-bind="dxSelectBox: getOptions({ dataSource: values, value: value, itemTemplate: 'signature', displayExpr: 'displayName', valueExpr: 'key', showClearButton: true, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, dropDownOptions: { minWidth: '300px', container: $root.getPopupContainer($element) }, inputAttr: { 'aria-label': displayName, id: editorInputId } }), dxValidator: { validationRules: $data.validationRules || [] }">
         <div class="dxrdv-signature-editor-item" data-options="dxTemplate: { name: 'signature' }">
             <div class="dxrdv-signature-editor-item-image">
                 <!-- ko if: image -->
@@ -4293,7 +4251,7 @@
 
 <script type="text/html" id="dxcd-toolbar">
     <div class="dxrd-toolbar-wrapper">
-        <div class="dxrd-toolbar" data-bind="template: {name: 'dxrd-toolbar-tmplt', data: actionLists.toolbarItems }"></div>
+        <div class="dxrd-toolbar" data-bind="template: {name: 'dxrd-toolbar-tmplt', data: actionLists.getViewModel().toolbarItems }"></div>
     </div>
 </script>
 
@@ -4336,7 +4294,7 @@
 
 <script type="text/html" id="dxcd-field">
     <!-- ko if: visible -->
-    <div data-bind="dxFieldListPicker: { path: path, value: value, acceptCustomValue: true, itemsProvider: $root.dataBindingsProvider(), treeListController: treeListController, disabled: disabled }"></div>
+    <div data-bind="dxFieldListPicker: { path: path, value: value, onValueChanged: onValueChanged, acceptCustomValue: true, itemsProvider: $root.dataBindingsProvider(), treeListController: treeListController, disabled: disabled }"></div>
     <!--/ko -->
 </script>
 
@@ -4401,11 +4359,11 @@
                 <div class="propertygrid-editor-displayName" data-bind="text: $parent.getLocalization('Function', 'DevExpress.XtraReports.UI.XRGroupSortingSummary.Function'), attr: { 'title': $parent.getLocalization('Function', 'DevExpress.XtraReports.UI.XRGroupSortingSummary.Function') }"></div>
             </div>
             <div class="dx-field-value">
-                <div data-bind="dxSelectBox: { value: functionName, dataSource: $parent.availableItems() ,acceptCustomValue: true, disabled: $parent.disabled(), placeholder: $root.dx._static.selectPlaceholder(), dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true  }"></div>
+                <div data-bind="dxSelectBox: { value: functionName, dataSource: $parent.availableItems ,acceptCustomValue: true, disabled: $parent.disabled, placeholder: $root.dx._static.selectPlaceholder(), dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true  }"></div>
             </div>
         </div>
         <!-- ko foreach: args -->
-        <div class="dx-field dxd-back-primary" data-bind="css: $parents[1].actionsAreAvailable() ? 'dxcd-summaryfunction-arg' : ''">
+        <div class="dx-field dxd-back-primary" data-bind="css: $parents[1].actionsAreAvailable ? 'dxcd-summaryfunction-arg' : ''">
             <div class="dx-field-label dxd-text-primary" data-bind="styleunit: $parents[1].memberPadding">
                 <!-- ko if: $parent.args().length === 1-->
                 <div class="propertygrid-editor-displayName" data-bind="text: $parents[1].getLocalization('Argument', 'DevExpress.XtraCharts.SeriesSelectionMode.Argument'), attr: { 'title': $parents[1].getLocalization('Argument', 'DevExpress.XtraCharts.SeriesSelectionMode.Argument') }"></div>
@@ -4425,7 +4383,7 @@
             </div>
         </div>
         <!-- /ko -->
-        <!-- ko if: $parent.actionsAreAvailable() -->
+        <!-- ko if: $parent.actionsAreAvailable -->
         <div class="dx-field dxd-back-primary">
             <div class="dx-field-label dxd-text-primary dxrd-width-auto"  data-bind="styleunit: $parent.memberPadding">
                 <div class="propertygrid-editor-displayName dxrcd-summaryfunction-addnew dxd-hyperlink-color dxd-border-accented dxd-text-accented" data-bind="text: $parent.getLocalization('Add Argument', 'ASPxReportsStringId.ReportDesigner_AddArgument'), attr: { 'title': $parent.getLocalization('Add New Item', 'ASPxReportsStringId.ReportDesigner_AddNewItem') }, click: function() { $parent.add(); }"></div>
@@ -4445,7 +4403,7 @@
                  info: info,
                  addHandler: function() { return addPoint(_model()['owner'] || _model()); } 
              }">
-            <div data-bind="dxPropertyGrid: { target: value, level: editor.level + 1 }"></div>
+            <div data-bind="template: { name: 'dx-propertieseditor', data: getProperties() }"></div>
         </div>
     </div>
 </script>
@@ -4463,14 +4421,14 @@
 </script>
 
 <script type="text/html" id="dxcd-color-undo">
-    <div data-bind="dxColorBox: { value: generateValue($root.undoEngine), editAlphaChannel: true, popupPosition: { collision: 'flipfit flipfit' }, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) } }"></div>
+    <div data-bind="dxColorBox: { value: generateValue($root.undoEngine), onValueChanged: onValueChanged, editAlphaChannel: true, popupPosition: { collision: 'flipfit flipfit' }, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) } }"></div>
 </script>
 
 <script type="text/html" id="dx-selectbox-undo">
     <div data-bind="dxLocalizedSelectBox: { dataSource: values, value: generateValue($root.undoEngine), valueExpr: 'value', displayExpr: 'displayValue', displayCustomValue: true, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) } }, dxValidator: { validationRules: $data.validationRules || [] }"></div>
 </script><script type='text/html' id='dxrd-band-coordinate-grid-selection'>
 <!-- ko with: surface -->
-<div data-bind="styleunit: { 'height': height, 'width': $parent.width, top: absolutePosition.y }, css: { 'dxrd-band-content-selected dxd-border-accented dx-border-inheritor': selected() }, resizable: { starting: function() { $root.resizeHandler.started = true; $root.resizeHandler.starting() }, stopped: function() { $data.stopResize(); $root.resizeHandler.stopped(); $root.resizeHandler.started = false;}, handles: 's', disabled: !canResize(), forceResize: resize, zoom: $root.surface().zoom, minimumHeight: minHeight() }, trackCursor: underCursor" class="dxrd-position-absolute">
+<div data-bind="styleunit: { 'height': height, 'width': $parent.width, top: absolutePosition.y }, css: { 'dxrd-band-content-selected dxrd-context-menu-container dxd-border-accented dx-border-inheritor': selected() }, resizable: { starting: function() { $root.resizeHandler.started = true; $root.resizeHandler.starting() }, stopped: function() { $data.stopResize(); $root.resizeHandler.stopped(); $root.resizeHandler.started = false;}, handles: 's', disabled: !canResize(), forceResize: resize, zoom: $root.surface().zoom, minimumHeight: minHeight() }, trackCursor: underCursor" class="dxrd-position-absolute">
 </div>
 <!-- ko ifnot: collapsed -->
 <!-- ko template: { name: 'dxrd-band-holder', data: { templateName: 'leftMarginSelectionTemplate', holder: $data.bandsHolder, getData: function(item) { return { surface: item, width: $parent.width } } } }-->
@@ -4494,7 +4452,7 @@
     <!-- /ko -->
     <!-- ko if: collapsed -->
     <div data-bind="styleunit: { 'height': height, top: absolutePosition.y }" class="dxrd-band-collapsed">
-        <div data-bind="css: { 'dxrd-band-content-selected dxd-border-accented dx-border-inheritor': selected() }" class="dxrd-position-absolute dxrd-height-100 dxrd-width-100"></div>
+        <div data-bind="css: { 'dxrd-band-content-selected dxrd-context-menu-container dxd-border-accented dx-border-inheritor': selected() }" class="dxrd-position-absolute dxrd-height-100 dxrd-width-100"></div>
     </div>
     <!-- /ko -->
     <!-- /ko -->
@@ -4508,7 +4466,7 @@
     <!-- /ko -->
     <!-- ko if: collapsed -->
     <div data-bind="styleunit: { 'height': height, top: absolutePosition.y }" class="dxrd-band-collapsed">
-        <div data-bind="css: { 'dxrd-band-content-selected dxd-border-accented dx-border-inheritor': selected() }" class="dxrd-position-absolute dxrd-height-100 dxrd-width-100"></div>
+        <div data-bind="css: { 'dxrd-band-content-selected dxrd-context-menu-container dxd-border-accented dx-border-inheritor': selected() }" class="dxrd-position-absolute dxrd-height-100 dxrd-width-100"></div>
     </div>
     <!-- /ko -->
     <!-- /ko -->
@@ -4526,12 +4484,12 @@
     <!-- /ko -->
     <!-- ko if: collapsed -->
     <div data-bind="styleunit: { 'height': height, top: absolutePosition.y }" class="dxrd-band-collapsed">
-        <div data-bind="css: { 'dxrd-band-content-selected dxd-border-accented dx-border-inheritor': selected() }" class="dxrd-position-absolute dxrd-height-100 dxrd-width-100"></div>
+        <div data-bind="css: { 'dxrd-band-content-selected dxrd-context-menu-container dxd-border-accented dx-border-inheritor': selected() }" class="dxrd-position-absolute dxrd-height-100 dxrd-width-100"></div>
     </div>
     <!-- /ko -->
     <!-- /ko -->
 </script><script type="text/html" id="dxrd-band-selection">
-    <div data-bind="styleunit: { 'height': height, 'width': rect().width, top: absolutePosition.y }, css: { 'dxrd-band-content-selected dxd-border-accented dx-border-inheritor': selected() }, resizable: { starting: function() { $root.resizeHandler.started = true; $root.resizeHandler.starting() }, stopped: function() { $data.stopResize(); $root.resizeHandler.stopped(); $root.resizeHandler.started = false;}, handles: 's', disabled: !canResize(), forceResize: resize, zoom: $root.surface().zoom, minimumHeight: minHeight() }, trackCursor: underCursor" class="dxrd-position-absolute">
+    <div data-bind="styleunit: { 'height': height, 'width': rect().width, top: absolutePosition.y }, css: { 'dxrd-band-content-selected dxrd-context-menu-container dxd-border-accented dx-border-inheritor': selected() }, resizable: { starting: function() { $root.resizeHandler.started = true; $root.resizeHandler.starting() }, stopped: function() { $data.stopResize(); $root.resizeHandler.stopped(); $root.resizeHandler.started = false;}, handles: 's', disabled: !canResize(), forceResize: resize, zoom: $root.surface().zoom, minimumHeight: minHeight() }, trackCursor: underCursor" class="dxrd-position-absolute">
         <!-- ko if: contentSelectionTemplate -->
         <!-- ko template: contentSelectionTemplate-->
         <!-- /ko -->
@@ -4571,7 +4529,7 @@
     </div>
     <!-- /ko -->
     <!-- ko if: showMarker -->
-    <div class="dxrd-band-marker" data-bind="css: markerClass, styleunit: { 'height': height(), 'width': markerWidth }, click: function(_, e) { markerClick($root.selection); e.stopPropagation(); }, resizable: { starting: function() { $root.resizeHandler.started = true; $root.resizeHandler.starting(); $root.selection.initialize($data); }, stopped: function() { $data.stopResize(); $root.resizeHandler.stopped(); $root.resizeHandler.started = false; }, handles: 's', disabled: collapsed() || !hasOwnRuler() || locked, forceResize: resize, zoom: $root.surface().zoom, minimumHeight: minHeight() }">
+    <div class="dxrd-band-marker dxrd-context-menu-container" data-bind="css: markerClass, styleunit: { 'height': height(), 'width': markerWidth }, click: function(_, e) { markerClick($root.selection); e.stopPropagation(); }, event: $root.ContextMenuDisabled && $root.ContextMenuDisabled() ? null : { contextmenu: function(_, e) { markerClick($root.selection, false);  }}, resizable: { starting: function() { $root.resizeHandler.started = true; $root.resizeHandler.starting(); $root.selection.initialize($data); }, stopped: function() { $data.stopResize(); $root.resizeHandler.stopped(); $root.resizeHandler.started = false; }, handles: 's', disabled: collapsed() || !hasOwnRuler() || locked, forceResize: resize, zoom: $root.surface().zoom, minimumHeight: minHeight() }">
         <div class="dxrd-band-marker-content">
             <div class="dxrd-width-1px dxrd-height-1px dxrd-margin-left-9px"></div>
             <div class="dxrd-band-marker-rotation">
@@ -4664,7 +4622,7 @@
     <!-- /ko -->
     <!-- /ko -->
 </script><script type="text/html" id="dxrd-vertical-band-selection">
-    <div data-bind="styleunit: { 'height': height, 'width': _width, left: absolutePosition.x }, resizable: { starting: function() { $root.resizeHandler.started = true; $root.resizeHandler.starting() }, stopped: function() { $data.stopResize(); $root.resizeHandler.stopped(); $root.resizeHandler.started = false;}, handles: resizeHandles(), disabled: !canResize(), forceResize: resize, zoom: $root.surface().zoom, minimumWidth: minimumWidth(), minimumHeight: minimumHeight() },  css: { 'dxrd-band-content-selected dxd-border-accented dx-border-inheritor': selected() }, trackCursor: underCursor" class="dxrd-position-absolute">
+    <div data-bind="styleunit: { 'height': height, 'width': _width, left: absolutePosition.x }, resizable: { starting: function() { $root.resizeHandler.started = true; $root.resizeHandler.starting() }, stopped: function() { $data.stopResize(); $root.resizeHandler.stopped(); $root.resizeHandler.started = false;}, handles: resizeHandles(), disabled: !canResize(), forceResize: resize, zoom: $root.surface().zoom, minimumWidth: minimumWidth(), minimumHeight: minimumHeight() },  css: { 'dxrd-band-content-selected dxrd-context-menu-container dxd-border-accented dx-border-inheritor': selected() }, trackCursor: underCursor" class="dxrd-position-absolute">
         <div class="dxrd-vertical-band-marker" data-bind="css: { 'dxrd-vertical-band-marker-focused': focused }">
             <div class="dxrd-banding-marker-text" data-bind="text: name"></div>
         </div>
@@ -4816,13 +4774,13 @@
 </div>
 </script>
 <script type='text/html' id='dxrd-chart-selection'>
-<div class="dxrd-control" data-bind="visible: selected() || focused(), css: {'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
+<div class="dxrd-control" data-bind="visible: selected() || focused(), css: {'dxrd-selected dxrd-context-menu-container': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
     <div class="dxd-border-accented dxrd-control-border-box"></div>
     <div class="dxrd-chart-panel">
         <div class="dxrd-chart-panel-text" data-bind="dxclick: function() { $root.runChartDesigner($data); }, text: runDesignerButtonText(), attr: { title: runDesignerButtonText() }"></div>
     </div>
 </div>
-<div class="dxrd-control" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? 'visible' : 'hidden'}">
+<div class="dxrd-control dxrd-context-menu-container" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? 'visible' : 'hidden'}">
 </div>
 
 
@@ -4839,7 +4797,7 @@
     <div class="dxrd-control-content" data-bind="controlDisplayName: $data, style: contentCss, css: {'dxrd-control-content-multiline' : multiline }"></div>
 </div></script>
 <script type='text/html' id='dxrd-control-selection'>
-<div class="dxrd-control" data-bind="event: { dblclick: function() { $root.inlineTextEdit.show($element) } }, style: { visibility: (selected() || focused()) ? 'inherit' : 'hidden'}, css: {'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
+<div class="dxrd-control" data-bind="event: { dblclick: function() { $root.inlineTextEdit.show($element) } }, style: { visibility: (selected() || focused()) ? 'inherit' : 'hidden'}, css: {'dxrd-selected dxrd-context-menu-container': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
     <div class="dxd-border-accented dxrd-control-border-box"></div>
     <!-- ko if: $root.inlineTextEdit.visible() && selected() -->
     <!-- ko with: $root.inlineTextEdit-->
@@ -4853,7 +4811,7 @@
     <!-- /ko -->
     <!-- /ko -->
 </div>
-<div class="dxrd-control" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? 'visible' : 'hidden'}">
+<div class="dxrd-control dxrd-context-menu-container" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? 'visible' : 'hidden'}">
     <div class="dxrd-control-content-select-main" data-bind="styleunit: { 'top': contentSizes().top + (isIntersect() ? 1 : 0), 'left': contentSizes().left + (isIntersect()? 1 : 0), lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width}">
         <!-- ko if: $data.controls-->
         <!-- ko foreach: controls -->
@@ -4907,7 +4865,7 @@
 </div>
 </script>
 <script type="text/html" id="dxrd-crosstab-cell">
-    <div class="dxrd-crosstab-cell dxrd-control" data-bind="event: { dblclick: function() { isEditable() && $root.inlineTextEdit.show($element) } }, style: { visibility: (selected() || focused()) ? 'inherit' : 'hidden'}, css: {'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, styleunit: position, trackCursor: underCursor">
+    <div class="dxrd-crosstab-cell dxrd-control" data-bind="event: { dblclick: function() { isEditable() && $root.inlineTextEdit.show($element) } }, style: { visibility: (selected() || focused()) ? 'inherit' : 'hidden'}, css: {'dxrd-selected dxrd-context-menu-container': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, styleunit: position, trackCursor: underCursor">
         <!-- ko template: 'dxrd-crosstab-cell-selection' -->
         <!-- /ko -->
         <div class="dxd-border-accented dxrd-control-border-box"></div>
@@ -4918,7 +4876,7 @@
         <!-- /ko -->
         <div id="dxrd-crosstab-cell-drop" data-bind="visible: showDropSurface, css: dragCss, styleunit: { left: dropRect.left, top: dropRect.top, width: dropRect.width, height: dropRect.height }"></div>
     </div>
-    <div class="dxrd-crosstab-cell dxrd-control" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: 'visible'}, event: { mousedown: function(e) { cellClick(); } }">
+    <div class="dxrd-crosstab-cell dxrd-control dxrd-context-menu-container" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: 'visible'}, event: { mousedown: function(e) { cellClick(); } }">
         <!-- ko template: 'dxrd-crosstab-cell-selection' -->
         <!-- /ko -->
         <div class="dxrd-control-content-select-main" data-bind="styleunit: { 'top': contentSizes().top + (isIntersect() ? 1 : 0), 'left': contentSizes().left + (isIntersect()? 1 : 0), lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width}">
@@ -4947,7 +4905,7 @@
     <div class="dxrd-control-content" data-bind="controlDisplayName: $data, style: contentCss, css: {'dxrd-control-content-multiline' : multiline, 'dxrd-disabled': $data.getControlModel().isBindable() && !$data.getControlModel().fieldName() }, cacheElement: { action: function(element) { $data.cacheElementContent(element); } }"></div>
 </div></script>
 <script type='text/html' id='dxrd-crosstab'>
-<div class="dxrd-crosstab dxrd-control" data-bind="event: { dblclick: function() { $root.inlineTextEdit.show($element) } }, style: { visibility: (selected() || focused()) ? 'inherit' : 'hidden'}, css: {'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
+<div class="dxrd-crosstab dxrd-control" data-bind="event: { dblclick: function() { $root.inlineTextEdit.show($element) } }, style: { visibility: (selected() || focused()) ? 'inherit' : 'hidden'}, css: {'dxrd-selected dxrd-context-menu-container': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
     <div class="dxd-border-accented dxrd-control-border-box"></div>
     <!-- ko if: $root.inlineTextEdit.visible() && selected() -->
     <!-- ko with: $root.inlineTextEdit-->
@@ -4961,7 +4919,7 @@
     <!-- /ko -->
     <!-- /ko -->
 </div>
-<div class="dxrd-crosstab dxrd-control" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: 'visible'}">
+<div class="dxrd-crosstab dxrd-control dxrd-context-menu-container" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: 'visible'}">
     <div class="dxrd-control-content-select-main" data-bind="styleunit: { 'top': contentSizes().top + (isIntersect() ? 1 : 0), 'left': contentSizes().left + (isIntersect()? 1 : 0), lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width}">
         <!-- ko if: $data.controls-->
         <!-- ko foreach: controls -->
@@ -4978,10 +4936,10 @@
     <line data-bind="attr: { x1: linePosition().x1 / _context.zoom(), x2: linePosition().x2 / _context.zoom(), y1: linePosition().y1 / _context.zoom(), y2: linePosition().y2 / _context.zoom() }, style: contentCss" />
 </svg></script>
 <script type='text/html' id='dxrd-pagebreak-selection'>
-<div class="dxrd-control dxrd-pagebreak" data-bind="visible: isSelected(), trackCursor: underCursor, css: {'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-locked': locked }, draggable: $root.dragHandler, styleunit: { 'width': position.width(), 'height': 3, 'top': position.top() - 1, left: position.left() }">
+<div class="dxrd-control dxrd-pagebreak" data-bind="visible: isSelected(), trackCursor: underCursor, css: {'dxrd-selected dxrd-context-menu-container': selected, 'dxrd-focused': focused, 'dxrd-locked': locked }, draggable: $root.dragHandler, styleunit: { 'width': position.width(), 'height': 3, 'top': position.top() - 1, left: position.left() }">
     <div class="dxd-border-accented dxrd-control-border-box"></div>
 </div>
-<div class="dxrd-control dxrd-pagebreak" data-bind="visible: !isSelected(), trackCursor: underCursor, styleunit: { 'width': position.width(), 'height': 3, 'top': position.top() - 1, left: position.left() }">
+<div class="dxrd-control dxrd-pagebreak dxrd-context-menu-container" data-bind="visible: !isSelected(), trackCursor: underCursor, styleunit: { 'width': position.width(), 'height': 3, 'top': position.top() - 1, left: position.left() }">
 </div>
 </script>
 <script type='text/html' id='dxrd-pagebreak'>
@@ -5000,10 +4958,10 @@
     </div>
 </div></script>
 <script type='text/html' id='dxrd-pdfcontent-selection'>
-<div class="dxrd-control" data-bind="style: { visibility: (selected() || focused()) ? 'inherit' : 'hidden'}, css: {'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $data.getResizableOptions($root.resizeHandler), draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
+<div class="dxrd-control" data-bind="style: { visibility: (selected() || focused()) ? 'inherit' : 'hidden'}, css: {'dxrd-selected dxrd-context-menu-container': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $data.getResizableOptions($root.resizeHandler), draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
     <div class="dxd-border-accented dxrd-control-border-box"></div>
 </div>
-<div class="dxrd-control" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? 'visible' : 'hidden'}">
+<div class="dxrd-control dxrd-context-menu-container" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? 'visible' : 'hidden'}">
     <div class="dxrd-control-content-select-main" data-bind="styleunit: { 'top': contentSizes().top + (isIntersect() ? 1 : 0), 'left': contentSizes().left + (isIntersect()? 1 : 0), lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width}">
     </div>
 </div>
@@ -5028,10 +4986,10 @@
     </div>
 </div></script>
 <script type='text/html' id='dxrd-picturebox-selection'>
-<div class="dxrd-control" data-bind="visible: selected() || focused(), css: {'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $data.getResizeOptions($root.resizeHandler), draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
+<div class="dxrd-control" data-bind="visible: selected() || focused(), css: {'dxrd-selected dxrd-context-menu-container': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $data.getResizeOptions($root.resizeHandler), draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
     <div class="dxd-border-accented dxrd-control-border-box"></div>
 </div>
-<div class="dxrd-control" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? 'visible' : 'hidden'}">
+<div class="dxrd-control dxrd-context-menu-container" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? 'visible' : 'hidden'}">
     <div class="dxrd-control-content-select-main" data-bind="styleunit: { 'top': contentSizes().top + (isIntersect() ? 1 : 0), 'left': contentSizes().left + (isIntersect()? 1 : 0), lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width}">
     </div>
 </div>
@@ -5246,17 +5204,17 @@
 </script>
 
 <script type="text/html" id="dxrd-pivotgrid-selection">
-    <div class="dxrd-control" data-bind=" visible: !($data.selected() || $data.focused()), css: { 'dxrd-intersect': isIntersect, 'dxrd-locked': locked, 'dxrd-control-rtl': getControlModel().rtl() }, styleunit: position, trackCursor: underCursor">
+    <div class="dxrd-control dxrd-context-menu-container" data-bind=" visible: !($data.selected() || $data.focused()), css: { 'dxrd-intersect': isIntersect, 'dxrd-locked': locked, 'dxrd-control-rtl': getControlModel().rtl() }, styleunit: position, trackCursor: underCursor">
         <!-- ko template: 'dxrd-pivotgrid-selection-context' -->
         <!-- /ko -->
     </div>
-    <div class="dxrd-control" data-bind="visible: $data.selected() || $data.focused(), css: {'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked, 'dxrd-control-rtl': getControlModel().rtl() }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
+    <div class="dxrd-control" data-bind="visible: $data.selected() || $data.focused(), css: {'dxrd-selected dxrd-context-menu-container': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked, 'dxrd-control-rtl': getControlModel().rtl() }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
         <div class="dxd-border-accented dxrd-control-border-box"></div>
         <!-- ko template: 'dxrd-pivotgrid-selection-context' -->
         <!-- /ko -->
     </div>
 </script><script type='text/html' id='dxrd-report'>
-<div class="dxrd-surface" data-bind="styleunit: { 'width': Math.min($data.pageWidth() + $data.maxMarkerWidth() + $root.verticalScrollOffset() , $root.surfaceSize()) }, css: { 'dxrd-surface-rtl': rtl() }, click: function(surface, e) { !$root.selection.disabled() && $root.selection.clickHandler($root.selection.dropTarget ? null : surface, e); e.stopPropagation(); }, keyDownActions: $root.actionLists">
+<div class="dxrd-surface" data-bind="styleunit: { 'width': Math.min($data.pageWidth() + $data.maxMarkerWidth() + $root.verticalScrollOffset() , $root.surfaceSize()) }, css: { 'dxrd-surface-rtl': rtl() }, click: function(surface, e) { !$root.selection.disabled() && $root.selection.clickHandler($root.selection.dropTarget ? null : surface, e); e.stopPropagation(); }, event: $root.ContextMenuDisabled && $root.ContextMenuDisabled() ? null : { contextmenu: function(surface, e) { $data.surfaceContextMenuHandler && $data.surfaceContextMenuHandler($root.selection, surface, e); }}, keyDownActions: $root.actionLists">
     <div class="dxrd-content-panel-wrapper" data-bind="styleunit: $root.dx['config']()['rtlEnabled'] ?  { right: maxMarkerWidth() } : { left: maxMarkerWidth() }, style: { bottom: (20 - $root.horizontalScrollOffset()) + 'px' }">
         <div class="dxrd-content-panel">
             <div class="dxrd-hruler-wrapper">
@@ -5321,7 +5279,7 @@
                                     <!-- /ko -->
                                     <!-- ko foreach: crossBandControls -->
                                     <!-- ko if: visible -->
-                                    <div class="dxrd-cross-band" data-bind="visible: isSelected() && !$root.dx._static.DragDropHandler.started(), css: {'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
+                                    <div class="dxrd-cross-band" data-bind="visible: isSelected() && !$root.dx._static.DragDropHandler.started(), css: {'dxrd-selected dxrd-context-menu-container': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
                                     </div>
                                     <!-- /ko -->
                                     <!-- /ko -->
@@ -5386,10 +5344,10 @@
 </div>
 </script>
 <script type='text/html' id='dxrd-subreport-selection'>
-<div class="dxrd-control" data-bind="event: { dblclick:  function (control, e) { $root.navigateByReports.goToSubreport(control); } }, visible: isSelected, css: {'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $data.getResizableOptions($root.resizeHandler), draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
+<div class="dxrd-control" data-bind="event: { dblclick:  function (control, e) { $root.navigateByReports.goToSubreport(control); } }, visible: isSelected, css: {'dxrd-selected dxrd-context-menu-container': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $data.getResizableOptions($root.resizeHandler), draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
     <div class="dxd-border-accented dxrd-control-border-box"></div>
 </div>
-<div class="dxrd-control" data-bind="visible: !isSelected(), styleunit: position, trackCursor: underCursor">
+<div class="dxrd-control dxrd-context-menu-container" data-bind="visible: !isSelected(), styleunit: position, trackCursor: underCursor">
 </div></script>
 <script type='text/html' id='dxrd-subreport'>
 <div class="dxrd-control dxd-selectable" data-bind="styleunit: position, css: adorntemplate">
@@ -5398,7 +5356,7 @@
 </div>
 </script>
 <script type='text/html' id='dxrd-table-selection'>
-<div class="dxrd-table-control" data-bind="style: { visibility: !isSelected() ? 'visible' : 'hidden'}, styleunit: position">
+<div class="dxrd-table-control dxrd-context-menu-container" data-bind="style: { visibility: !isSelected() ? 'visible' : 'hidden'}, styleunit: position">
     <!-- ko if: rows().length > 0 -->
     <!-- ko foreach: rows -->
     <div class="dxrd-table-row-control" data-bind="styleunit: { 'top': position.top, 'height': position.height }">
@@ -5416,7 +5374,7 @@
 </div>
 
 <!-- ko if: (selected() || focused()) -->
-<div class="dxrd-table-control" data-bind="style: { visibility: 'inherit' }, css: { 'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position">
+<div class="dxrd-table-control" data-bind="style: { visibility: 'inherit' }, css: { 'dxrd-selected dxrd-context-menu-container': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position">
     <div class="dxd-border-accented dxrd-control-border-box"></div>
     <!-- ko if: rows().length > 0 -->
     <!-- ko foreach: rows()[0].cells -->
@@ -5442,17 +5400,17 @@
     <!-- /ko -->
 </div>
 <!-- /ko -->
-<div class="dxrd-table-control" data-bind="visible: isSelected() && !(selected() || focused()), styleunit: position">
+<div class="dxrd-table-control dxrd-context-menu-container" data-bind="visible: isSelected() && !(selected() || focused()), styleunit: position">
     <!-- ko if: rows().length > 0 -->
     <!-- ko foreach: rows()[0].cells -->
     <div class="dxrd-table-column-selection dxrd-table-column-selection-top" data-bind="click: function(_, e) { !$root.selection.disabled() && selectColumn($root.selection); e.stopPropagation(); }, visible: !$root.dx._static.DragDropHandler.started(), styleunit: { 'left': position.left, 'width': position.width }"></div>
     <!-- /ko -->
     <!-- ko foreach: rows -->
-    <div class="dxrd-table-row-control" data-bind="visible: isSelected(), css: { 'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-locked': locked }, resizable: { starting: $root.resizeHandler.starting, stopped: $root.resizeHandler.stopped, handles: 'n,s', disabled: !(selected() || focused()), zoom: $root.surface().zoom }, styleunit: { 'top': position.top, 'height': position.height }">
+    <div class="dxrd-table-row-control" data-bind="visible: isSelected(), css: { 'dxrd-selected dxrd-context-menu-container': selected, 'dxrd-focused': focused, 'dxrd-locked': locked }, resizable: { starting: $root.resizeHandler.starting, stopped: $root.resizeHandler.stopped, handles: 'n,s', disabled: !(selected() || focused()), zoom: $root.surface().zoom }, styleunit: { 'top': position.top, 'height': position.height }">
         <div class="dxd-border-accented dxrd-control-border-box"></div>
         <div class="dxrd-table-row-selection dxrd-table-row-selection-left" data-bind="visible: !$root.dx._static.DragDropHandler.started(), trackCursor: underCursor"></div>
         <!-- ko foreach: cells -->
-        <div class="dxrd-table-cell-control" data-bind="trackCursor: underCursor, event: { dblclick: function() { $root.inlineTextEdit.show($element) } }, visible: isSelected, css: { 'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked, 'dxrd-table-cell-over-rowSpan': rowSpan() === 0  }, resizable: { starting: $root.resizeHandler.starting, stopped: $root.resizeHandler.stopped, handles: 'e,w', disabled: !(selected() || focused()), zoom: $root.surface().zoom, snapHelper: $root.resizeHandler.snapHelper }, styleunit: { 'left': position.left, 'width': position.width, 'height': heightWithRowSpan }, style : { 'z-index': offsetZIndex() }">
+        <div class="dxrd-table-cell-control" data-bind="trackCursor: underCursor, event: { dblclick: function() { $root.inlineTextEdit.show($element) } }, visible: isSelected, css: { 'dxrd-selected dxrd-context-menu-container': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked, 'dxrd-table-cell-over-rowSpan': rowSpan() === 0  }, resizable: { starting: $root.resizeHandler.starting, stopped: $root.resizeHandler.stopped, handles: 'e,w', disabled: !(selected() || focused()), zoom: $root.surface().zoom, snapHelper: $root.resizeHandler.snapHelper }, styleunit: { 'left': position.left, 'width': position.width, 'height': heightWithRowSpan }, style : { 'z-index': offsetZIndex() }">
             <div class="dxd-border-accented dxrd-control-border-box"></div>
             <!-- ko if: $root.inlineTextEdit.visible() && selected() -->
             <!-- ko with: $root.inlineTextEdit-->
@@ -5473,7 +5431,7 @@
         <!-- /ko -->
         <div class="dxrd-table-row-selection dxrd-table-row-selection-right" data-bind="visible: !$root.dx._static.DragDropHandler.started(), trackCursor: underCursor"></div>
     </div>
-    <div class="dxrd-table-row-control" data-bind="visible: !isSelected(), styleunit: { 'top': position.top, 'height': position.height }">
+    <div class="dxrd-table-row-control dxrd-context-menu-container" data-bind="visible: !isSelected(), styleunit: { 'top': position.top, 'height': position.height }">
         <div class="dxrd-table-row-selection dxrd-table-row-selection-left" data-bind="visible: !$root.dx._static.DragDropHandler.started(),trackCursor: underCursor"></div>
         <!-- ko foreach: cells -->
         <div class="dxrd-table-cell-control" data-bind="trackCursor: underCursor, styleunit: { 'left': position.left, 'width': position.width, 'height': heightWithRowSpan  }, style : { 'z-index': offsetZIndex() }">
@@ -5577,7 +5535,7 @@
 
 
 <script type="text/html" id="dxrd-table-of-contents-selected">
-    <div class="dxrd-control dxrd-table-of-contents-selected" data-bind="event: { dblclick: function() { $root.inlineTextEdit.show($element) } }, visible: isSelected, css: {'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
+    <div class="dxrd-control dxrd-table-of-contents-selected dxrd-context-menu-container" data-bind="event: { dblclick: function() { $root.inlineTextEdit.show($element) } }, visible: isSelected, css: {'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
         <div class="dxd-border-accented dxrd-control-border-box"></div>
         <!-- ko with: levelTitle -->
         <div class="dxrd-control dxrd-control-line-ui-resizeble" data-bind="styleunit: position, resizable: resizable($root.resizeHandler, $element)">
@@ -5608,7 +5566,7 @@
         <!-- /ko -->
 
     </div>
-    <div class="dxrd-control" data-bind="visible: !isSelected(), styleunit: position, trackCursor: underCursor">
+    <div class="dxrd-control dxrd-context-menu-container" data-bind="visible: !isSelected(), styleunit: position, trackCursor: underCursor">
     </div>
 </script><script type='text/html' id='dxrd-textcontrol-content'>
 <div class="dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-width-100" data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }">
@@ -5675,7 +5633,7 @@
 </svg>
 </script>
 <script type="text/html" id="dxrd-expressions-tab">
-    <div class="dxrd-properties-wrapper dxrd-expressions-tab" data-bind="visible: active() && visible()">
+    <div class="dxrd-properties-wrapper dxrd-expressions-tab" data-bind="visible: active && visible">
         <div class="dxrd-properties-sub-wrapper">
             <div class="dxrd-right-panel-header dxd-text-primary">
                 <span data-bind="text: text"></span>
@@ -5708,8 +5666,8 @@
         </div>
     </div>
 </script><script type="text/html" id="dx-treelist-action-container-with-rename">
-    <div class="dx-treelist-action-container" data-bind="visible: !inRenameMode && (isSelected() || isHovered())">
-        <!-- ko template: actionsTemplate() -->
+    <div class="dx-treelist-action-container" data-bind="visible: !inRenameMode && (isSelected || isHovered)">
+        <!-- ko template: actionsTemplate -->
         <!-- /ko -->
     </div>
 </script>
@@ -5717,19 +5675,19 @@
 <script type="text/html" id="dx-treelist-item-text-content-with-rename">
     <div class="dx-treelist-text-wrapper">
         <!-- ko if: !inRenameMode -->
-        <!-- ko if: treeListController.searchEnabled -->
-        <div class="dx-treelist-text dx-highlighted-search-text" data-bind="searchHighlighting: { text: text, textToSearch: treeListController.textToSearch, searchOptions: treeListController.searchOptions }, attr: { title: text }"></div>
+        <!-- ko if: searchModel.searchEnabled -->
+        <div class="dx-treelist-text dx-highlighted-search-text" data-bind="searchHighlighting: { text: text, textToSearch: searchModel.textToSearch, searchOptions: searchModel.searchOptions }, attr: { title: text }"></div>
         <!-- /ko  -->
-        <!-- ko ifnot: treeListController.searchEnabled -->
+        <!-- ko ifnot: searchModel.searchEnabled -->
         <div class="dx-treelist-text" data-bind="text: text, attr: { title: text }"></div>
         <!-- /ko  -->
         <!-- /ko  -->
         <!-- ko if: inRenameMode -->
-        <div class="dx-treelist-rename-node" data-bind="dxTextBox: $data.createRenameEditorOptions(), dxValidator: $data.createValidatorOptions()"></div>
+        <div class="dx-treelist-rename-node" data-bind="dxTextBox: createRenameEditorOptions(), dxValidator: createValidatorOptions()"></div>
         <!-- /ko -->
     </div>
 </script><script type='text/html' id='dxrd-fieldlistwrapper'>
-<div class="dxrd-fieldslist-wrapper dxrd-height-100 dxrd-overflow-hidden" data-bind="visible: active() && visible()" >
+<div class="dxrd-fieldslist-wrapper dxrd-height-100 dxrd-overflow-hidden" data-bind="visible: active && visible" >
     <!-- ko with: model -->
     <div class="dxrd-right-panel-header dxd-text-primary">
         <div class="dxrd-fieldslist-wrapper-header" data-bind="text: $root.getLocalization('Field List', 'ReportStringId.UD_Title_FieldList')"></div>
@@ -5746,9 +5704,21 @@
             <div id="tree" data-bind="treelist: treeListOptions" class="dxrd-width-100 dxrd-height-100"></div>
         </div>
     </div>
+    <!-- ko if: useContextMenu -->
+    <div data-bind="dxContextMenu: {
+        dataSource: fieldListContextMenu.dataSource,
+        target: fieldListContextMenu.target,
+        itemTemplate: fieldListContextMenu.itemTemplate,
+        cssClass: fieldListContextMenu.cssClass,
+        hideOnOutsideClick: fieldListContextMenu.hideOnOutsideClick,
+        onItemClick: function(e) {
+            fieldListContextMenu.onItemClick(e);
+        },
+        onInitialized: fieldListContextMenu.onInitialized
+    }"></div>
     <!-- /ko -->
-</div>
-</script>
+    <!-- /ko -->
+</div></script>
 <script type="text/html" id="dxrd-localization-editor-item">
     <div class="dx-fieldset">
         <div class="dx-field">
@@ -5849,7 +5819,7 @@
     <!-- /ko -->
 </script>
 <script type="text/html" id="dxrd-reportexplorerwrapper">
-    <div class="dxrd-fieldslist-wrapper dxrd-height-100 dxrd-overflow-hidden" data-bind="visible: active() && visible()" >
+    <div class="dxrd-fieldslist-wrapper dxrd-height-100 dxrd-overflow-hidden" data-bind="visible: active && visible" >
         <div class="dxrd-right-panel-header dxd-text-primary">
             <div class="dxrd-fieldslist-wrapper-header" data-bind="text: $root.getLocalization('Report Explorer', 'ReportStringId.UD_Title_ReportExplorer')"></div>
         </div>
@@ -5910,7 +5880,7 @@
     <div class="dxrd-designer-wrapper dx-editors dxd-surface-back-color dxd-back-primary" data-bind="css: { 'dx-rtl' : $root.rtl, 'dx-ltr': !$root.rtl }">
 
         <div class="dxrd-toolbar-wrapper">
-            <div class="dxrd-toolbar" data-bind="template: { name: 'dxrd-toolbar-tmplt', data: toolbarItems }"></div>
+            <div class="dxrd-toolbar" data-bind="template: { name: 'dxrd-toolbar-tmplt', data: getViewModel().toolbarItems }"></div>
         </div>
 
         <div class="dxrd-scripts-wrapper">
@@ -5921,23 +5891,33 @@
     <!-- /ko -->
 </script>
 
-<script type="text/html" id="dxrd-scripting-controlchooser">
+<script type="text/html" id="dxrd-scripting-selectboxaction">
     <div class="dxrd-toolbar-item dxrd-toolbar-selectbox">
-        <div data-bind="dxSelectBox: { dataSource: controls, value: control, displayExpr: displayExpr, placeholder: $root.getLocalization('Select control...', 'ASPxReportsStringId.ReportDesigner_ScriptEditor_Toolbar_SelectControl'), width: '300px', dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true  }"></div>
-        <div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: $data.hasSeparator"></div>
-    </div>
-</script>
-
-<script type="text/html" id="dxrd-scripting-eventchooser">
-    <div class="dxrd-toolbar-item dxrd-toolbar-selectbox">
-        <div data-bind="dxSelectBox: { items: events, value: event, placeholder: $root.getLocalization('Select event...', 'ASPxReportsStringId.ReportDesigner_ScriptEditor_Toolbar_SelectEvent'), width: '200px', dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true  }"></div>
+        <div data-bind="dxSelectBox: { items: widget.dataSource, onValueChanged: widget.onValueChanged, value: widget.value, displayExpr: widget.displayExpr, placeholder: widget.placeholder, width: widget.width, dropDownOptions: { container: getPopupContainer($element) }, useItemTextAsTitle: true  }"></div>
         <div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: $data.hasSeparator"></div>
     </div>
 </script><script type='text/html' id='dxrd-scripts'>
 <div class="dxrd-scripts" data-bind="visible: editorVisible, template: 'dxrd-scripts-addon'">
 </div>
 </script>
-<script type="text/html" id='dxrd-error-panel'>
+<script type="text/html" id="dxrd-context-menu-item">
+        <div class="dx-context-menu" data-bind="css: {'dx-context-menu-flex': !($data.items) }">
+            <!-- ko if: $data.imageTemplateName -->
+            <div class="dx-context-menu-icon">
+                <!-- ko template: { name: $data.imageTemplateName }  -->
+                <!-- /ko -->
+            </div>
+            <!-- /ko -->            
+            <div class="dx-context-menu-text" data-bind="text: $data.displayText ? $data.displayText() : $data.text">
+            </div>
+            <!-- ko if: $data.items -->
+            <div class="dx-context-menu-group-icon">
+                <!-- ko template: { name: 'dxrd-svg-preview-next_page' }  -->
+                <!-- /ko -->
+            </div>
+            <!-- /ko -->
+        </div>
+</script><script type="text/html" id='dxrd-error-panel'>
 <div class="dxrd-error-panel dxd-text-primary dxd-back-primary2" data-bind="style: _position, css: { 'collapsed': collapsed }, resizable: _resizableOptions">
     <div class="dxrd-width-100 dxrd-height-100" data-bind="style: { display: $data.collapsed() ? 'none' : 'block' }">
     <div class="dxrd-error-panel-header dxd-border-primary dxd-back-primary2">
@@ -6125,11 +6105,9 @@
                 </div>
             </div>
             <div class="dx-editor-content dx-accordion-content">
-                <!-- ko if: (!$data.editorCreated || editorCreated) -->
-                <!-- ko if: visible -->
+                <!-- ko if: editorCreated && visible -->
                 <div data-bind="template: { name: 'dx-propertieseditor', data: viewmodel }"></div>
                 <!-- /ko -->
-                <!-- /ko -->
             </div>
         </div>
     </div>
@@ -6147,7 +6125,7 @@
              collapsed: false,
              alwaysShow: true
         }">
-            <div data-bind="dxPropertyGrid: { target: value, level: editor.level }"></div>
+            <div data-bind="template: { name: 'dx-propertieseditor', data: getProperties({ level: level }) }"></div>
         </div>
     </div>
     <!-- /ko -->
@@ -6165,7 +6143,7 @@
              showScroll: true,
              alwaysShow: true
         }">
-            <div data-bind="dxPropertyGrid: { target: $data.value, level: editor.level }"></div>
+            <div data-bind="template: { name: 'dx-propertieseditor', data: getProperties({ level: level }) }"></div>
         </div>
     </div>
 </script><script type="text/html" id="dxrd-report-dialog-template">
@@ -6290,20 +6268,78 @@
             <div class="dxrd-menu-place dxrd-width-54px" ></div>
         </div>
     </div>
-</script><script type="text/html" id="dxrd-smart-tags">
+</script><script type="text/html" id="dxrd-smart-tag-editor">
+<!-- ko if: editorTemplate !== 'dx-commonCollection' -->
+<div class="dx-editor" data-bind="visible: visible">
+    <div class="dx-field" data-bind="css: { 'dx-field-flex': (templateName === 'dx-boolean'), 'dx-field-block': (templateName !== 'dx-boolean') }">
+        <!-- ko if: templateName !== 'dx-boolean'-->
+        <label class="dxa-smarttag-editor-displayName"
+                data-bind="text: displayName, attr: { 'title': fullDisplayName, 'for': editorInputId }, css: { 'dx-property-required': isRequired }"></label>
+        <!-- /ko -->
+       
+        <div class="dx-field-value" data-bind="css: { 'dxd-border-accented': $data.isPropertyHighlighted }">            
+            <!-- ko if: templateName !== 'dx-emptyHeader' -->
+            <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->
+            <!-- /ko -->
+            <!-- /ko -->
+        </div>
+        <!-- ko if: templateName === 'dx-boolean'-->
+        <label class="dxa-smarttag-editor-displayName"
+            data-bind="text: displayName, attr: { 'title': fullDisplayName, 'for': editorInputId }, css: { 'dx-property-required': isRequired }"></label>
+        <!-- /ko -->
+    </div>    
+</div>
+<!-- /ko -->
+</script><script type='text/html' id='dxrd-smart-tag'>
+<div class="dxrd-z-index-0 dxrd-position-absolute" data-bind="dxPopover: {
+    width: '216px',
+    height: 'auto',
+    position: { my: 'left center', at: 'right center', boundary: '.dxrd-designer-wrapper', of: '.dxrd-control-smart-tag', collision: 'flip fit', offset: '-10 0' },
+    container: getPopupContainer($element),    
+    hideOnOutsideClick: true,    
+    showTitle: false,    
+    showCloseButton: false,
+    shading: false,
+    visible: popoverVisible,    
+    animation: {} }">
+    <div class="dxa-tasks-smart-tag-content" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
+        <div data-bind="css: { 'dx-rtl' : rtl }">
+            <div class="dx-editors">
+                <div class="dx-fieldset">
+                    <!-- ko foreach: getEditors(false) -->
+                        <!-- ko if: visible -->
+                            <!-- ko template: 'dxrd-smart-tag-editor' -->
+                            <!-- /ko -->
+                        <!-- /ko -->
+                    <!-- /ko -->
+                    <div class="dxa-smart-tag-separator" data-bind="visible: separatorVisible"></div>
+                    <!-- ko foreach: getEditors(true) -->
+                        <!-- ko if: visible -->
+                            <!-- ko template: 'dxrd-smart-tag-editor' -->
+                            <!-- /ko -->
+                        <!-- /ko -->
+                    <!-- /ko -->
+                </div>
+            </div>
+        </div>
+    </div>
+</div></script>
+<script type="text/html" id="dxrd-smart-tags">
     <div class="dxrd-control-smart-tags" data-bind="styleunit: { 'left': $data.position.x, 'top': $data.position.y },
     style: $root.rtl ? { 'margin-right': margin } : { 'margin-left': margin }, visible: visible">
         <!-- ko foreach: $data.smartTags -->
-        <div class="dxrd-control-smart-tag dxd-icon-accented" data-bind="dxButtonWithTemplate: {
-            icon: $data.imageTemplateName,
-            iconClass: $data.imageTemplateName },
-            event: { dblclick: function(_, event){ event.stopPropagation(); } }, 
-            click: function(_, event){ $data.onClick(); event.stopPropagation(); }">
-        </div>
-        <!--ko if: $data.templateName -->
-        <!--ko template: $data.templateName -->
-        <!--/ko-->
-        <!--/ko-->
+            <!-- ko if: visible -->
+            <div class="dxrd-control-smart-tag dxd-icon-accented" data-bind="dxButtonWithTemplate: {
+                icon: $data.imageTemplateName,
+                iconClass: $data.imageTemplateName },
+                event: { dblclick: function(_, event){ event.stopPropagation(); } }, 
+                click: function(_, event){ $data.onClick(); event.stopPropagation(); }">
+            </div>
+                <!--ko if: $data.templateName -->
+                    <!--ko template: $data.templateName -->
+                    <!--/ko-->
+                <!--/ko-->
+            <!-- /ko -->
         <!-- /ko -->
     </div>
 </script>
@@ -6350,6 +6386,9 @@
     <div role="button" class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" data-bind="visible: $data.visible, attr: { 'aria-label': $data.displayText && $data.displayText() || $data.text, 'aria-disabled': ko.unwrap($data.disabled) ? 'true' : 'false', 'aria-pressed': $data.selected ? ($data.selected() ? 'true' : 'false') : null }" >
         <div data-bind="text: $data.displayText && $data.displayText() || $data.text, attr: { title: $data.displayText && $data.displayText() || $data.text, class: 'dxd-text-primary dxd-back-highlighted ' + (ko.unwrap($data.imageClassName) || '') }, dxclick: function() { if((typeof $data.disabled === 'function') && !$data.disabled() || !$data.disabled) { $data.clickAction($root.model && $root.model()); } }, css: {'dxrd-disabled-button': $data.disabled }"></div>
     </div>
+</script>
+<script type="text/html" id="dxrd-context-menu">
+    <div data-bind="dxContextMenu: $data.contextMenu"></div>
 </script><script type="text/html" id="dxrd-expression-action">
     <div data-bind="dxclick: function() { $root.activateExpressionEditor($data); }">
         <span class="dxd-text-primary dx-menu-item-text" data-bind="attr: { title: title }, text: title"></span>
@@ -6499,7 +6538,7 @@
                     </div>
                 </div>
                 <div class="dx-accordion-content dxd-back-primary">
-                    <div data-bind="dxPropertyGrid: { target: value, editorsInfo: { editors: $root.dx._static.formattingRuleSerializationsInfo }, level: editor.level + 1, parentDisabled: editor.disabled }"></div>
+                    <div data-bind="dxPropertyGrid: { target: value, editorsInfo: { editors: $root.dx._static.formattingRuleSerializationsInfo }, level: level + 1, parentDisabled: editor.disabled }"></div>
                 </div>
             </div>
         </div>
@@ -6530,6 +6569,7 @@
     <div data-bind="dxFieldListPicker: {
     acceptCustomValue: true,
     displayValue: $displayName,
+    onValueChanged: onValueChanged, 
     itemsProvider: $root.dataBindingsProvider(),
     treeListController: $parent.treeListController,
     value: $data.generateValue($root.undoEngine(), $root.dataSourceHelper(), $root.fieldListDataSources(), $root.dataBindingsProvider()),
@@ -6542,6 +6582,7 @@
 <script type="text/html" id="dxrd-chartValueBinding">
     <div data-bind="dxFieldListPicker: {
     acceptCustomValue: true,
+    onValueChanged: onValueChanged, 
     displayValue: generateDisplayValue($root.reportDataSource),
     itemsProvider: $root.reportDataBindingsProvider,
     treeListController: treeListController,
@@ -6550,7 +6591,7 @@
 </script>
 
 <script type="text/html" id="dxrd-reportexplorer-editor">
-    <div data-bind="dxFieldListPicker: { acceptCustomValue: true, value: itemsProvider.selectedPath, displayValue: displayExpr, itemsProvider: itemsProvider, path: itemsProvider.path, disabled: disabled, treeListController: treeListController }"></div>
+    <div data-bind="dxFieldListPicker: { acceptCustomValue: true, onValueChanged: onValueChanged, value: itemsProvider.selectedPath, displayValue: displayExpr, itemsProvider: itemsProvider, path: itemsProvider.path, disabled: disabled, treeListController: treeListController }"></div>
 </script>
 
 <script type="text/html" id="dxrd-dataBindingsContent">
@@ -6578,21 +6619,21 @@
 </script>
 
 <script type="text/html" id="dxrd-collection-item-group">
-    <div class="dx-field dxd-back-primary" data-bind="styleunit: { 'marginLeft' : $parents[1].padding }">
+    <div class="dx-field dxd-back-primary" data-bind="styleunit: { 'marginLeft' : padding }">
         <div class="dx-field-label dxd-text-primary">
-            <div class="propertygrid-editor-displayName" data-bind="text: $parents[1].options.info().getChildCaption(index()) + ':'"></div>
+            <div class="propertygrid-editor-displayName" data-bind="text: $parents[1].info().getChildCaption(index) + ':'"></div>
         </div>
         <div class="dx-field-value">
-            <div class="dxrd-collectioneditor-action" data-bind="dxButtonWithTemplate: { onClick: value().changeSortOrder, icon: value().sortOrderClass().template, iconClass: value().sortOrderClass().class, disabled: editor.disabled }"></div>
-            <!-- ko displayNameExtender: { path: function() { return $data.editor._model() && $data.editor._model().getPath('groupFields') || '' }, dataMember: value().fieldName } -->
+            <div class="dxrd-collectioneditor-action" data-bind="dxButtonWithTemplate: { onClick: value.changeSortOrder, icon: value.sortOrderClass().template, iconClass: value.sortOrderClass().class, disabled: disabled }"></div>
+            <!-- ko displayNameExtender: { path: function() { return $parents[1]._model() && $parents[1]._model().getPath('groupFields') || '' }, dataMember: value.fieldName } -->
             <div class="dxrd-collectioneditor-picker" data-bind="dxFieldListPicker: {
     displayValue: $displayName,
-    value: value().fieldName,
+    value: value.fieldName,
     acceptCustomValue: true,
-    path: editor._model() && editor._model().getPath('groupFields') || '',
+    path: $parents[1]._model() && $parents[1]._model().getPath('groupFields') || '',
     itemsProvider: $root.dataBindingsProvider(),
     treeListController: new $root.dx._static.TreeListController(),
-    disabled: editor.disabled
+    disabled: disabled
 }"></div>
             <!--/ko -->
         </div>
@@ -6602,7 +6643,7 @@
 <script type="text/html" id="dxrd-lookUpValues">
     <div class="dxrd-editor" data-bind="visible: visible">
         <div data-bind="dxCollectionEditor: { values: value, addHandler: $root.dx._static.LookUpValue.createNew, undoEngine: $root.undoEngine, level: level, displayName: $root.getLocalization(displayName), info: info }">
-            <div data-bind="dxPropertyGrid: { target: $data.value, level: editor.level + 1 }"></div>
+            <div data-bind="template: { name: 'dx-propertieseditor', data: getProperties() }"></div>
         </div>
     </div>
 </script>
@@ -6633,15 +6674,15 @@
 </script>
 
 <script type="text/html" id="dxrd-collectionItemWithAccordion">
-    <div class="dxrd-accordion-collection-item" data-bind="dxdAccordion: { collapsed: collapsed }">
+    <div class="dxrd-accordion-collection-item" data-bind="dxdAccordion: { collapsed: collapsed, setCollapsed: setCollapsed, getCollapsed: getCollapsed, setCollapsedChangedEvent: setCollapsedChangedEvent }">
         <div class="dxrd-group-header dx-accordion-header dxd-text-primary">
-            <div data-bind="styleunit: {'paddingLeft': $parents[1].padding + $root.dx._static.propertiesGridEditorsPaddingLeft }">
-                <div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed() }"></div>
-                <div class="dx-group-header-font dxd-text-primary" data-bind="text: $root.getLocalization($parent.name), attr: { title: $root.getLocalization($parent.name) }"></div>
+            <div data-bind="styleunit: {'paddingLeft': padding + $root.dx._static.propertiesGridEditorsPaddingLeft }">
+                <div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed }"></div>
+                <div class="dx-group-header-font dxd-text-primary" data-bind="text: $root.getLocalization(value.name), attr: { title: $root.getLocalization(value.name) }"></div>
             </div>
         </div>
         <div class="dx-accordion-content dxd-back-primary">
-            <div data-bind="dxPropertyGrid: { target: value, level: editor.level + 2, parentDisabled: editor.disabled }"></div>
+            <div data-bind="template: { name: 'dx-propertieseditor', data: getProperties({ level: level + 2 }) }"></div>
         </div>
     </div>
 </script>
@@ -7145,6 +7186,7 @@
                                 <div data-bind="dxFieldListPicker: {
                                      itemsProvider: $parent._fieldListProvider,
                                      acceptCustomValue: false,
+                                     onValueChanged: onValueChanged,
                                      value: selectedPath,
                                      displayValue: displayName,
                                      placeholder: $root.dx._static.selectPlaceholder()
@@ -7551,13 +7593,13 @@
     <!-- /ko -->
 </div></script>
 <script type='text/html' id='dxrd-richedit-selection'>
-<div class="dxrd-control" data-bind="event: { dblclick: function() { $root.richInlineControl.show($element) } }, visible: selected() || focused(), css: {'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
+<div class="dxrd-control" data-bind="event: { dblclick: function() { $root.richInlineControl.show($element) } }, visible: selected() || focused(), css: {'dxrd-selected dxrd-context-menu-container': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
     <!-- ko if: selected() -->
     <div class="dxd-border-accented dxrd-control-border-box" data-bind="style: { 'backgroundColor': $root.richInlineControl.visible() && selected() ? '#FFF' : 'transparent' }"></div>
     <!-- /ko -->
 </div>
 
-<div class="dxrd-control" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? 'visible' : 'hidden'}">
+<div class="dxrd-control dxrd-context-menu-container" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? 'visible' : 'hidden'}">
     <div class="dxrd-control-content-select-main" data-bind="styleunit: { 'top': contentSizes().top + (isIntersect() ? 1 : 0), 'left': contentSizes().left + (isIntersect()? 1 : 0), lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width}">
     </div>
 </div>