devexpress-reporting 23.2.0-build-000-1111 → 23.2.2-beta

package/dx-designer-templates.js

@@ -1,20 +1,20 @@
-/**
-* DevExpress HTML/JS Reporting (dx-designer-templates.js)
-* Version:  23.2.1-build-23191-1448
-* Build date: Jul 10, 2023
-* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
-* License: https://www.devexpress.com/Support/EULAs/universal.xml
-*/
-import { SvgTemplatesEngine } from '@devexpress/analytics-core/analytics-widgets-internal';
+/**
+* DevExpress HTML/JS Reporting (dx-designer-templates.js)
+* Version:  23.2.2-beta
+* Build date: Nov 13, 2023
+* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
+import { SvgTemplatesEngine } from '@devexpress/analytics-core/analytics-widgets-internal-native';
 SvgTemplatesEngine.addTemplates({
     'dx-chart-leftPanel': '<div class="dx-chart-left-panel dxd-border-primary dxd-properties-panel-group-header-back-color dxd-back-primary"> <div class="dxrd-right-panel dxd-border-primary dxd-properties-panel-group-header-back-color" data-bind="css: tabPanel.cssClasses()"> <div class="dxrd-right-panel-header dxd-text-primary"> <span data-bind="text: rightPanelHeader()"></span> </div> <!-- ko if: chartStructure --> <div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: \'onHover\', scrollByContent: false, bounceEnabled: false, useNative: false, scrollByThumb: true }"> <div class="dxcd-chart-structure dxd-back-primary" data-bind="treelist: chartStructure"></div> </div> <!-- /ko --> </div> </div>',
     'dxcd-indicators-list': '<div class="dxcd-indicators-list" data-bind="dxList: { dataSource: actions, searchExpr: \'display\', searchEnabled: true, onItemClick: function(e) { e.itemData.clickAction(); }}"> <div data-options="dxTemplate : { name: \'item\' }"> <div class="dx-text-content" data-bind="text: display, attr: { title: display }"></div> </div> </div>',
-    'dxcd-toolbar': '<div class="dxrd-toolbar-wrapper"> <div class="dxrd-toolbar" data-bind="template: {name: \'dxrd-toolbar-tmplt\', data: actionLists.toolbarItems }"></div> </div>',
+    'dxcd-toolbar': '<div class="dxrd-toolbar-wrapper"> <div class="dxrd-toolbar" data-bind="template: {name: \'dxrd-toolbar-tmplt\', data: actionLists.getViewModel().toolbarItems }"></div> </div>',
     'dx-chart-middlePart': '<!-- ko ifnot: isLoading --> <!-- ko with: surface --> <div class="dxrd-surface-wrapper dxrd-top-0"  data-bind="template: templateName"> </div> <!-- /ko --> <!-- /ko --> <!-- ko if: isLoading --> <div class="dxrd-surface-wrapper"> <div class="dxrd-text-align-center dxrd-padding-top-49"> <div data-bind="dxLoadIndicator: { visible: isLoading() }"></div> </div> </div> <!-- /ko -->',
     'dx-chart-surface': '<div class="dxrd-surface" data-bind="styleunit: { \'width\': Math.min(width(), $root.surfaceSize()) }, click: function(_, e) { e.stopPropagation(); }"> <div class="dxrd-viewport" data-bind="styleunit: { minWidth: Math.min(width() + 60, $root.surfaceSize()), maxWidth: width() + 60,  maxHeight: height() + 60 }"> <div class="dxrd-control dxrd-border-none dxrd-background-none" > <div data-bind="zoom: zoom, styleunit: { \'height\': height() / zoom(), \'width\': width() / zoom() }"> <img data-bind="attr: {src: imageSrc }, styleunit: { \'height\': height() / zoom(), \'width\': width() / zoom() }" /> </div> </div> </div> </div>',
     'dxcd-collection-lookup-header': '<div data-bind="dxSelectBox: { items: array, displayExpr: \'name\', value: selectedItem, disabled: disabled,  placeholder: $root.dx._static.selectPlaceholder(), noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, dropDownOptions: { container: $root.getPopupContainer($element) , useItemTextAsTitle: true } }"></div>',
     'dxcd-collection-item': '<!-- ko if: selectedItem --> <div data-bind="dxPropertyGrid: { target: selectedItem, editorsInfo: { editors: editors }, level: 1 }"></div> <!--/ko -->',
-    'dxcd-field': '<!-- ko if: visible --> <div data-bind="dxFieldListPicker: { path: path, value: value, acceptCustomValue: true, itemsProvider: $root.dataBindingsProvider(), treeListController: treeListController, disabled: disabled }"></div> <!--/ko -->',
+    'dxcd-field': '<!-- ko if: visible --> <div data-bind="dxFieldListPicker: { path: path, value: value, onValueChanged: onValueChanged, acceptCustomValue: true, itemsProvider: $root.dataBindingsProvider(), treeListController: treeListController, disabled: disabled }"></div> <!--/ko -->',
     'dxrd-propertygridtab': '<div class="dxrd-right-panel-header dxd-text-primary"> <span data-bind="text: text"></span> </div> <div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: \'onHover\' }"> <!-- ko template: { name: \'dx-propertieseditor\', data: model }--> <!-- /ko --> </div>',
     'dxcd-panes-editor': '<div data-bind="dxSelectBox: { dataSource: $root.panes, value: value, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true  }"></div>',
     'dxcd-legends-editor': '<div data-bind="dxSelectBox: { dataSource: $root.legends, value: value, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true  }"></div>',
@@ -24,26 +24,26 @@ SvgTemplatesEngine.addTemplates({
     'dxcd-viewHeader': '<div data-bind="dxSelectBox: { dataSource: generateViewItems(), itemTemplate: \'stateItem\', valueExpr: \'value\', value: generateHeaderValue($root.undoEngine), displayExpr: \'displayValue\', disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true  }"> <div class="lookupItem" data-options="dxTemplate:{ name:\'stateItem\' }"> <div class="dxrd-display-inline-block dxrd-width-24px dxrd-height-24px" data-bind="css: className, template: {name: templateName, if: !!templateName }"> </div> <div class="dxrd-display-inline-block dxrd-vertical-align-super dxrd-width-calc-100-30px dxrd-overflow-hidden dxrd-text-overflow-ellipsis" data-bind="text: displayValue"></div> </div> </div>',
     'dxcd-viewContent': '<div data-bind="dxPropertyGrid: { target: contentValue, level: level + 1, parentDisabled: disabled }"></div>',
     'dxcd-summaryfunction': '<div class="dx-editor" data-bind="visible: visible"> <div data-bind="dxCollectionEditor: options"> </div> </div>',
-    'dxcd-summaryFunction-content': '<div class="dxcd-summary-function-content"> <!-- ko with: value --> <div class="dx-field dxd-back-primary"> <div class="dx-field-label dxd-text-primary" data-bind="styleunit: $parent.memberPadding"> <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> </div> <!-- ko foreach: args --> <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> <!-- /ko --> <!-- ko if: $parent.args().length > 1--> <div class="propertygrid-editor-displayName" data-bind="text: $parents[1].getLocalization(\'Argument\', \'DevExpress.XtraCharts.SeriesSelectionMode.Argument\') + ($index() + 1), attr: { \'title\': $parents[1].getLocalization(\'Argument\', \'DevExpress.XtraCharts.SeriesSelectionMode.Argument\') + ($index() + 1) }"></div> <!-- /ko --> </div> <div class="dx-field-value"> <!-- ko if: $parents[1].actionsAreAvailable() --> <div class="dxcd-summaryFunction-remove" data-bind="click: function(){ $parents[1].remove($index()) }"> <div class="dxcd-summaryFunction-remove-icon dx-icon-dxrd-image-recycle-bin"><!-- ko template: \'dxrd-svg-operations-recycle_bin\'--><!-- /ko --></div> </div> <!-- /ko --> <!-- ko template: { name: $parents[1].argumentTemplateName, data: { value: $data.value, path: $parents[1].path, treeListController: $parents[1].treeListController, disabled: $parents[1].disabled, visible: $parents[1].visible } } --> <!-- /ko --> </div> </div> <!-- /ko --> <!-- 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> </div> </div> <!-- /ko --> <!-- /ko --> </div>',
-    'dxcd-pointscollection': '<div class="dxrd-editor" data-bind="visible: visible"> <div data-bind="dxCollectionEditor: { values: value, displayName: displayName, level: level, info: info, addHandler: function() { return addPoint(_model()[\'owner\'] || _model()); } }"> <div data-bind="dxPropertyGrid: { target: value, level: editor.level + 1 }"></div> </div> </div>',
+    'dxcd-summaryFunction-content': '<div class="dxcd-summary-function-content"> <!-- ko with: value --> <div class="dx-field dxd-back-primary"> <div class="dx-field-label dxd-text-primary" data-bind="styleunit: $parent.memberPadding"> <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> </div> <!-- ko foreach: args --> <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> <!-- /ko --> <!-- ko if: $parent.args().length > 1--> <div class="propertygrid-editor-displayName" data-bind="text: $parents[1].getLocalization(\'Argument\', \'DevExpress.XtraCharts.SeriesSelectionMode.Argument\') + ($index() + 1), attr: { \'title\': $parents[1].getLocalization(\'Argument\', \'DevExpress.XtraCharts.SeriesSelectionMode.Argument\') + ($index() + 1) }"></div> <!-- /ko --> </div> <div class="dx-field-value"> <!-- ko if: $parents[1].actionsAreAvailable() --> <div class="dxcd-summaryFunction-remove" data-bind="click: function(){ $parents[1].remove($index()) }"> <div class="dxcd-summaryFunction-remove-icon dx-icon-dxrd-image-recycle-bin"><!-- ko template: \'dxrd-svg-operations-recycle_bin\'--><!-- /ko --></div> </div> <!-- /ko --> <!-- ko template: { name: $parents[1].argumentTemplateName, data: { value: $data.value, path: $parents[1].path, treeListController: $parents[1].treeListController, disabled: $parents[1].disabled, visible: $parents[1].visible } } --> <!-- /ko --> </div> </div> <!-- /ko --> <!-- 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> </div> </div> <!-- /ko --> <!-- /ko --> </div>',
+    'dxcd-pointscollection': '<div class="dxrd-editor" data-bind="visible: visible"> <div data-bind="dxCollectionEditor: { values: value, displayName: displayName, level: level, info: info, addHandler: function() { return addPoint(_model()[\'owner\'] || _model()); } }"> <div data-bind="template: { name: \'dx-propertieseditor\', data: getProperties() }"></div> </div> </div>',
     'dxcd-maxSize': '<div data-bind="dxNumberBox: getDependencyOptions({ value:value, showSpinButtons:true, disabled:disabled }, \'min\', \'minSize\'), dxValidator: { validationRules: validationRules || [] }"></div>',
     'dxcd-minSize': '<div data-bind="dxNumberBox: getDependencyOptions({ value:value, showSpinButtons:true, disabled:disabled }, \'max\', \'maxSize\'), dxValidator: { validationRules: validationRules || [] }"></div>',
     'dxcd-group': '<div data-bind="dxSelectBox: { dataSource: $root.groups, value: value, acceptCustomValue:true, onFocusOut: function() { $root.applyGroup($data.value()); }, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true  }"></div>',
-    '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>',
+    'dxcd-color-undo': '<div data-bind="dxColorBox: { value: generateValue($root.undoEngine), onValueChanged: onValueChanged, editAlphaChannel: true, popupPosition: { collision: \'flipfit flipfit\' }, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) } }"></div>',
     '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>',
-    '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><!-- ko ifnot: collapsed --><!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'leftMarginSelectionTemplate\', holder: $data.bandsHolder, getData: function(item) { return { surface: item, width: $parent.width } } } }--><!-- /ko --><!-- /ko --><!-- /ko -->',
-    'dxrd-band-coordinate-grid': '<!-- ko with: surface --> <!-- ko ifnot: collapsed --> <div class="dxrd-band-content dxd-selectable" data-bind="styleunit: { \'height\': height(), top: absolutePosition.y }"> <!-- ko if: $data._context.drawWatermark() --> <!-- ko template: { name: \'dxrd-watermark\', data: { forLeftMargin: true, band: $data, reportSurface: $data._context } } --> <!-- /ko --> <!-- /ko --> <div class="dxrd-band-subbands-wrapper" data-bind="styleunit: { \'top\': heightWithoutSubBands } "> <!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'leftMarginTemplate\', holder: $data.bandsHolder, getData: function(item) { return { surface: item, width: $parent.width, \'snapGridSize\': $parent.snapGridSize }; } } }--> <!-- /ko --> </div> </div> <!-- /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> <!-- /ko --> <!-- /ko -->',
-    'dxrd-detail-report-band-coordinate-grid': '<!-- ko with: surface --> <!-- ko ifnot: collapsed --> <!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'leftMarginTemplate\', holder: $data.bandsHolder, getData: function(item) { return { surface: item, width: $parent.width, \'snapGridSize\': $parent.snapGridSize }; } } }--> <!-- /ko --> <!-- /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> <!-- /ko --> <!-- /ko -->',
-    'dxrd-sub-band-coordinate-grid': '<!-- ko with: surface --> <!-- ko ifnot: collapsed --> <div class="dxrd-band-content dxd-selectable" data-bind="styleunit: { \'height\': height(), top: $data.absolutePosition.y() - $data.parent.heightWithoutSubBands() - $data.parent.absolutePosition.y() }"> <!-- ko if: $data._context.drawWatermark() --> <!-- ko template: { name: \'dxrd-watermark\', data: { forLeftMargin: true, band: $data, reportSurface: $data._context } } --> <!-- /ko --> <!-- /ko --> </div> <!-- /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> <!-- /ko --> <!-- /ko -->',
-    '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"> <!-- ko if: contentSelectionTemplate --> <!-- ko template: contentSelectionTemplate--> <!-- /ko --> <!-- /ko --> </div> <!-- ko ifnot: collapsed --> <!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'selectionTemplate\', holder: $data.bandsHolder, getData: function(item) { return item; } } }--> <!-- /ko --> <!-- /ko -->',
+    '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 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 } } } }--><!-- /ko --><!-- /ko --><!-- /ko -->',
+    'dxrd-band-coordinate-grid': '<!-- ko with: surface --> <!-- ko ifnot: collapsed --> <div class="dxrd-band-content dxd-selectable" data-bind="styleunit: { \'height\': height(), top: absolutePosition.y }"> <!-- ko if: $data._context.drawWatermark() --> <!-- ko template: { name: \'dxrd-watermark\', data: { forLeftMargin: true, band: $data, reportSurface: $data._context } } --> <!-- /ko --> <!-- /ko --> <div class="dxrd-band-subbands-wrapper" data-bind="styleunit: { \'top\': heightWithoutSubBands } "> <!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'leftMarginTemplate\', holder: $data.bandsHolder, getData: function(item) { return { surface: item, width: $parent.width, \'snapGridSize\': $parent.snapGridSize }; } } }--> <!-- /ko --> </div> </div> <!-- /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 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 -->',
+    'dxrd-detail-report-band-coordinate-grid': '<!-- ko with: surface --> <!-- ko ifnot: collapsed --> <!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'leftMarginTemplate\', holder: $data.bandsHolder, getData: function(item) { return { surface: item, width: $parent.width, \'snapGridSize\': $parent.snapGridSize }; } } }--> <!-- /ko --> <!-- /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 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 -->',
+    'dxrd-sub-band-coordinate-grid': '<!-- ko with: surface --> <!-- ko ifnot: collapsed --> <div class="dxrd-band-content dxd-selectable" data-bind="styleunit: { \'height\': height(), top: $data.absolutePosition.y() - $data.parent.heightWithoutSubBands() - $data.parent.absolutePosition.y() }"> <!-- ko if: $data._context.drawWatermark() --> <!-- ko template: { name: \'dxrd-watermark\', data: { forLeftMargin: true, band: $data, reportSurface: $data._context } } --> <!-- /ko --> <!-- /ko --> </div> <!-- /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 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 -->',
+    'dxrd-band-selection': '<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 --> <!-- /ko --> </div> <!-- ko ifnot: collapsed --> <!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'selectionTemplate\', holder: $data.bandsHolder, getData: function(item) { return item; } } }--> <!-- /ko --> <!-- /ko -->',
     'dxrd-detailreportband-selection': '<!-- ko ifnot: collapsed --> <!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'selectionTemplate\', holder: $data.bandsHolder, getData: function(item) { return item; } } }--> <!-- /ko --> <!-- /ko -->',
     'dxrd-bandselection-content': '<!-- ko ifnot: collapsed --> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> <!-- /ko -->',
-    'dxrd-band-vruler': '<!-- ko with: surface --><div class="dxrd-band-marker-wrapper dxrd-position-absolute" data-bind="attr: { title: name }, styleunit: { \'width\': $data.markerWidth() + 20, \'top\': absolutePosition.y, \'height\': height }" > <!-- ko if: hasOwnRuler --> <div class="dxrd-band-vruler" data-bind="styleunit: { \'height\': rulerHeight, top: 0 }, resizable: { starting: function() { $root.resizeHandler.started = true; $root.resizeHandler.starting(); $root.selection.initialize($data); $root.selection.expectClick = false; }, stopped: function() { $data.stopResize(); $root.resizeHandler.stopped(); $root.resizeHandler.started = false; }, handles: \'s\', disabled: !canResize(), forceResize: resizeTheBand, zoom: $root.surface().zoom, minimumHeight: $data.heightFromControls && $data.heightFromControls() || 1 }"> <div data-bind="ruler: { \'zoom\': zoom, \'length\': height, \'units\': $parent.measureUnit, \'direction\': \'vertical\', flip: $root.dx[\'config\']()[\'rtlEnabled\'] }"></div> </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-content"> <div class="dxrd-width-1px dxrd-height-1px dxrd-margin-left-9px"></div> <div class="dxrd-band-marker-rotation"> <div class="dxrd-band-marker-rotation-text" data-bind="text: collapsed() ? \'\' : name"></div> </div> </div> </div> <!-- /ko --></div><!-- ko ifnot: collapsed --><!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'vrulerTemplate\', holder: $data.bandsHolder, getData: function(item) { return { surface: item, measureUnit: $parent.measureUnit }; } } }--><!-- /ko --><!-- /ko --><!-- /ko -->',
+    'dxrd-band-vruler': '<!-- ko with: surface --><div class="dxrd-band-marker-wrapper dxrd-position-absolute" data-bind="attr: { title: name }, styleunit: { \'width\': $data.markerWidth() + 20, \'top\': absolutePosition.y, \'height\': height }" > <!-- ko if: hasOwnRuler --> <div class="dxrd-band-vruler" data-bind="styleunit: { \'height\': rulerHeight, top: 0 }, resizable: { starting: function() { $root.resizeHandler.started = true; $root.resizeHandler.starting(); $root.selection.initialize($data); $root.selection.expectClick = false; }, stopped: function() { $data.stopResize(); $root.resizeHandler.stopped(); $root.resizeHandler.started = false; }, handles: \'s\', disabled: !canResize(), forceResize: resizeTheBand, zoom: $root.surface().zoom, minimumHeight: $data.heightFromControls && $data.heightFromControls() || 1 }"> <div data-bind="ruler: { \'zoom\': zoom, \'length\': height, \'units\': $parent.measureUnit, \'direction\': \'vertical\', flip: $root.dx[\'config\']()[\'rtlEnabled\'] }"></div> </div> <!-- /ko --> <!-- ko if: showMarker --> <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.ContextMenusEnabled && $root.ContextMenusEnabled() ? { contextmenu: function(_, e) { markerClick($root.selection, false);  }} : null, 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"> <div class="dxrd-band-marker-rotation-text" data-bind="text: collapsed() ? \'\' : name"></div> </div> </div> </div> <!-- /ko --></div><!-- ko ifnot: collapsed --><!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'vrulerTemplate\', holder: $data.bandsHolder, getData: function(item) { return { surface: item, measureUnit: $parent.measureUnit }; } } }--><!-- /ko --><!-- /ko --><!-- /ko -->',
     'dxrd-band': '<!-- ko ifnot: collapsed --> <div class="dxrd-band-content dxd-selectable dxrd-position-absolute" data-bind="styleunit: { \'height\': heightWithoutSubBands, \'width\': _width(), \'top\': absolutePosition.y }" > <!-- ko if: $data._context.drawWatermark() --> <!-- ko template: { name: \'dxrd-watermark\', data: { forLeftMargin: false, band: $data, reportSurface: $data._context } } --> <!-- /ko --> <!-- /ko --> <div data-bind="styleunit: { \'left\': coordinateGridOptions.left }, coordinateGrid: coordinateGridOptions" class="dxrd-band-content-grid"></div> <!-- ko if: $data.multiColumn() && $data.multiColumn().haveColumns() --> <!-- ko with: $data.multiColumn --> <div data-bind="styleunit: { \'left\': columnSpacingLeft, \'width\': columnSpacing }" class="dxrd-band-content-spasing"></div> <div data-bind="styleunit: { \'left\': grayAreaLeft, \'width\': grayAreaWidth }" class="dxrd-band-content-greyarea"></div> <!-- /ko --> <!-- /ko --> <!-- ko foreach: controls --> <!-- ko template: { name: $data.template } --> <!-- /ko --> <!-- /ko --> </div> <!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'templateName\', holder: $data.bandsHolder, getData: function(item) { return item; } } }--> <!-- /ko --> <!-- /ko --> <!-- ko if: collapsed --> <!-- ko template: \'dxrd-band-collapsed\' --> <!-- /ko --> <!-- /ko --> <!-- ko if: $root.drawCrossbandContent() && $data._isHeaderBandTypeOrThemSubBands() --> <!-- ko with: $data.printAcrossBandsPlaceHolder --> <div class="dxrd-print-across-bands-placeholder" data-bind="visible: $data.isVisible, styleunit: { \'top\': $data.absolutePositionY, \'height\': $data.height }"> <!-- ko with: $data.band --> <div class="dxrd-band-content dxd-selectable dxrd-position-absolute" data-bind="styleunit: { \'height\': heightWithoutSubBands, \'width\': _width() }" > <!-- ko foreach: controls --> <!-- ko template: { name: $data.template } --> <!-- /ko --> <!-- /ko --> </div> <!-- /ko --> </div> <!-- /ko --> <!-- /ko -->',
     'dxrd-detailreportband': '<!-- ko ifnot: collapsed --> <!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'templateName\', holder: $data.bandsHolder, getData: function(item) { return item; } } }--> <!-- /ko --> <!-- /ko --> <!-- ko if: collapsed --> <!-- ko template: \'dxrd-band-collapsed\' --> <!-- /ko --> <!-- /ko -->',
     'dxrd-band-collapsed': '<!-- ko if: collapsed --> <div class="dxrd-band-collapsed dxd-selectable dxrd-position-absolute" data-bind="styleunit: { \'height\': height, \'line-height\': height, \'top\': absolutePosition.y, width: rect().width }" > <!-- ko if: $root.surface().rtl() --> <div class="dxrd-position-absolute" data-bind="text: (name() || \'\').toUpperCase(), styleunit: { \'right\': leftMargin }"></div> <!-- /ko --> <!-- ko if: !$root.surface().rtl() --> <div class="dxrd-position-absolute" data-bind="text: (name() || \'\').toUpperCase(), styleunit: { \'left\': leftMargin }"></div> <!-- /ko --> </div> <!-- /ko -->',
     'dxrd-band-holder': '<!-- ko foreach: holder.bands --> <!-- ko template: { name: $data[$parent.templateName], data: $parent.getData($data) } --> <!-- /ko --> <!-- /ko --> <!-- ko with: holder.verticalBandsContainer --> <!-- ko if: visible && !!$data[$parent.templateName] --> <!-- ko template: { name: $data[$parent.templateName], data: $parent.getData($data) } --> <!-- /ko --> <!-- /ko --> <!-- /ko -->',
-    '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 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> <div class="dxrd-height-calc-100-29px dxrd-width-100 dxrd-position-absolute"> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> </div> </div>',
+    '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 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> <div class="dxrd-height-calc-100-29px dxrd-width-100 dxrd-position-absolute"> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> </div> </div>',
     'dxrd-vertical-band': '<div class="dxrd-band-content dxrd-vertical-band" data-bind="styleunit: { \'width\': _width(), \'left\': absolutePosition.x() }"> <!-- ko if: $data._context.drawWatermark() --> <!-- ko template: { name: \'dxrd-watermark\', data: { forLeftMargin: false, band: $data, reportSurface: $data._context } } --> <!-- /ko --> <!-- /ko --> <div data-bind="coordinateGrid: coordinateGridOptions" class="dxrd-band-content-grid"></div> <!-- ko foreach: controls --> <!-- ko template: { name: $data.template } --> <!-- /ko --> <!-- /ko --> </div>',
     'dxrd-vertical-bands-container': '<!-- ko ifnot: collapsed --> <div class="dxrd-band-content dxrd-vertical-bands-container" data-bind="styleunit: { \'height\': height, left: leftOffset, \'width\': width, top: topOffset }, 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 || 1 }"> <div data-bind="styleunit: { \'width\': width }" class="dxrd-height-100 dxrd-overflow-hidden dxrd-position-absolute"> <div data-bind="style: { transform: \'translateX(-\' + $data.scrollOffset() + \'px)\' }"> <!-- ko foreach: verticalBands --> <!-- ko template: { name: templateName } --> <!-- /ko --> <!-- /ko --> <div data-bind="styleunit: { width: grayAreaWidth, height: height, left: !$root.surface().rtl() ? grayAreaLeft : 0  }" class="dxrd-band-content-greyarea"></div> </div> </div> </div> <!-- /ko --> <!-- ko if: collapsed --> <div class="dxrd-band-collapsed dxrd-position-absolute" data-bind="styleunit: { \'height\': height, \'line-height\': height, \'top\': topOffset, width: width }" > <div class="dxrd-position-absolute" data-bind="text: (name || \'\').toUpperCase(), styleunit: { \'right\': $root.surface().rtl() ? leftMargin : \'auto\', \'left\': !$root.surface().rtl() ? leftMargin: \'auto\' }"></div> </div> <!-- /ko -->',
     'dxrd-vertical-bands-container-selection': '<!-- ko ifnot: collapsed --> <div data-bind="styleunit: { \'width\': width, top: topOffset, left: leftOffset, height: height() }" class="dxrd-overflow-hidden dxrd-position-absolute"> <div data-bind="dxScrollView: $data.createScrollViewOptions($data, $root.selection)"> <!-- ko foreach: verticalBands --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> </div> </div> <!-- /ko -->',
@@ -53,62 +53,62 @@ SvgTemplatesEngine.addTemplates({
     'dxrd-charactercomb-content': '<!-- ko foreach: cells --><div class="dxrd-charactercomb-cell dxrd-position-absolute"  data-bind="styleunit: { width: size.width, height: size.height, top: top, left: left }"> <div class="dxrd-position-absolute"> <div data-bind="style: $parent.css, text: text, styleunit: { lineHeight: size.height(), width: size.width, height: size.height }" class="dxrd-position-absolute dxrd-letter-spacing-1px"></div> <div data-bind="style: $parent.borderCss, styleunit: { width: size.width, height: size.height }" class="dxrd-position-absolute dxrd-box-sizing-border-box"></div> </div></div><!-- /ko -->',
     'dxrd-charactercomb': '<div class="dxrd-control dxd-selectable" data-bind="styleunit: position, css: adorntemplate"> <div class="dxrd-control-content-main dxrd-border-1px-solid-silver dxrd-left-0 dxrd-top-0"  data-bind="styleunit: { lineHeight: rect().height, height: rect().height, width: rect().width }"> <div class="dxrd-position-relative dxrd-overflow-hidden dxrd-margin-top--1px dxrd-margin-left--1px" data-bind="zoom: _context.zoom, template: contenttemplate, styleunit: { height: rect().height / _context.zoom(), width: rect().width / _context.zoom() }"> </div> </div></div>',
     'dxrd-chart-designer-popup': '<div data-bind="dxPopup: { showTitle: true, width: \'95%\', height: \'95%\', wrapperAttr: { class: \'dxrd-chartdesigner-popup\' }, title: $root.getLocalization(\'Chart Designer\', \'ChartDesignerStringIDs.ChartDesignerWindowTitle\'), visible: visible, toolbarItems: buttons, showCloseButton: true, container: container($element), position: { of: container($element) }}"> <div class="dxrd-chartdesigner-popup-content"> <div class="dxrd-width-100 dxrd-height-100" data-bind="visible: visible, dxChartDesigner: options"></div> </div></div>',
-    '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="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>',
+    'dxrd-chart-selection': '<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 dxrd-context-menu-container" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? \'visible\' : \'hidden\'}"></div>',
     'dxrd-checkbox-content': '<div data-bind="style: { cssFloat: isGlyphAlignmentNear() ? \'left\': \'right\', width: checkStateWidthContainer() }, styleunit: { lineHeight: contentHeightWithoutZoom }" class="dxrd-text-align-center"> <div class="dxrd-checkbox-checkstate" data-bind="styleunit:{ width: checkStateWidth, height: checkStateHeight }, css: checkStateClass, template: {name: $data.checkStateStyleIcon, if: !!ko.unwrap($data.checkStateStyleIcon)}"> </div></div><div class="dxrd-display-inline-block dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-padding-left-3px" data-bind="styleunit: { width: textWidth, lineHeight: contentHeightWithoutZoom }, visible: visibleText, style: { cssFloat: isGlyphAlignmentNear() ? \'right\': \'left\' }"> <span class="dxrd-control-content dxrd-control-content-multiline" data-bind="controlDisplayName: $data, style: contentCss, cacheElement: { action: function(element) { $data.cacheElementContent(element); } }"></span></div>',
     'dxrd-control-content': '<div class="dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-width-100" data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }"> <div class="dxrd-control-content" data-bind="controlDisplayName: $data, style: contentCss, css: {\'dxrd-control-content-multiline\' : multiline }"></div></div>',
-    '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="dxd-border-accented dxrd-control-border-box"></div> <!-- ko if: $root.inlineTextEdit.visible() && selected() --> <!-- ko with: $root.inlineTextEdit--> <div class="inline-text-edit" data-bind="dxTextArea: { value: text, onKeyUp: keypressAction, valueChangeEvent: \'keyup\' }"></div> <!-- /ko --> <!-- /ko --> <!-- ko if: $data.controls--> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /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-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 --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> <!-- /ko --> </div></div>',
+    '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 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--> <div class="inline-text-edit" data-bind="dxTextArea: { value: text, onKeyUp: keypressAction, valueChangeEvent: \'keyup\' }"></div> <!-- /ko --> <!-- /ko --> <!-- ko if: $data.controls--> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> <!-- /ko --></div><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 --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> <!-- /ko --> </div></div>',
     'dxrd-control': '<div class="dxrd-control dxd-selectable" data-bind="styleunit: position, css: adorntemplate"> <div class="dxrd-control-content-main" data-bind="styleunit: { \'top\': contentSizes().top, \'left\': contentSizes().left, lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width }, style: css"> <div data-bind="zoom: _context.zoom, template: contenttemplate, styleunit: { \'height\': contentHeightWithoutZoom, \'width\': contentWidthWithoutZoom }"> </div> <!-- ko if: $data.controls --> <!-- ko foreach: controls --> <!-- ko template: { name: $data.template } --> <!-- /ko --> <!-- /ko --> <!-- /ko --> </div> <div data-bind="style: borderCss" class="dxrd-width-100 dxrd-height-100 dxrd-position-absolute dxrd-box-sizing-border-box"></div></div>',
     'dxrd-crossband-line': '<div class="dxrd-cross-band dxrd-control dxd-selectable" data-bind="css: {\'dxrd-uiselected\': selected }, styleunit: position"> <svg width="100%" height="100%"> <line data-bind="attr: { x1: \'50%\', x2: \'50%\', y1: 0, y2: \'100%\'} , style: lineCss" /> <!-- ko if: isIntersect --> <line class="dxrd-cross-band-intersect" data-bind="attr: { x1: \'50%\', x2: \'50%\', y1: 0, y2: \'100%\'}, style: lineWidthCss  " /> <!-- /ko --> </svg></div>',
     'dxrd-crossband': '<div class="dxrd-cross-band dxrd-control" data-bind="styleunit: position, css: {\'dxrd-intersect\': isIntersect, \'dxrd-locked\': locked, \'dxrd-uiselected\': selected }"> <div class="dxrd-control dxd-selectable dxrd-width-100 dxrd-height-5px dxrd-position-absolute dxrd-top-0"  data-bind="trackCursor: edgeUnderCursor"></div> <div class="dxrd-control dxd-selectable dxrd-width-5px dxrd-height-100 dxrd-position-absolute dxrd-left-0"  data-bind="trackCursor: edgeUnderCursor"></div> <div class="dxrd-control dxd-selectable dxrd-width-5px dxrd-height-100 dxrd-position-absolute dxrd-right-0"  data-bind="trackCursor: edgeUnderCursor"></div> <div class="dxrd-control dxd-selectable dxrd-width-100 dxrd-height-5px dxrd-position-absolute dxrd-bottom-0"  data-bind="trackCursor: edgeUnderCursor"></div> <svg width="100%" height="100%"> <line data-bind="attr: { x1: borderWidth()/2, x2: borderWidth()/2, y1: 0, y2: \'100%\' }, style: rightCss" /> <line data-bind="attr: { x1: 0, x2: \'100%\', y1: borderWidth()/2, y2: borderWidth()/2 }, style: topCss" /> <line data-bind="attr: { x1: rect().width-borderWidth()/2, x2: rect().width-borderWidth()/2, y1: 0, y2: \'100%\' }, style: leftCss" /> <line data-bind="attr: { x1: 0, x2: \'100%\', y1: rect().height-borderWidth()/2, y2: rect().height-borderWidth()/2 }, style: bottomCss" /> </svg></div>',
-    '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"> <!-- ko template: \'dxrd-crosstab-cell-selection\' --> <!-- /ko --> <div class="dxd-border-accented dxrd-control-border-box"></div> <!-- ko if: $root.inlineTextEdit.visible() && selected() --> <!-- ko with: $root.inlineTextEdit--> <div class="inline-text-edit" data-bind="dxTextArea: { value: text, onKeyUp: keypressAction, valueChangeEvent: \'keyup\' }"></div> <!-- /ko --> <!-- /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(); } }"> <!-- 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}"> <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>',
+    '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 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> <!-- ko if: $root.inlineTextEdit.visible() && selected() --> <!-- ko with: $root.inlineTextEdit--> <div class="inline-text-edit" data-bind="dxTextArea: { value: text, onKeyUp: keypressAction, valueChangeEvent: \'keyup\' }"></div> <!-- /ko --> <!-- /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 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}"> <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>',
     'dxrd-crosstab-cell-selection': '<!-- ko if: _control._rowIndex() === 0 --> <div class="dxrd-table-column-selection dxrd-table-column-selection-top" data-bind="click: function(_, e) { !$root.selection.disabled() && selectLine($root.selection, e); e.stopPropagation(); }, visible: !$root.dx._static.DragDropHandler.started(), styleunit: { \'width\': position.width }"></div> <!-- /ko --> <!-- ko if: _control._columnIndex() === 0 --> <div class="dxrd-table-row-selection dxrd-table-row-selection-left" data-bind="click: function(_, e) { !$root.selection.disabled() && selectLine($root.selection, e, true); e.stopPropagation(); }, visible: !$root.dx._static.DragDropHandler.started()"></div> <!-- /ko --> <!-- ko if: _control.parent._rowDefinitions().length - 1 ===  _control._rowIndex() --> <div class="dxrd-table-column-selection dxrd-table-column-selection-bottom" data-bind="click: function(_, e) { !$root.selection.disabled() && selectLine($root.selection, e); e.stopPropagation(); },visible: !$root.dx._static.DragDropHandler.started(), styleunit: { \'width\': position.width }"></div> <!-- /ko --> <!-- ko if: _control.parent._columnDefinitions().length - 1 ===  _control._columnIndex() --> <div class="dxrd-table-row-selection dxrd-table-row-selection-right" data-bind="click: function(_, e) { !$root.selection.disabled() && selectLine($root.selection, e, true); e.stopPropagation(); }, visible: !$root.dx._static.DragDropHandler.started()"></div> <!-- /ko -->',
     'dxrd-crosstab-control-content': '<div class="dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-width-100" data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }"> <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>',
-    '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="dxd-border-accented dxrd-control-border-box"></div> <!-- ko if: $root.inlineTextEdit.visible() && selected() --> <!-- ko with: $root.inlineTextEdit--> <div class="inline-text-edit" data-bind="dxTextArea: { value: text, onKeyUp: keypressAction, valueChangeEvent: \'keyup\' }"></div> <!-- /ko --> <!-- /ko --> <!-- ko if: $data.controls--> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> <!-- /ko --></div><div class="dxrd-crosstab dxrd-control" 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 --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> <!-- /ko --> </div></div>',
+    '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 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--> <div class="inline-text-edit" data-bind="dxTextArea: { value: text, onKeyUp: keypressAction, valueChangeEvent: \'keyup\' }"></div> <!-- /ko --> <!-- /ko --> <!-- ko if: $data.controls--> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> <!-- /ko --></div><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 --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> <!-- /ko --> </div></div>',
     'dxrd-line-content': '<svg class="dxrd-position-absolute dxrd-left-0 dxrd-width-100 dxrd-height-100"> <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>',
-    '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="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>',
+    'dxrd-pagebreak-selection': '<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 dxrd-context-menu-container" data-bind="visible: !isSelected(), trackCursor: underCursor, styleunit: { \'width\': position.width(), \'height\': 3, \'top\': position.top() - 1, left: position.left() }"></div>',
     'dxrd-pagebreak': '<div class="dxrd-control dxd-selectable dxrd-border-none dxrd-background-none"  data-bind="styleunit: position"> <div data-bind="zoom: _context.zoom, template: contenttemplate, styleunit: { \'lineHeight\': lineHeight, \'height\': lineHeight, \'width\': position.width() / _context.zoom() }"> </div></div>',
     'dxrd-pdfcontent-control-content': '<div class="dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-width-100" data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }"> <div class="dxrd-control-content" data-bind="style: contentCss, styleunit: { lineHeight: contentHeightWithoutZoom, height: contentHeightWithoutZoom, width: contentWidthWithoutZoom }"> <div data-bind="css: controlTypeClass, template: controlTypeIconTemplate" class="dxrd-position-absolute dxrd-width-24px dxrd-height-24px dxrd-right-5px dxrd-top-5px"> </div> <!-- ko if: generateOwnPages() --> <div class="dxrd-text-nowrap-ellipsis" data-bind="text: getControlModel().textContent"></div> <!-- /ko --> </div></div>',
-    '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="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-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>',
+    'dxrd-pdfcontent-selection': '<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 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>',
     'dxrd-pdfsignature-content': '<div class="dxrd-pdf-signature-skeleton" data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }, visible: $data.showSkeleton"> <div class="dxrd-control-content" data-bind="controlDisplayName: $data, style: contentCss"> </div></div><div data-bind="visible: !$data.showSkeleton()"> <div data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }, visible: $data.visibleImage" class="dxrd-text-align-center"> <div class="dxrd-pdf-signature-image" data-bind="template: \'dxrd-svg-todo-pdfsignature\', css: {\'dxrd-pdf-signature-image-fill-container\' : !$data.visibleText()}"> </div> </div> <div class="dxrd-pdf-signature-info-certificate-name" data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }, visible: !$data.visibleImage() && !$data.hideImage(), css: {\'dxrd-pdf-signature-info-certificate-name-fill-container\': !$data.visibleText() }"> <div class="dxrd-control-content" data-bind="text: $data.certificateName, style: contentCss, css: { \'dxrd-control-content-multiline\' : multiline }"></div> </div> <div class="dxrd-pdf-signature-info" data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }, visible: visibleText, css: {\'dxrd-pdf-signature-info-fill-container\': $data.hideImage }"> <div class="dxrd-control-content" data-bind="controlDisplayName: $data, style: contentCss, css: { \'dxrd-control-content-multiline\' : multiline }"></div> </div></div>',
-    '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="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-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>',
+    'dxrd-picturebox-selection': '<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 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>',
     'dxrd-pivotgrid-field-selection': '<div class="dxrd-pivot-field" data-bind="styleunit: { \'width\': Math.max(positionWidthWithoutZoom(), minWidth()), \'height\': position.height() / _context.zoom() }, trackCursor: underCursor"></div>',
     'dxrd-pivotgrid-field': '<div class="dxrd-pivot-field" data-bind="css: {\'dxrd-pivot-field-selected\': selected }, zoom: 1/_context.zoom(), styleunit: { \'width\': Math.max(position.width(), minWidth() * _context.zoom()), \'height\': position.height }"> <div class="dxrd-pivot-field-content" data-bind="text: displayName, zoom: _context.zoom"></div></div>',
     'dxrd-pivotGridFields': '<div class="dxrd-editor" data-bind="visible: visible"> <div data-bind="dxCollectionEditor: { values: value, addHandler: $root.dx._static.PivotGridFieldViewModel.createNew(_model), displayName: $root.getLocalization(displayName), level: level, info: info }"> </div> </div>',
     'dxrd-pivot-sortBySummaryInfo-conditions': '<div class="dx-editor" data-bind="visible: visible"> <div data-bind="dxCollectionEditor: { values: value, displayName: displayName, level: level, info: info, addHandler: function(){ return $root.dx._static.SortBySummaryInfoCondition.createNew($parents[1].value()) } }"> </div> </div>',
     'dxrd-pivotgrid-content': '<div class="dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-width-100 dxrd-height-100" data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }"> <div class="dxrd-control-content dxrd-width-100 dxrd-height-100" data-bind="style: contentCss" > <div class="dxrd-pivot-content" data-bind="css: { \'dxrd-pivot-content-rtl\': getControlModel().rtl() }"> <div class="dxrd-pivot-filter-area"> <!-- ko if: filterFields().length !== 0 --> <div class="dxrd-pivot-fields-wrapper"> <!-- ko foreach: filterFields --> <div class="dxrd-pivot-field-wrapper" data-bind="styleunit: { \'width\': positionWidthWithoutZoom  }"> <!-- ko template: { name: $data.template } --> <!-- /ko --> </div> <!-- /ko --> </div> <!-- /ko --> <!-- ko if: filterFields().length === 0 --> <div class="dxrd-pivot-text-wrapper"> <div class="dxrd-pivot-text" data-bind="text: $root.getLocalization(\'Add Filter Fields Here\', \'ASPxReportsStringId.ReportDesigner_Pivot_AddFilterFields\')"></div> </div> <!-- /ko --> </div> <div class="dxrd-pivot-grid-area"> <div class="dxrd-pivot-grid-area-left"> <div class="dxrd-pivot-rows-area"> <div class="dxrd-pivot-rows-header" data-bind="styleunit: { width: totalsRowFieldWidth, height: rowHeaderHeight }"> <!-- ko if: rowFields().length !== 0 --> <div class="dxrd-pivot-fields-wrapper"> <!-- ko foreach: rowFields --> <div class="dxrd-pivot-field-wrapper" data-bind="styleunit: { \'width\': positionWidthWithoutZoom }"> <!-- ko template: { name: $data.template } --> <!-- /ko --> </div> <!-- /ko --> </div> <!-- /ko --> <!-- ko if: rowFields().length === 0 --> <div class="dxrd-pivot-text-wrapper"> <div class="dxrd-pivot-text" data-bind="text: $root.getLocalization(\'Add Row Fields Here\', \'ASPxReportsStringId.ReportDesigner_Pivot_AddRowFields\')"></div> </div> <!-- /ko --> </div> <div class="dxrd-pivot-total" data-bind="text: $root.getLocalization(\'Grand Total\', \'PivotGridStringId.GrandTotal\')"></div> </div> </div> <div class="dxrd-pivot-grid-area-right"> <div class="dxrd-pivot-columns-header"> <!-- ko if: columnFields().length !== 0 --> <div class="dxrd-pivot-fields-wrapper"> <!-- ko foreach: columnFields --> <div class="dxrd-pivot-field-wrapper" data-bind="styleunit: { \'width\': positionWidthWithoutZoom  }"> <!-- ko template: { name: $data.template } --> <!-- /ko --> </div> <!-- /ko --> </div> <!-- /ko --> <!-- ko if: columnFields().length === 0 --> <div class="dxrd-pivot-text-wrapper"> <div class="dxrd-pivot-text" data-bind="text: $root.getLocalization(\'Add Column Fields Here\', \'ASPxReportsStringId.ReportDesigner_Pivot_AddColumnFields\')"></div> </div> <!-- /ko --> </div> <div class="dxrd-pivot-data-header" data-bind="styleunit: { width: totalsDataFieldWidth }"> <div class="dxrd-pivot-total-wrapper"> <div class="dxrd-pivot-total" data-bind="styleunit: { height: totalsHeight }, text: $root.getLocalization(\'Grand Total\', \'PivotGridStringId.GrandTotal\')"></div> </div> <div class="dxrd-pivot-data-area"> <!-- ko if: dataFields().length !== 0 --> <!-- ko foreach: dataFields --> <div class="dxrd-pivot-data-field" data-bind="styleunit: { \'width\': positionWidthWithoutZoom }"> <div class="dxrd-pivot-field-wrapper"> <!-- ko template: { name: $data.template } --> <!-- /ko --> </div> <div class="dxrd-pivot-field-empty"></div> </div> <!-- /ko --> <!-- /ko --> <!-- ko if: dataFields().length === 0 --> <div class="dxrd-pivot-field-empty"> <div class="dxrd-pivot-text" data-bind="text: $root.getLocalization(\'Add Data Items Here\', \'ASPxReportsStringId.ReportDesigner_Pivot_AddDataItems\')"></div> </div> <!-- /ko --> </div> </div> </div> </div> </div> </div></div>',
     'dxrd-pivotgrid-selection-context': '<div class="dxrd-control-content dxrd-width-100 dxrd-height-100 dxrd-line-height-normal dxrd-overflow-hidden" > <div class="dxrd-pivot-content dxrd-width-100 dxrd-height-100 dxrd-overflow-hidden"  data-bind="zoom: _context.zoom(), css: { \'dxrd-pivot-content-rtl\': getControlModel().rtl() }"> <div class="dxrd-pivot-filter-area"> <!-- ko if: filterFields().length !== 0 --> <div class="dxrd-pivot-fields-wrapper"> <!-- ko foreach: filterFields --> <div class="dxrd-pivot-field-wrapper" data-bind="styleunit: { \'width\': positionWidthWithoutZoom  }"> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> </div> <!-- /ko --> </div> <!-- /ko --> <!-- ko if: filterFields().length === 0 --> <div class="dxrd-pivot-text-wrapper"> <div class="dxrd-pivot-text" data-bind="text: $root.getLocalization(\'Add Filter Fields Here\', \'ASPxReportsStringId.ReportDesigner_Pivot_AddFilterFields\')"></div> </div> <!-- /ko --> </div> <div class="dxrd-pivot-grid-area"> <div class="dxrd-pivot-grid-area-left"> <div class="dxrd-pivot-rows-area"> <div class="dxrd-pivot-rows-header" data-bind="styleunit: { width: totalsRowFieldWidth, height: rowHeaderHeight }"> <!-- ko if: rowFields().length !== 0 --> <div class="dxrd-pivot-fields-wrapper"> <!-- ko foreach: rowFields --> <div class="dxrd-pivot-field-wrapper" data-bind="styleunit: { \'width\': positionWidthWithoutZoom }"> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> </div> <!-- /ko --> </div> <!-- /ko --> <!-- ko if: rowFields().length === 0 --> <div class="dxrd-pivot-text-wrapper"> <div class="dxrd-pivot-text" data-bind="text: $root.getLocalization(\'Add Row Fields Here\', \'ASPxReportsStringId.ReportDesigner_Pivot_AddRowFields\')"></div> </div> <!-- /ko --> </div> <div class="dxrd-pivot-total" data-bind="text: $root.getLocalization(\'Grand Total\', \'PivotGridStringId.GrandTotal\')"></div> </div> </div> <div class="dxrd-pivot-grid-area-right"> <div class="dxrd-pivot-columns-header"> <!-- ko if: columnFields().length !== 0 --> <div class="dxrd-pivot-fields-wrapper"> <!-- ko foreach: columnFields --> <div class="dxrd-pivot-field-wrapper" data-bind="styleunit: { \'width\': positionWidthWithoutZoom  }"> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> </div> <!-- /ko --> </div> <!-- /ko --> <!-- ko if: columnFields().length === 0 --> <div class="dxrd-pivot-text-wrapper"> <div class="dxrd-pivot-text" data-bind="text: $root.getLocalization(\'Add Column Fields Here\', \'ASPxReportsStringId.ReportDesigner_Pivot_AddColumnFields\')"></div> </div> <!-- /ko --> </div> <div class="dxrd-pivot-data-header" data-bind="styleunit: { width: totalsDataFieldWidth }"> <div class="dxrd-pivot-total-wrapper"> <div class="dxrd-pivot-total" data-bind="styleunit: { height: totalsHeight }, text: $root.getLocalization(\'Grand Total\', \'PivotGridStringId.GrandTotal\')"></div> </div> <div class="dxrd-pivot-data-area"> <!-- ko if: dataFields().length !== 0 --> <!-- ko foreach: dataFields --> <div class="dxrd-pivot-data-field" data-bind="styleunit: { \'width\': positionWidthWithoutZoom }"> <div class="dxrd-pivot-field-wrapper"> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> </div> <div class="dxrd-pivot-field-empty"></div> </div> <!-- /ko --> <!-- /ko --> <!-- ko if: dataFields().length === 0 --> <div class="dxrd-pivot-field-empty"> <div class="dxrd-pivot-text" data-bind="text: $root.getLocalization(\'Add Data Items Here\', \'ASPxReportsStringId.ReportDesigner_Pivot_AddDataItems\')"></div> </div> <!-- /ko --> </div> </div> </div> </div> </div> </div>',
-    '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"> <!-- 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="dxd-border-accented dxrd-control-border-box"></div> <!-- ko template: \'dxrd-pivotgrid-selection-context\' --> <!-- /ko --> </div>',
-    '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-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"> <div class="dxrd-hruler" data-bind="styleunit: { left: leftMarginOffset,\'width\': margins.left }"> <div data-bind="ruler: { \'zoom\': zoom, \'length\': margins.left, \'units\': measureUnit, flip: ko.computed(function(){ return !rtl(); }) }"></div> <div class="dxrd-ruler-shadow" data-bind="styleunit: { left: 0, \'width\': margins.left }"></div> </div> <div class="dxrd-hruler" data-bind="styleunit: { \'width\': (pageWidth() - margins.left()), left: ghostContainerOffset }"> <div class="dxrd-margin-resizable" data-bind="styleunit: { \'width\': pageWidthWithoutMargins, \'left\': leftMarginResizableOffset }, resizable: leftMarginResizeOptions($root.undoEngine, $element)"></div> <div data-bind="ruler: { \'zoom\': zoom, \'length\': function() { return pageWidth() - margins.left();}, \'units\': measureUnit, flip: rtl }"></div> <div class="dxrd-ruler-shadow" data-bind="styleunit: { left: rightMarginOffset, width: margins.right }, resizable: rightMarginResizeOptions($root.undoEngine, $element)"></div> </div> <div class="dxrd-vscroller-space" data-bind="styleunit: { \'left\': pageWidth() }"></div> </div> <div class="dxrd-viewport" data-bind="styleunit: { minWidth: Math.min($data.pageWidth() + $root.verticalScrollOffset(), $root.surfaceSize()) - $data.maxMarkerWidth(), maxWidth: $data.pageWidth() + $root.verticalScrollOffset(), maxHeight: $data.effectiveHeight() + $root.horizontalScrollOffset() }, event: { scroll: function() { $root.onViewPortScroll($element) } }, style: { \'overflow-x\': $root.horizontalScrollOffset() ? \'auto\' : \'hidden\', \'overflow-y\': $root.verticalScrollOffset() ? \'auto\' : \'hidden\' }"> <div data-bind="selectable: { selection: $root.selection, zoom: zoom }"> <div class="dxrd-leftMargin" data-bind="styleunit: { left: leftMarginOffset, width: margins.left() }"> <div class="dxrd-selection dxrd-position-absolute" > <!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'leftMarginSelectionTemplate\', holder: $data.bandsHolder, getData: function(item) { return { surface: item, width: $data.margins.left }; } } }--> <!-- /ko --> </div> <div class="dxrd-flip"> <!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'leftMarginTemplate\', holder: $data.bandsHolder, getData: function(item) { return { surface: item, width: $data.margins.left, snapGridSize: $data.snapGridSize  }; } } }--> <!-- /ko --> </div> </div> <div class="dxrd-ghost-containment" data-bind="styleunit: { left: ghostContainerOffset }"> <div class="dxrd-ghost-container" data-bind="styleunit: { \'width\': pageWidthWithoutMargins, \'height\': minHeight }"> <div class="dxrd-bands-content dxrd-main"> <!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'templateName\', holder: $data.bandsHolder, getData: function(item) { return item; } } }--> <!-- /ko --> <!-- ko foreach: crossBandControls --> <!-- ko if: visible --> <!-- ko template: { name: template } --> <!-- /ko --> <!-- /ko --> <!-- /ko --> <svg class="dxrd-height-100 dxrd-position-absolute dxrd-top-0 dxrd-width-1px dxrd-z-index--1" data-bind="styleunit: { left: leftMarginOffset() }"> <line data-bind="attr: { x1: 0, x2: 0 }" y1="0" y2="100%" class="dxrd-stroke-rgb-128 dxrd-stroke-width-05px dxrd-stroke-dasharray-5px" /> </svg> <svg class="dxrd-rightMargin-border" data-bind="styleunit: { left: rtl() ? margins.right() : rightMarginOffset() }, visible: margins.right() > 0"> <line data-bind="attr: { x1: 0, x2: 0 }" y1="0" y2="100%" class="dxrd-stroke-rgb-220 dxrd-stroke-width-3px dxrd-stroke-dasharray-5px" /> </svg> <!-- ko template: { name: \'dxd-snap-lines-holder\', data: $root.snapHelper } --> <!-- /ko --> </div> <div class="dxrd-bands-content dxrd-selection" data-bind="styleunit: { \'width\': pageWidthWithoutMargins }"> <div class="dxrd-bands-content-offset"> <div class="dxrd-leftMargin-resizable" data-bind="styleunit: { \'width\': pageWidthWithoutMargins, \'left\': leftMarginResizableOffset }, resizableReportMargins: leftMarginResizeOptions($root.undoEngine, $element)"></div> <!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'selectionTemplate\', holder: $data.bandsHolder, getData: function(item) { return item; } } }--> <!-- /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> <!-- /ko --> <!-- /ko --> <div class="dxrd-rightMargin-resizable" data-bind="styleunit: { left: rightMarginResizableOffset }, resizableReportMargins: rightMarginResizeOptions($root.undoEngine, $element)"></div> </div> </div> </div> </div> </div> <!-- ko ifnot: focused --> <!-- ko template: { name: \'dxrd-smart-tags\', data: $root.smartTagModel, if: $root.smartTagModel.visible && $root.smartTagModel.smartTags().length > 0 } --> <!-- /ko --> <!-- /ko --> </div> <!-- ko if: focused --> <!-- ko template: { name: \'dxrd-smart-tags\', data: $root.smartTagModel, if: $root.smartTagModel.visible && $root.smartTagModel.smartTags().length > 0 } --> <!-- /ko --> <!-- /ko --> </div> </div> <div class="dxrd-bands-panel-wrapper" data-bind="styleunit: { width: maxMarkerWidth() }"> <div class="dxrd-bands-panel"> <div class="dxrd-band-headers"> <!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'vrulerTemplate\', holder: $data.bandsHolder, getData: function(item) { return { surface: item, measureUnit: $data.measureUnit }; } } }--> <!-- /ko --> </div> </div> <div class="dxrd-hscroller-space"></div> </div></div>',
+    'dxrd-pivotgrid-selection': '<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 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>',
+    '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(); }, event: $root.ContextMenusEnabled && $root.ContextMenusEnabled() ? { contextmenu: function(surface, e) { $data.surfaceContextMenuHandler && $data.surfaceContextMenuHandler($root.selection, surface, e); }} : null, keyDownActions: $root.actionLists.getViewModel()"> <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"> <div class="dxrd-hruler" data-bind="styleunit: { left: leftMarginOffset,\'width\': margins.left }"> <div data-bind="ruler: { \'zoom\': zoom, \'length\': margins.left, \'units\': measureUnit, flip: ko.computed(function(){ return !rtl(); }) }"></div> <div class="dxrd-ruler-shadow" data-bind="styleunit: { left: 0, \'width\': margins.left }"></div> </div> <div class="dxrd-hruler" data-bind="styleunit: { \'width\': (pageWidth() - margins.left()), left: ghostContainerOffset }"> <div class="dxrd-margin-resizable" data-bind="styleunit: { \'width\': pageWidthWithoutMargins, \'left\': leftMarginResizableOffset }, resizable: leftMarginResizeOptions($root.undoEngine, $element)"></div> <div data-bind="ruler: { \'zoom\': zoom, \'length\': function() { return pageWidth() - margins.left();}, \'units\': measureUnit, flip: rtl }"></div> <div class="dxrd-ruler-shadow" data-bind="styleunit: { left: rightMarginOffset, width: margins.right }, resizable: rightMarginResizeOptions($root.undoEngine, $element)"></div> </div> <div class="dxrd-vscroller-space" data-bind="styleunit: { \'left\': pageWidth() }"></div> </div> <div class="dxrd-viewport" data-bind="styleunit: { minWidth: Math.min($data.pageWidth() + $root.verticalScrollOffset(), $root.surfaceSize()) - $data.maxMarkerWidth(), maxWidth: $data.pageWidth() + $root.verticalScrollOffset(), maxHeight: $data.effectiveHeight() + $root.horizontalScrollOffset() }, event: { scroll: function() { $root.onViewPortScroll($element) } }, style: { \'overflow-x\': $root.horizontalScrollOffset() ? \'auto\' : \'hidden\', \'overflow-y\': $root.verticalScrollOffset() ? \'auto\' : \'hidden\' }"> <div data-bind="selectable: { selection: $root.selection, zoom: zoom }"> <div class="dxrd-leftMargin" data-bind="styleunit: { left: leftMarginOffset, width: margins.left() }"> <div class="dxrd-selection dxrd-position-absolute" > <!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'leftMarginSelectionTemplate\', holder: $data.bandsHolder, getData: function(item) { return { surface: item, width: $data.margins.left }; } } }--> <!-- /ko --> </div> <div class="dxrd-flip"> <!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'leftMarginTemplate\', holder: $data.bandsHolder, getData: function(item) { return { surface: item, width: $data.margins.left, snapGridSize: $data.snapGridSize  }; } } }--> <!-- /ko --> </div> </div> <div class="dxrd-ghost-containment" data-bind="styleunit: { left: ghostContainerOffset }"> <div class="dxrd-ghost-container" data-bind="styleunit: { \'width\': pageWidthWithoutMargins, \'height\': minHeight }"> <div class="dxrd-bands-content dxrd-main"> <!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'templateName\', holder: $data.bandsHolder, getData: function(item) { return item; } } }--> <!-- /ko --> <!-- ko foreach: crossBandControls --> <!-- ko if: visible --> <!-- ko template: { name: template } --> <!-- /ko --> <!-- /ko --> <!-- /ko --> <svg class="dxrd-height-100 dxrd-position-absolute dxrd-top-0 dxrd-width-1px dxrd-z-index--1" data-bind="styleunit: { left: leftMarginOffset() }"> <line data-bind="attr: { x1: 0, x2: 0 }" y1="0" y2="100%" class="dxrd-stroke-rgb-128 dxrd-stroke-width-05px dxrd-stroke-dasharray-5px" /> </svg> <svg class="dxrd-rightMargin-border" data-bind="styleunit: { left: rtl() ? margins.right() : rightMarginOffset() }, visible: margins.right() > 0"> <line data-bind="attr: { x1: 0, x2: 0 }" y1="0" y2="100%" class="dxrd-stroke-rgb-220 dxrd-stroke-width-3px dxrd-stroke-dasharray-5px" /> </svg> <!-- ko template: { name: \'dxd-snap-lines-holder\', data: $root.snapHelper } --> <!-- /ko --> </div> <div class="dxrd-bands-content dxrd-selection" data-bind="styleunit: { \'width\': pageWidthWithoutMargins }"> <div class="dxrd-bands-content-offset"> <div class="dxrd-leftMargin-resizable" data-bind="styleunit: { \'width\': pageWidthWithoutMargins, \'left\': leftMarginResizableOffset }, resizableReportMargins: leftMarginResizeOptions($root.undoEngine, $element)"></div> <!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'selectionTemplate\', holder: $data.bandsHolder, getData: function(item) { return item; } } }--> <!-- /ko --> <!-- ko foreach: crossBandControls --> <!-- ko if: visible --> <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 --> <div class="dxrd-rightMargin-resizable" data-bind="styleunit: { left: rightMarginResizableOffset }, resizableReportMargins: rightMarginResizeOptions($root.undoEngine, $element)"></div> </div> </div> </div> </div> </div> <!-- ko ifnot: focused --> <!-- ko template: { name: \'dxrd-smart-tags\', data: $root.smartTagModel, if: $root.smartTagModel.visible && $root.smartTagModel.smartTags().length > 0 } --> <!-- /ko --> <!-- /ko --> </div> <!-- ko if: focused --> <!-- ko template: { name: \'dxrd-smart-tags\', data: $root.smartTagModel, if: $root.smartTagModel.visible && $root.smartTagModel.smartTags().length > 0 } --> <!-- /ko --> <!-- /ko --> </div> </div> <div class="dxrd-bands-panel-wrapper" data-bind="styleunit: { width: maxMarkerWidth() }"> <div class="dxrd-bands-panel"> <div class="dxrd-band-headers"> <!-- ko template: { name: \'dxrd-band-holder\', data: { templateName: \'vrulerTemplate\', holder: $data.bandsHolder, getData: function(item) { return { surface: item, measureUnit: $data.measureUnit }; } } }--> <!-- /ko --> </div> </div> <div class="dxrd-hscroller-space"></div> </div></div>',
     'dxrd-richedit': '<div class="dxrd-control dxd-selectable" data-bind="styleunit: position, css: adorntemplate"> <div class="dxrd-control-content-main" data-bind="styleunit: { \'top\': contentSizes().top, \'left\': contentSizes().left, lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width }, style: css"> <div data-bind="zoom: _context.zoom, template: contenttemplate, styleunit: { height: contentHeightWithoutZoom, width: contentWidthWithoutZoom }" class="dxrd-position-absolute"> </div> </div> <div data-bind="style: borderCss" class="dxrd-width-100 dxrd-height-100 dxrd-position-absolute dxrd-box-sizing-border-box"></div></div>',
     'dxrd-server-rendered-control-content': '<!-- ko if: $data.imageSrc --><img data-bind="attr: { src: imageSrc }, styleunit: { \'height\': contentHeightWithoutZoom, \'width\': contentWidthWithoutZoom }" /><!-- /ko --><!-- ko if: $data.isLoading --><div class="dx-content-loading-panel"> <div data-bind="dxLoadIndicator: { visible: isLoading() }"></div></div><!-- /ko --><!-- ko if: $data.error --><p class="dxrd-internal-error" data-bind="text: error"></p><!-- /ko -->',
     'dxrd-shape': '<div class="dxrd-control dxd-selectable" data-bind="styleunit: position, css: adorntemplate"> <div class="dxrd-control-content-main" data-bind="styleunit: { \'top\': contentSizes().top, \'left\': contentSizes().left, lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width }, style: css"> <div data-bind="zoom: _context.zoom, template: contenttemplate, styleunit: { \'lineHeight\': contentHeightWithoutZoom }" class="dxrd-position-absolute"> </div> </div> <div data-bind="style: borderCss" class="dxrd-width-100 dxrd-height-100 dxrd-position-absolute dxrd-box-sizing-border-box"></div></div>',
-    '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="dxd-border-accented dxrd-control-border-box"></div></div><div class="dxrd-control" data-bind="visible: !isSelected(), styleunit: position, trackCursor: underCursor"></div>',
+    'dxrd-subreport-selection': '<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 dxrd-context-menu-container" data-bind="visible: !isSelected(), styleunit: position, trackCursor: underCursor"></div>',
     'dxrd-subreport': '<div class="dxrd-control dxd-selectable" data-bind="styleunit: position, css: adorntemplate"> <div data-bind="style: borderCss" class="dxrd-width-100 dxrd-height-100 dxrd-position-absolute dxrd-box-sizing-border-box"></div> <div class="dxrd-control-content" data-bind="text: displayText(), style: contentCss"></div></div>',
-    'dxrd-table-selection': '<div class="dxrd-table-control" 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 }"> <!-- ko foreach: cells --> <div class="dxrd-table-cell-control" data-bind="trackCursor: underCursor, styleunit: { \'left\': position.left, \'width\': position.width, \'height\': heightWithRowSpan  }, style:{ overflow: isSelected() ? \'visible\' : \'hidden\', \'z-index\': offsetZIndex() }"> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> </div> <!-- /ko --> </div> <!-- /ko --> <!-- /ko --></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="dxd-border-accented dxrd-control-border-box"></div> <!-- 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="styleunit: { \'top\': position.top, \'height\': position.height }"> <div class="dxrd-table-row-selection dxrd-table-row-selection-left" data-bind="trackCursor: underCursor, visible: !$root.dx._static.DragDropHandler.started()"></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() }"> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> </div> <!-- /ko --> <div class="dxrd-table-row-selection dxrd-table-row-selection-right dxrd-visibility-visible"  data-bind="trackCursor: underCursor, visible: !$root.dx._static.DragDropHandler.started()"></div> </div> <!-- /ko --> <!-- ko foreach: rows()[rows().length-1].cells --> <div class="dxrd-table-column-selection dxrd-table-column-selection-bottom" 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 --></div><!-- /ko --><div class="dxrd-table-control" 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="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="dxd-border-accented dxrd-control-border-box"></div> <!-- ko if: $root.inlineTextEdit.visible() && selected() --> <!-- ko with: $root.inlineTextEdit--> <div class="inline-text-edit" data-bind="dxTextArea: { value: text, onKeyUp: keypressAction, valueChangeEvent: \'keyup\' }"></div> <!-- /ko --> <!-- /ko --> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> </div> <div class="dxrd-table-cell-control" data-bind="trackCursor: underCursor, visible: !isSelected(), styleunit: { \'left\': position.left, \'width\': position.width, \'height\': heightWithRowSpan  }, style : { \'z-index\': offsetZIndex() }"> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> </div> <!-- /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-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() }"> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> </div> <!-- /ko --> <div class="dxrd-table-row-selection dxrd-table-row-selection-right" data-bind="visible: !$root.dx._static.DragDropHandler.started(),trackCursor: underCursor"></div> </div> <!-- /ko --> <!-- ko foreach: rows()[rows().length-1].cells --> <div class="dxrd-table-column-selection dxrd-table-column-selection-bottom" data-bind="visible: !$root.dx._static.DragDropHandler.started(),click: function(_, e) { !$root.selection.disabled() && selectColumn($root.selection); e.stopPropagation(); }, styleunit: { \'left\': position.left, \'width\': position.width }"></div> <!-- /ko --> <!-- /ko --></div>',
+    'dxrd-table-selection': '<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 }"> <!-- ko foreach: cells --> <div class="dxrd-table-cell-control" data-bind="trackCursor: underCursor, styleunit: { \'left\': position.left, \'width\': position.width, \'height\': heightWithRowSpan  }, style:{ overflow: isSelected() ? \'visible\' : \'hidden\', \'z-index\': offsetZIndex() }"> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> </div> <!-- /ko --> </div> <!-- /ko --> <!-- /ko --></div><!-- ko if: (selected() || focused()) --><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 --> <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="styleunit: { \'top\': position.top, \'height\': position.height }"> <div class="dxrd-table-row-selection dxrd-table-row-selection-left" data-bind="trackCursor: underCursor, visible: !$root.dx._static.DragDropHandler.started()"></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() }"> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> </div> <!-- /ko --> <div class="dxrd-table-row-selection dxrd-table-row-selection-right dxrd-visibility-visible"  data-bind="trackCursor: underCursor, visible: !$root.dx._static.DragDropHandler.started()"></div> </div> <!-- /ko --> <!-- ko foreach: rows()[rows().length-1].cells --> <div class="dxrd-table-column-selection dxrd-table-column-selection-bottom" 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 --></div><!-- /ko --><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 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 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--> <div class="inline-text-edit" data-bind="dxTextArea: { value: text, onKeyUp: keypressAction, valueChangeEvent: \'keyup\' }"></div> <!-- /ko --> <!-- /ko --> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> </div> <div class="dxrd-table-cell-control" data-bind="trackCursor: underCursor, visible: !isSelected(), styleunit: { \'left\': position.left, \'width\': position.width, \'height\': heightWithRowSpan  }, style : { \'z-index\': offsetZIndex() }"> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> </div> <!-- /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 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() }"> <!-- ko foreach: controls --> <!-- ko template: { name: $data.selectiontemplate } --> <!-- /ko --> <!-- /ko --> </div> <!-- /ko --> <div class="dxrd-table-row-selection dxrd-table-row-selection-right" data-bind="visible: !$root.dx._static.DragDropHandler.started(),trackCursor: underCursor"></div> </div> <!-- /ko --> <!-- ko foreach: rows()[rows().length-1].cells --> <div class="dxrd-table-column-selection dxrd-table-column-selection-bottom" data-bind="visible: !$root.dx._static.DragDropHandler.started(),click: function(_, e) { !$root.selection.disabled() && selectColumn($root.selection); e.stopPropagation(); }, styleunit: { \'left\': position.left, \'width\': position.width }"></div> <!-- /ko --> <!-- /ko --></div>',
     'dxrd-table': '<div class="dxrd-table-control dxrd-control dxd-selectable" data-bind="styleunit: position, trackCursor: underCursor, css: adorntemplate"> <div data-bind="style: css" class="dxrd-width-100 dxrd-height-100"> <!-- ko foreach: rows --> <div class="dxrd-table-row-control" data-bind="styleunit: { \'top\': position.top, \'height\': position.height}, style: css, css: adorntemplate"> <!-- ko foreach: cells --> <div class="dxrd-table-cell-control dxrd-control" data-bind="styleunit: { \'left\': position.left, \'width\': position.width, \'height\': heightWithRowSpan }, trackCursor: underCursor, css: adorntemplate"> <div data-bind="zoom: _context.zoom, template: contenttemplate, styleunit: { \'lineHeight\': position.lineHeight() / _context.zoom(), \'width\': contentWidthWithoutZoom, \'height\': contentHeightWithoutZoom }, style: css"> </div> <!-- ko foreach: controls --> <!-- ko template: { name: $data.template } --> <!-- /ko --> <!-- /ko --> </div> <!-- /ko --> </div> <!-- /ko --> </div></div>',
     'dxrd-table-of-contents': '<div class="dxrd-control dxd-selectable dxrd-control-table-of-content" data-bind="styleunit: position, trackCursor: underCursor, css: adorntemplate"> <div data-bind="style: css" class="dxrd-width-100 dxrd-height-100"> <!-- ko template: { name: levelTitle.template, data: levelTitle } --> <!-- /ko --> <div class="dxrd-control-table-of-content-levelsElements"> <!-- ko foreach: $data.levels() --> <!-- ko template: { name: $data.template } --> <!-- /ko --> <!-- /ko --> <!-- ko template: { name: levelDefault.template, data: levelDefault, isDefault: true } --> <!-- /ko --> </div> </div> </div>',
     'dxrd-table-of-contents-level': '<div class="dxrd-control dxrd-left-0 dxrd-width-100" data-bind="styleunit: { height: position.height, top: position.top, lineHeight: position.lineHeight}, css: adorntemplate" > <div class="dxrd-tocLevel-border" data-bind="styleunit: { \'height\': _context.zoom()}"></div> <!-- ko if: getControlModel().rtl() --> <div data-bind="style: borderCss, styleunit: { left: position.left, width: contentSizes().width + (contentSizes().left + contentSizes().right)} " class="dxrd-height-100 dxrd-position-absolute dxrd-box-sizing-border-box"></div> <!-- /ko --> <!-- ko if: !getControlModel().rtl() --> <div data-bind="style: borderCss, styleunit: { left: position.left} " class="dxrd-height-100 dxrd-right-0 dxrd-position-absolute dxrd-box-sizing-border-box"></div> <!-- /ko --> <div class="dxrd-control-content-main dxrd-overflow-hidden"  data-bind="styleunit: { \'top\': contentSizes().top, \'left\': contentSizes().left + position.left(), lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width}, style: css"> <div class="dxrd-tocLevel-zoomer" data-bind="zoom: _context.zoom, styleunit: { \'height\': contentHeightWithoutZoom, \'width\': contentWidthWithoutZoom }"> <div class="dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-width-100 dxrd-height-100" data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }"> <!-- ko if: getControlModel().isTitle --> <div class="dxrd-control-content dxrd-control-content-multiline" data-bind="controlDisplayName: $data, style: contentCss"></div> <!-- /ko --> <!-- ko ifnot: getControlModel().isTitle --> <div class="dxrd-control-content dxrd-width-100 dxrd-height-100 dxrd-line-height-inherit" data-bind="style: contentCss" > <div class="dxrd-control-content-level-text"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div class="dxrd-control-content-line-text"><span data-bind="text: $data.getControlModel().name"></span></div> </td> <td class="middle"> <table border="0" cellspacing="0" cellpadding="0" class="dxrd-table-layout-fixed dxrd-width-100"> <tr> <td data-bind="text: leaderSymbols" class="dxrd-word-wrap-break-word"></td> </tr> </table> </td> <td> <div class="dxrd-control-content-number">&nbsp;&nbsp;#&nbsp;&nbsp;</div> </td> </tr> </table> </div> </div> <!-- /ko --> </div> </div> </div> </div>',
-    '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="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)"> <!-- ko with: $root.inlineTextEdit--> <!-- ko if: visible --> <div class="inline-text-edit" data-bind="dxTextArea: { value: text, onKeyUp: keypressAction, valueChangeEvent: \'keyup\' }"></div> <!-- /ko --> <!-- /ko --> </div> <!-- /ko --> <!-- ko foreach: $data.levels() --> <div class="dxrd-control dxrd-control-line-ui-resizeble" data-bind="styleunit: { height: position.height, top: position.top, lineHeight: position.lineHeight }, resizable: resizable($root.resizeHandler, $element)" class="dxrd-left-0 dxrd-width-100"></div> <!-- /ko --> <!-- ko with: levelDefault --> <div class="dxrd-control" data-bind="styleunit: { height: position.height, top: position.top, lineHeight: position.lineHeight }, resizable: resizable($root.resizeHandler, $element)" class="dxrd-left-0 dxrd-width-100"></div> <!-- /ko --> </div> <div class="dxrd-control" data-bind="visible: !isSelected(), styleunit: position, trackCursor: underCursor"> </div>',
+    'dxrd-table-of-contents-selected': '<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)"> <!-- ko with: $root.inlineTextEdit--> <!-- ko if: visible --> <div class="inline-text-edit" data-bind="dxTextArea: { value: text, onKeyUp: keypressAction, valueChangeEvent: \'keyup\' }"></div> <!-- /ko --> <!-- /ko --> </div> <!-- /ko --> <!-- ko foreach: $data.levels() --> <div class="dxrd-control dxrd-control-line-ui-resizeble" data-bind="styleunit: { height: position.height, top: position.top, lineHeight: position.lineHeight }, resizable: resizable($root.resizeHandler, $element)" class="dxrd-left-0 dxrd-width-100"></div> <!-- /ko --> <!-- ko with: levelDefault --> <div class="dxrd-control" data-bind="styleunit: { height: position.height, top: position.top, lineHeight: position.lineHeight }, resizable: resizable($root.resizeHandler, $element)" class="dxrd-left-0 dxrd-width-100"></div> <!-- /ko --> </div> <div class="dxrd-control dxrd-context-menu-container" data-bind="visible: !isSelected(), styleunit: position, trackCursor: underCursor"> </div>',
     'dxrd-textcontrol-content': '<div class="dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-width-100" data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }"> <div class="dxrd-control-content" data-bind="controlDisplayName: $data, style: contentCss, css: {\'dxrd-control-content-multiline\' : multiline }, cacheElement: { action: function(element) { $data.cacheElementContent(element); } } "></div></div>',
     'dxrd-todocontrol': '<div class="dxrd-control dxd-selectable" data-bind="styleunit: position, trackCursor: underCursor, style: css, css: adorntemplate"> <div data-bind="style: borderCss" class="dxrd-control-border-box"></div> <div data-bind="css: controlTypeClass, template: controlTypeIconTemplate" class="dxrd-position-absolute dxrd-width-24px dxrd-height-24px dxrd-right-5px dxrd-top-5px"> </div> <span class="dxrd-control-content" data-bind="text: displayName, style: contentCss"></span></div>',
     'dxrd-unknown-control': '<div class="dxrd-control dxd-selectable" data-bind="styleunit: position, css: adorntemplate"> <div class="dxrd-control-content-main"> <div data-bind="zoom: _context.zoom, template: contenttemplate" class="dxrd-position-absolute"> </div> </div></div>',
     'dxrd-calculatedfield-content': '<div data-bind="with: propertyGrid"> <!-- ko foreach: getEditors() --> <!-- ko template: editorTemplate --> <!-- /ko --> <!-- /ko --></div>',
     'dxrd-datasource-item': '<div class="dx-fieldset"> <div data-bind="dxCollectionEditor: { values: ko.observable(tableInfoItems), displayName: $root.getLocalization(\'Filter Criteria\', \'ASPxReportsStringId.ReportDesigner_DataSource_FilterCriteriaTitle\'), hideButtons: true }"> <div class="dx-field dxd-back-primary"> <!-- ko with: value --> <div class="dx-field-label dxd-text-primary" data-bind="text: tableName"></div> <!-- ko if: $data.filterString() !== null --> <div class="dx-field-value dxrd-margin-right-5px"  data-bind="dxFilterEditor: { options: filterString, fieldListProvider: $root.dataBindingsProvider, getDisplayNameByPath: $root.getDisplayNameByPath }"></div> <!-- /ko --> <!-- /ko --> </div> </div></div>',
     'dxrd-coordinategrid': '<svg data-bind="style: { \'height\': height() + \'px\',  \'width\': width() + \'px\' }, attr: { viewBox: \'0 0 \' + width() + \' \' + height() }"> <g transform="translate(0, 0)"> <!-- ko foreach: verticalGridLines --> <line y1="0" y2="100%" class="minor-graduation" data-bind="attr: { x1: coordVal, x2: coordVal }, visible: visible"></line> <!-- /ko --> </g> <g transform="translate(0, 0)"> <!-- ko foreach: horizontalGridLines --> <line x1="0" x2="100%" class="minor-graduation" data-bind="attr: { y1: coordVal, y2: coordVal }, visible: visible"></line> <!-- /ko --> </g> <g transform="translate(0, 0)"> <!-- ko foreach: majorVerticalGridLines --> <line y1="0" y2="100%" class="major-graduation" data-bind="attr: { x1: coordVal, x2: coordVal }, visible: visible"></line> <!-- /ko --> </g> <g transform="translate(0, 0)"> <!-- ko foreach: majorHorizontalGridLines --> <line x1="0" x2="100%" class="major-graduation" data-bind="attr: { y1: coordVal, y2: coordVal }, visible: visible"></line> <!-- /ko --> </g></svg>',
-    'dxrd-expressions-tab': '<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> </div> <!-- ko with: model --> <!-- ko if: $root.controlsStore.visible() --> <div class="dx-property-grid-header"> <div class="dx-property-grid-header-content"> <div class="dx-property-grid-selected-component"> <div class="dxrd-properties-focused-item dxrd-margin-0"  data-bind="dxSelectBox: { dataSource: $root.controlsStore.dataSource, value: $root.editableObject, displayExpr: function(value) { var showValue = value || $root.editableObject(); return $root.dx._static.getControlFullName(showValue) }, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true }"> </div> </div> </div> </div> <!-- /ko --> <div class="dxrd-properties-grid dxd-border-primary dxrd-top-80px" data-bind="dxScrollView: { showScrollbar: \'onHover\', useNative: false, scrollByThumb: true }" > <!-- ko template: \'dx-propertieseditor\' --> <!-- /ko --> </div> <!-- /ko --> </div> </div>',
-    'dx-treelist-action-container-with-rename': '<div class="dx-treelist-action-container" data-bind="visible: !inRenameMode && (isSelected() || isHovered())"> <!-- ko template: actionsTemplate() --> <!-- /ko --> </div>',
-    '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  --> <!-- ko ifnot: treeListController.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> <!-- /ko --> </div>',
-    'dxrd-fieldlistwrapper': '<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> <!-- ko if: $data.allowAddDataSource --> <div id="btn-add-dataSource" data-bind="dxButtonWithTemplate: { onClick: startWizard, visible: visible(), text: addDataSourceButtonText, icon: \'dxrd-svg-operations-add\', iconClass: \'dx-image-add\' }, attr: { title: addDataSourceButtonText }"> </div> <!-- /ko --> </div> <div data-bind="treeListSearchPanel: {controllers:treeListOptions.treeListController}"></div> <div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: \'onHover\', scrollByContent: false, bounceEnabled: false, useNative: false, scrollByThumb: true }"> <div class="dx-editors"> <div id="tree" data-bind="treelist: treeListOptions" class="dxrd-width-100 dxrd-height-100"></div> </div> </div> <!-- /ko --></div>',
+    'dxrd-expressions-tab': '<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> </div> <!-- ko with: model --> <!-- ko if: $root.controlsStore.visible() --> <div class="dx-property-grid-header"> <div class="dx-property-grid-header-content"> <div class="dx-property-grid-selected-component"> <div class="dxrd-properties-focused-item dxrd-margin-0"  data-bind="dxSelectBox: { dataSource: $root.controlsStore.dataSource, value: $root.editableObject, displayExpr: function(value) { var showValue = value || $root.editableObject(); return $root.dx._static.getControlFullName(showValue) }, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true }"> </div> </div> </div> </div> <!-- /ko --> <div class="dxrd-properties-grid dxd-border-primary dxrd-top-80px" data-bind="dxScrollView: { showScrollbar: \'onHover\', useNative: false, scrollByThumb: true }" > <!-- ko template: \'dx-propertieseditor\' --> <!-- /ko --> </div> <!-- /ko --> </div> </div>',
+    'dx-treelist-action-container-with-rename': '<div class="dx-treelist-action-container" data-bind="visible: !inRenameMode && (isSelected || isHovered)"> <!-- ko template: actionsTemplate --> <!-- /ko --> </div>',
+    'dx-treelist-item-text-content-with-rename': '<div class="dx-treelist-text-wrapper"> <!-- ko if: !inRenameMode --> <!-- 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: 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: createRenameEditorOptions(), dxValidator: createValidatorOptions()"></div> <!-- /ko --> </div>',
+    'dxrd-fieldlistwrapper': '<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> <!-- ko if: $data.allowAddDataSource --> <div id="btn-add-dataSource" data-bind="dxButtonWithTemplate: { onClick: startWizard, visible: visible(), text: addDataSourceButtonText, icon: \'dxrd-svg-operations-add\', iconClass: \'dx-image-add\' }, attr: { title: addDataSourceButtonText }"> </div> <!-- /ko --> </div> <div data-bind="treeListSearchPanel: {controllers:treeListOptions.treeListController}"></div> <div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: \'onHover\', scrollByContent: false, bounceEnabled: false, useNative: false, scrollByThumb: true }"> <div class="dx-editors"> <div id="tree" data-bind="treelist: treeListOptions" class="dxrd-width-100 dxrd-height-100"></div> </div> </div> <!-- ko if: useContextMenu --> <div data-bind="dxContextMenu: fieldListContextMenu"></div> <!-- /ko --> <!-- /ko --></div>',
     'dxrd-localization-editor-item': '<div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label dx-accordion-header dxd-text-primary"> <label class="propertygrid-editor-displayName" data-bind="searchHighlighting: { text: displayName, textToSearch: $parent.textToSearch }, attr: { \'title\': displayName }"></label> </div> <div class="dx-field-value"> <!-- ko if: !ko.unwrap($data.multiline) --> <div class="dxrd-localization-panel-default" data-bind="dxTextBox: { value: defaultText, readOnly: !$data.isDefaultLanguage() }, css: { \'dxrd-localization-panel-textbox-full\': $data.isDefaultLanguage() }"></div> <div class="dxrd-localization-panel-current" data-bind="dxTextBox: { value: localizedText, onFocusIn: function(e, s) { $parent.onItemGotFocus(e) }, visible: !$data.isDefaultLanguage()}"></div> <!-- /ko --> <!-- ko if: ko.unwrap($data.multiline)--> <div class="dxrd-multi-area-container"> <div class="dxrd-localization-panel-default" data-bind="dxTextArea: { value: defaultText, readOnly: !$data.isDefaultLanguage(), autoResizeEnabled: true, minHeight: \'26px\', maxHeight: \'58px\' }, css: { \'dxrd-localization-panel-textbox-full\': $data.isDefaultLanguage() }"> </div> <!-- ko if: !$data.isDefaultLanguage() --> <div class="dxrd-localization-panel-current" data-bind="dxTextArea: { value: localizedText, onFocusIn: function(e, s) { $parent.onItemGotFocus(e) }, autoResizeEnabled: true, minHeight: \'26px\', maxHeight: \'58px\' }"> </div> <!-- /ko --> </div> <!-- /ko --> </div> </div> </div>',
     'dxrd-localization-editor': '<!-- ko if: $data && $data.isVisible() --> <div class="dxrd-localization-editor dx-editors" data-bind="css: { \'dx-rtl\': $root.rtl, \'dx-ltr\': !$root.rtl }, styleunit: { width: width }"> <div class="dxrd-left-localization-panel dx-editors dxd-text-primary dxd-back-primary" data-bind="resizable: getResizableOptions($element, 0, 500, $root.rtl ? \'Left\': \'Right\', \'Right\', width)"> <div class="dxrd-localization-panel-header dxd-back-primary2 dxd-border-secondary"> <div class="dxrd-localization-panel-title" data-bind="text: $root.getLocalization(\'Localization\', \'ASPxReportsStringId.ReportDesigner_LocalizationEditor_Title\')"></div> <div class="dx-fieldset"> <div class="dx-field"> <div class="dxrd-localization-language" data-bind="css: { \'dx-property-grid-search-uncollapsed \': isSearching() }"> <div class="dx-field-label dxd-text-primary" data-bind="text: $root.getLocalization(\'Language\', \'DevExpress.XtraReports.UI.XtraReport.XRLanguage\')"></div> <div class="dx-field-value" data-bind="css: { \'dx-field-value-shortened\': getRegisteredService() }"> <!-- ko template: { name: \'dxrd-localization-combobox\', data: { getValues: function() { return $data.availableCultures; }, value: language, disabled: false } } --> <!-- /ko --> </div> <!-- ko if: getRegisteredService() --> <div class="dxrd-localization-panel-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxd-back-primary2 dx-button-has-text" data-bind="dxButtonWithTemplate: { onClick: function() { $data.applyLocalization($data.getRegisteredService()) }, disabled: isDefaultLanguage(), icon: \'dxrd-svg-actions-apply_localization_service\', iconClass: \'apply-localization-service\' }, attr: { title: $root.getLocalization(\'Translate\', \'ASPxReportsStringId.ReportDesigner_LocalizationEditorTranslate\') }"></div> <!-- /ko --> <div class="dxrd-localization-panel-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxd-back-primary2 dx-button-has-text" data-bind="dxButtonWithTemplate: { onClick: clearLocalization, icon: \'dxrd-svg-actions-reset\', iconClass: \'reset-localization\', disabled: isDefaultLanguage() }, attr: { title: $root.getLocalization(\'Reset\', \'ASPxReportsStringId.ParametersPanel_Reset\') }"></div> </div> <!-- ko template: \'dx-propertygrid-searchbox\'--> <!-- /ko --> </div> </div> </div> <div class="dxrd-localization-panel-content"> <div class="dxrd-localization-panel-content-header"> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label"> <div class="dxrd-localization-language dxrd-localization-panel-default dxd-text-secondary" data-bind="text: $data.propertiesHeaderText()"></div> </div> <div class="dx-field-value"> <div class="dxrd-localization-language dxrd-localization-panel-default dxd-text-secondary" data-bind="text: $data.defaultLanguageText()"></div> <div class="dxrd-localization-language dxrd-localization-panel-current dxd-text-secondary" data-bind="text: $data.currentLanguageText(), visible: !$data.isDefaultLanguage()"></div> </div> </div> </div> </div> <div data-bind="dxList: { dataSource: localizationItems, selectionMode: \'single\', height: \'calc(100% - 59px)\', onSelectionChanged: onSelectionChanged, focusStateEnabled: false, activeStateEnabled: false, pageLoadMode: \'scrollBottom\', noDataText: $root.dx._static.noDataText(), encodeNoDataText: true }"> <!-- ko lazy: { template: \'dxrd-localization-editor-item\' } --> <!-- /ko --> </div> </div> <div data-bind="dxLoadPanel:{ visible: showLoadIndicator, shading: true, position: { of: getLoadPanelPosition($element) }, showIndicator: true, showPane: true, shadingColor: \'rgba(0,0,0,0.4)\'}"></div> </div> </div> <!-- /ko -->',
-    'dxrd-reportexplorerwrapper': '<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> <!-- ko with: model--> <div data-bind="treeListSearchPanel: {controllers:treeListController}"></div> <div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: \'onHover\', scrollByContent: false, bounceEnabled: false, useNative: false, scrollByThumb: true }, dxAutoScrolling: { active: $root.dx._static.DragDropHandler.started }"> <div id="tree" data-bind="treelist: { selectedPath: itemsProvider.selectedPath, itemsProvider: itemsProvider, treeListController: treeListController }" class="dxrd-width-100 dxrd-height-100"></div> </div> <!-- /ko --> </div>',
+    'dxrd-reportexplorerwrapper': '<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> <!-- ko with: model--> <div data-bind="treeListSearchPanel: {controllers:treeListController}"></div> <div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: \'onHover\', scrollByContent: false, bounceEnabled: false, useNative: false, scrollByThumb: true }, dxAutoScrolling: { active: $root.dx._static.DragDropHandler.started }"> <div id="tree" data-bind="treelist: { selectedPath: itemsProvider.selectedPath, itemsProvider: itemsProvider, treeListController: treeListController }" class="dxrd-width-100 dxrd-height-100"></div> </div> <!-- /ko --> </div>',
     'dxrd-ruler': '<svg data-bind="attr: { \'width\': width() + \'px\', \'height\': height() + \'px\' }"> <rect width="100%" height="100%" stroke-width="1px" stroke="gray" class="ruler"></rect> <!-- ko if: disable --> <rect data-bind="attr: { x: disable.start, width: disable.width }" height="100%" fill="grey" fill-opacity="0.5"></rect> <!-- /ko --> <!-- ko foreach: gridLines --> <line y1="80%" y2="100%" class="ruler-graduation" data-bind="attr: { x1: coordVal, x2: coordVal }"></line> <!-- /ko --> <!-- ko foreach: majorGridLines --> <line y1="70%" y2="100%" class="ruler-graduation" data-bind="attr: { x1: coordVal, x2: coordVal }"></line> <!-- /ko --> <g transform="translate(-3, 0)"> <!-- ko foreach: majorGridLines --> <text class="ruler-mark" data-bind="text: text, attr: {x: coordVal, y: 12 }"></text> <!-- /ko --> </g> <!--<text class="ruler-mark" transform="translate(4, 14)">0</text>--></svg>',
     'dxrd-rulervertical': '<svg data-bind="attr: { \'width\': width() + \'px\', \'height\': height() + \'px\' }"> <rect width="100%" height="100%" stroke-width="1px" stroke="gray" class="ruler"></rect> <!-- ko foreach: gridLines --> <line class="ruler-graduation" data-bind="attr: { x1: $parent.defaultGridLinesCoordinate().x1, x2: $parent.defaultGridLinesCoordinate().x2, y1: coordVal, y2: coordVal }"></line> <!-- /ko --> <!-- ko foreach: majorGridLines --> <line class="ruler-graduation" data-bind="attr: {x1: $parent.defaultGridLinesCoordinate().majorX1, x2: $parent.defaultGridLinesCoordinate().majorX2, y1: coordVal, y2: coordVal }"></line> <!-- /ko --> <g transform="translate(0, 3)"> <!-- ko foreach: majorGridLines --> <text class="ruler-mark" data-bind="text: text, attr: {x: $parent.defaultGridLinesCoordinate().x, y: coordVal }"></text> <!-- /ko --> </g> <!--<text class="ruler-mark" transform="translate(4, 14)">0</text>--></svg>',
-    'dxrd-watermark': '<!-- ko if: $data.reportSurface.watermark.shouldDrawWatermarkImage() --><div class="dxrd-band-content-watermark" data-bind="css: {\'dxrd-flip\': forLeftMargin }, dxWatermark: { band: band, reportSurface: reportSurface, forLeftMargin: forLeftMargin, image: reportSurface.watermark.imageSource().getDataUrl(), transparency: reportSurface.watermark.imageTransparency(), viewMode: reportSurface.watermark.imageViewMode(), align: reportSurface.watermark.imageAlign(), tiling: reportSurface.watermark.imageTiling() }"></div><!-- /ko --><!-- ko if: $data.reportSurface.watermark.text() --><div class="dxrd-band-content-watermark" data-bind="css: {\'dxrd-flip\': forLeftMargin }, dxWatermark: { band: band, reportSurface: reportSurface, forLeftMargin: forLeftMargin, image: reportSurface._watermarkTextRenderingResult(), transparency: reportSurface.watermark.textTransparency(), viewMode: \'Stretch\', align: \'MiddleCenter\', tiling: false }"></div><!-- /ko -->',
-    'dxrd-scripts-addon': '<!-- ko if: editorVisible --> <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> <div class="dxrd-scripts-wrapper"> <div class="dxrd-scripts-editor dxd-back-primary2" data-bind="dxAceEditor: { value: scriptsText, editorContainer: editorContainer, options: aceOptions }"> </div> </div> </div> <!-- /ko -->',
-    'dxrd-scripting-controlchooser': '<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>',
-    '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 class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: $data.hasSeparator"></div> </div>',
+    'dxrd-watermark': '<!-- ko if: $data.reportSurface.watermark && $data.reportSurface.watermark.shouldDrawWatermarkImage() --><div class="dxrd-band-content-watermark" data-bind="css: {\'dxrd-flip\': forLeftMargin }, dxWatermark: { band: band, reportSurface: reportSurface, forLeftMargin: forLeftMargin, image: reportSurface.watermark.imageSource().getDataUrl(), transparency: reportSurface.watermark.imageTransparency(), viewMode: reportSurface.watermark.imageViewMode(), align: reportSurface.watermark.imageAlign(), tiling: reportSurface.watermark.imageTiling() }"></div><!-- /ko --><!-- ko if: $data.reportSurface.watermark && $data.reportSurface.watermark.text() --><div class="dxrd-band-content-watermark" data-bind="css: {\'dxrd-flip\': forLeftMargin }, dxWatermark: { band: band, reportSurface: reportSurface, forLeftMargin: forLeftMargin, image: reportSurface._watermarkTextRenderingResult(), transparency: reportSurface.watermark.textTransparency(), viewMode: \'Stretch\', align: \'MiddleCenter\', tiling: false }"></div><!-- /ko -->',
+    'dxrd-scripts-addon': '<!-- ko if: editorVisible --> <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: getViewModel().toolbarItems }"></div> </div> <div class="dxrd-scripts-wrapper"> <div class="dxrd-scripts-editor dxd-back-primary2" data-bind="dxAceEditor: { value: scriptsText, editorContainer: editorContainer, options: aceOptions }"> </div> </div> </div> <!-- /ko -->',
+    'dxrd-scripting-selectboxaction': '<div class="dxrd-toolbar-item dxrd-toolbar-selectbox"> <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>',
     'dxrd-scripts': '<div class="dxrd-scripts" data-bind="visible: editorVisible, template: \'dxrd-scripts-addon\'"></div>',
+    '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>',
     '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"> <div class="dxrd-error-panel-header-title" data-bind="text: $data.panelTitle"></div> <div class="dxrd-error-panel-header-collapse dx-accordion-item-title"  data-bind="click: function() { $data.toggleCollapsed() }"></div> </div> <div class="dxrd-error-panel-content"> <div class="dxrd-error-grid" data-bind="dxDataGrid: _dataGridOptions"> <div data-options="dxTemplate: { name: \'dx-type-button\'}"> <div class="dxd-back-highlighted" data-bind="css: { \'dxd-state-active\': data.pressed }, dxButton: { text: data.text, onClick: data.onClick }"> </div> </div> <div data-options="dxTemplate: { name:\'dxrd-errorType-column\' }"> <div class="dxrd-errorType-column" data-bind="template: { name: $parent.getIconTemplateName($data.value) }, attr: { title: $data.value }"> </div> </div> <div data-options="dxTemplate: { name:\'dxrd-code-column\' }"> <!-- ko if: $data.data.showLink--> <a class="dx-link" target="_blank" rel="noreferer noopener" data-bind="text: $data.data.code, attr: { href: $data.data.link }"></a> <!-- /ko --> <!-- ko if: !$data.data.showLink--> <div data-bind="text: $data.value"></div> <!-- /ko --> </div> <div data-options="dxTemplate:{ name:\'dxrd-source-column\' }"> <a class="dx-link" href="javascript:void(0)" data-bind="text: value, click: function() { $parent.navigateToItem($data.value); }"></a> </div> <div data-options="dxTemplate: { name: \'detail\' }"> <div class="dxrd-error-panel-description" data-bind="text: data.description"></div> </div> <div data-options="dxTemplate: { name: \'dxrd-error-source-filter\' }"> <div data-bind="dxTagBox: { maxDisplayedTags: 0, showSelectionControls: true, valueExpr: \'value\', displayExpr: \'displayValue\', value: data.value, dataSource: data.dataSource, useItemTextAsTitle: true, dropDownOptions: { container: data.getContainer($element), minWidth: 200 }, }"></div> </div> <div data-options="dxTemplate: { name: \'dxrd-error-type-filter\' }"> <div data-bind="dxButtonGroup: $data.data"> <div data-options="dxTemplate: { name: \'dxrd-error-type-filter-item\' }"> <div class="dxrd-errorType-column" data-bind="template: { name: $parents[1].getIconTemplateName(icon) } "> </div> <div class="dxrd-errorType-text" data-bind="text: $data.text()"></div> </div> </div> </div> </div> </div></div><div data-bind="style: { display: !$data.collapsed() ? \'none\' : \'block\' }"> <div class="dxrd-error-panel-notification" data-bind="click: function() { $data.toggleCollapsed() }, template: { name: $data.getNotificationTemplate() }, attr: { title: $data.getTitleMessage() }"></div></div></div>',
     'dxrd-navigation-panel-template': '<!-- ko ifnot: $root.isLoading() && tabs().length === 1--> <!-- ko if: allowMDI --> <!-- ko if: tabs().length > 0 --> <!-- ko template: \'dxrd-navigation-panel-template-content\' --> <!-- /ko --> <!-- /ko --> <!-- /ko --> <!-- ko ifnot: allowMDI --> <!-- ko if: tabs().length > 1 --> <!-- ko template: \'dxrd-navigation-panel-template-content\' --> <!-- /ko --> <!-- /ko --> <!-- /ko --> <!-- /ko -->',
     'dxrd-navigation-panel-template-content': '<div class="dxrd-navigation-panel-wrapper" data-bind="style: { width: $root.surfaceSize() ? $root.surfaceSize() + \'px\' : \'auto\' }"> <div data-bind="dxTabs: { dataSource: tabs, selectedIndex: selectedIndex, showNavButtons: false }"> <div data-options="dxTemplate: { name: \'item\' }"> <!-- ko if: icon --> <div class="dx-icon" data-bind="css: icon, event: { mousedown: function(e) { $parent.removeTab(e); } }"></div> <!-- /ko --> <div class="dx-tab-title-wrapper"> <div class="dx-tab-title" data-bind="text: isDirty() ? displayName() + \'*\' : displayName(), title: displayName, style: { \'font-weight\': isDirty() ? \'bold\' : \'normal\' }"></div> </div> </div> </div> </div>',
@@ -118,22 +118,25 @@ SvgTemplatesEngine.addTemplates({
     'dxrd-parameters-content': '<div class="dxrd-parameters-content"> <div class="dxrd-parameters-content-list-wrapper"> <div class="dx-collectioneditor-actions-wrapper"> <div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: addParameter, icon: \'dxrd-svg-actions-add_parameter\', iconClass: \'dx-image-add-parameter\' }, attr: { title: getDisplayTextButton(\'addParameter\') }"></div> <div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: addGroup, icon: \'dxrd-svg-actions-add_group\', iconClass: \'dx-image-add-group\' }, attr: { title: getDisplayTextButton(\'addGroup\') }"></div> <div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: addSeparator, icon: \'dxrd-svg-actions-add_separator\', iconClass: \'dx-image-add-separator\' }, attr: { title: getDisplayTextButton(\'addSeparator\') }"></div> <div class="dx-collectioneditor-action-separator"></div> <div class="dx-collectioneditor-action dx-collectioneditor-action-right 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> <div class="dx-collectioneditor-action dx-collectioneditor-action-right 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> </div> <div class="dxrd-parameters-content-list dxd-border-primary" data-bind="dxScrollView: { showScrollbar: \'onHover\', scrollByContent: false, bounceEnabled: false, useNative: false, scrollByThumb: true, direction: \'both\' }, dxAutoScrolling: { active: $root.dx._static.DragDropHandler.started }"> <!-- ko if: $data.visible --> <div data-bind="treelist: fieldListModel" class="dxrd-width-100 dxrd-height-100"></div> <!-- /ko --> </div> </div> <!-- ko if: $data.contentVisible() && !$data.hasNoEditableProperties() --> <!-- ko template: \'dxrd-parameter-edit\' --> <!-- /ko --> <!-- /ko --> <!-- ko if: !$data.contentVisible() --> <div class="dxrd-parameter-edit-content dx-empty"> <div class="dxrd-parameters-content-empty" data-bind="text: contentEmptyAreaPlaceHolder"></div> </div> <!-- /ko --> <!-- ko if: $data.hasNoEditableProperties() --> <div class="dxrd-parameter-edit-content dx-empty"> <div class="dxrd-parameters-content-empty" data-bind="text: contentNoPropertiesPlaceHolder"></div> </div> <!-- /ko --> </div>',
     'dxrd-parameter-editing-collection-item': '<div class="dxrd-parameter-editing-collection-item" data-bind="text: $data.value().name"></div>',
     'dxrd-parameters-checkbox': '<!-- ko if: $data.visible --> <div class="dx-field dxrd-parameters-checkbox"> <div class="dx-field-value"> <div class="propertygrid-editor-checkbox" data-bind="dxCheckBox: getOptions({ value: value, text: displayName, disabled: disabled })"></div> </div> </div> <!-- /ko -->',
-    'dxrd-parameters-range-grid': '<div class="dx-editor dxrd-parameter-group-editor dxrd-parameters-group-offset" data-bind="visible: visible"> <div class="dx-group"> <div class="dx-editor-header"> <div class="dx-field"> <div class="dx-field-label dx-accordion-header dxd-text-primary" data-bind="styleunit: padding, css: { \'dx-accordion-empty\': templateName === \'dx-emptyHeader\' }"> <div class="dx-group-header-font" data-bind="text: displayName, attr: { \'title\': displayName }"></div> </div> <div class="dx-field-value" data-bind="css: { \'dxd-border-accented\': $data.isPropertyHighlighted }"> <div data-bind="service: { name: \'createEditorAddOn\' }"></div> </div> </div> </div> <div class="dx-editor-content dx-accordion-content"> <!-- ko if: (!$data.editorCreated || editorCreated) --> <!-- ko if: visible --> <div data-bind="template: { name: \'dx-propertieseditor\', data: viewmodel }"></div> <!-- /ko --> <!-- /ko --> </div> </div> </div>',
-    'dxrd-multivalue-editing': '<!-- ko if: ko.unwrap($data.value) && ko.unwrap($data.visible) --> <div class="dxrd-editor dxrd-parameter-group-editor"> <div class="dxrd-parameter-values-collectioneditor" data-bind="dxCollectionEditor: { values: value, info: info, level: level, displayName: $root.getLocalization(displayName) , showScroll: true, collapsed: false, alwaysShow: true }"> <div data-bind="dxPropertyGrid: { target: value, level: editor.level }"></div> </div> </div> <!-- /ko -->',
-    'dxrd-lookUpValues-editing': '<div class="dxrd-editor dxrd-parameter-group-editor dxrd-parameters-group-offset" data-bind="visible: visible"> <div class="dxrd-lookup-values-collectioneditor" data-bind="dxCollectionEditor: { values: value, addHandler: $root.dx._static.LookUpValue.createNew, level: level, displayName: $root.getLocalization(displayName), info: info, collapsed: false, showScroll: true, alwaysShow: true }"> <div data-bind="dxPropertyGrid: { target: $data.value, level: editor.level }"></div> </div> </div>',
+    'dxrd-parameters-range-grid': '<div class="dx-editor dxrd-parameter-group-editor dxrd-parameters-group-offset" data-bind="visible: visible"> <div class="dx-group"> <div class="dx-editor-header"> <div class="dx-field"> <div class="dx-field-label dx-accordion-header dxd-text-primary" data-bind="styleunit: padding, css: { \'dx-accordion-empty\': templateName === \'dx-emptyHeader\' }"> <div class="dx-group-header-font" data-bind="text: displayName, attr: { \'title\': displayName }"></div> </div> <div class="dx-field-value" data-bind="css: { \'dxd-border-accented\': $data.isPropertyHighlighted }"> <div data-bind="service: { name: \'createEditorAddOn\' }"></div> </div> </div> </div> <div class="dx-editor-content dx-accordion-content"> <!-- ko if: editorCreated && visible --> <div data-bind="template: { name: \'dx-propertieseditor\', data: viewmodel }"></div> <!-- /ko --> </div> </div> </div>',
+    'dxrd-multivalue-editing': '<!-- ko if: ko.unwrap($data.value) && ko.unwrap($data.visible) --> <div class="dxrd-editor dxrd-parameter-group-editor"> <div class="dxrd-parameter-values-collectioneditor" data-bind="dxCollectionEditor: { values: value, info: info, level: level, displayName: $root.getLocalization(displayName) , showScroll: true, collapsed: false, alwaysShow: true }"> <div data-bind="template: { name: \'dx-propertieseditor\', data: getProperties({ level: level }) }"></div> </div> </div> <!-- /ko -->',
+    'dxrd-lookUpValues-editing': '<div class="dxrd-editor dxrd-parameter-group-editor dxrd-parameters-group-offset" data-bind="visible: visible"> <div class="dxrd-lookup-values-collectioneditor" data-bind="dxCollectionEditor: { values: value, addHandler: $root.dx._static.LookUpValue.createNew, level: level, displayName: $root.getLocalization(displayName), info: info, collapsed: false, showScroll: true, alwaysShow: true }"> <div data-bind="template: { name: \'dx-propertieseditor\', data: getProperties({ level: level }) }"></div> </div> </div>',
     'dxrd-report-dialog-template': '<div data-bind="dxPopup: { showTitle: true, width: width, height: height, title: $root.getLocalization(title), visible: visible, disabled: disabled, toolbarItems: buttons, showCloseButton: true, container: container($element), wrapperAttr: { class: \'dxrd-reportdialog dx-editors dx-widget\' }, position: { of: container($element) }}"> <!-- ko template: { name: template, data: model } --> <!-- /ko --> <!-- ko if: disabled --> <div data-bind="dxLoadPanel: { visible:true, container: container($element), position: { of: container($element) } }"></div> <!-- /ko --> </div>',
     'dxrd-report-dialog-converter-template': '<div data-bind="dxPopup: { showTitle: true, minWidth: 530, height: popupOptions.height, width: \'auto\', title: popupOptions.title, visible: popupOptions.visible, toolbarItems: popupOptions.buttons, showCloseButton: true, wrapperAttr: { class: \'dxrd-reportdialog dxrd-reportdialog-converter dx-editors dx-widget\' }, container: popupOptions.container($element), position: { of: popupOptions.container($element) }}"> <div class="dxrd-reportdialog-converter-content"> <div class="dxrd-image-exlamation-icons" data-bind="template: \'dxrd-svg-wizard-warning\'"></div> <div class="dxrd-reportdialog-content-text"> <div class="dxrd-reportdialog-content-confirm-message" data-bind="text: popupOptions.confirmMessage"></div> <!-- ko if: popupOptions.infoMessage --> <div class="dxrd-reportdialog-content-info-message" data-bind="text: popupOptions.infoMessage"></div> <!-- /ko --> <!-- ko if: popupOptions.linkText --> <a class="dxrd-reportdialog-toggle-link dxd-hyperlink-color dxd-text-accented" data-bind="text: popupOptions.linkText, attr: {href: popupOptions.linkUrl, target: \'_blank\' }"></a> <!-- /ko --> </div> </div> </div>',
     'dxrd-savereport-dialog-content': '<div class="dxrd-reportdialog-content"> <div class="dx-fieldset"> <div class="dx-field dxd-back-primary"> <div data-bind="dxTextBox: { value: $data.reportName, height: 36, placeholder: reportNamePlaceholder(), valueChangeEvent: \'keyup\' }"></div> </div> </div> <div class="dx-default-border-style dxd-border-secondary"> <div class="dxrd-reportdialog-urls" data-bind="dxList: { dataSource: urls, selectedItems: [], editEnabled: true, height: 200, editConfig: { selectionEnabled: true }, selectionMode: \'single\', onItemClick: function(e) { this.reportName(e.itemData.Value); }, activeStateEnabled: false, noDataText: $data.noDataText, encodeNoDataText: true, nextButtonText: $root.getLocalization(\'More\', \'ASPxReportsStringId.List_More\') }"> <div data-options="dxTemplate : { name: \'item\' }" data-bind="event: { dblclick: function(e){ $parent.onDblClick(e.Key); } }"> <div data-bind="text: $data.Value"></div> </div> </div> </div> </div>',
     'dxrd-savereport-dialog-content-light': '<div class="dxrd-reportdialog-easy-content" data-bind="text: saveText"></div>',
     'dxrd-openreport-dialog-content': '<div class="dxrd-reportdialog-content"> <div class="dx-fieldset"> <div class="dx-field dxd-back-primary"> <div class="dx-property-grid-search-box" data-bind="dxTextBox: { mode: \'search\', height: 36, value: searchValue, valueChangeEvent: \'keyup\', placeholder: searchPlaceholder(), showClearButton: true }"></div> </div> </div> <div class="dx-default-border-style dxd-border-secondary"> <div class="dxrd-reportdialog-urls" data-bind="dxList: { dataSource: urls, selectedItems: [], searchExpr: [\'Value\'], searchValue: searchValue, editEnabled: true, height: 200, editConfig: { selectionEnabled: true }, selectionMode: \'single\', onItemClick: function(e) { this.reportUrl(e.itemData.Key); }, activeStateEnabled: false, nextButtonText: $root.getLocalization(\'More\', \'ASPxReportsStringId.List_More\'), noDataText: $data.noDataText, encodeNoDataText: true }"> <div data-options="dxTemplate : { name: \'item\' }" data-bind="event: { dblclick: function(e){ $parent.onDblClick(e.Key); } }"> <div data-bind="text: $data.Value"></div> </div> </div> </div> </div>',
     'dxrd-menubutton-template': '<div class="dxrd-menubutton-part dxrd-outline-inherit" tabindex="1"  data-bind="cacheElement: { action: function(element){ $data.setMenuElement(element) } }"> <div class="dxrd-menu-container dxrd-menu-fullscreen-nav" data-bind="css: { \'dxrd-menu-fullscreen-nav-collapsed\': isMenuCollapsed()}"> <div class="dx-overlay-wrapper dxd-menu-back-color dxd-back-contrast dxrd-z-index-1002"  data-bind="styleunit: { width: $data.isMenuCollapsed() ? 50 : 300 }, visible: appMenuVisible"> <div class="dx-overlay-content"> <div class="dxrd-report-menu-title dxd-border-primary"> <!-- ko if: !isMenuCollapsed()--> <div class="dxrd-report-menu-button dxrd-report-menu-close-button" data-bind="template: \'dxrd-svg-toolbar-delete\', dxclick: function(e) { toggleAppMenu() }, dxpointerenter: function(_, e) {  e.target.classList &&  e.target.classList.add(\'dxd-state-active\') }, dxpointerleave: function(_, e) {  e.target.classList &&  e.target.classList.remove(\'dxd-state-active\') }"></div> <div class="dxrd-report-menu-title-text dxd-text-primary" data-bind="text: $root.getLocalization(\'Menu\', \'ASPxReportsStringId.ReportDesigner_Menu_Text\')"></div> <!-- /ko --> <!-- ko if: isMenuCollapsed--> <div class="dxrd-report-menu-button dxd-back-highlighted dxrd-report-menu-back-button" data-bind="template: \'dxrd-svg-menu-back\', dxclick: function(e) { isMenuCollapsed(false); }"></div> <!-- /ko --> </div> <!-- ko foreach: actionLists.menuItems --> <div class="dxrd-menu-item dxd-text-primary dxd-list-item-back-color dxd-icon-highlighted" data-bind="dxclick: function(e) { if(disabled && !disabled() || !disabled) { $root.toggleAppMenu(); clickAction($root.model(), e); }}, css: { \'dxrd-disabled-button\': disabled, \'dxd-state-active\': $data.selected }, visible: visible"> <div class="dxrd-menu-item-image" data-bind="css: ko.unwrap($data.imageClassName), template: {name: ko.unwrap($data.imageTemplateName), if: !!ko.unwrap($data.imageTemplateName)}, attr: { title: $data.displayText && $data.displayText() || text }"> </div> <!-- ko if: !$root.isMenuCollapsed() --> <div class="dxrd-menu-item-text" data-bind="text: $data.displayText && $data.displayText() || text, attr: { title: $data.displayText && $data.displayText() || text}"></div> <div class="dxrd-menu-item-separator" data-bind="visible: $data.hasSeparator"></div> <!-- /ko --> </div> <!-- /ko --> </div> </div> </div> <div class="dxrd-menu-button dxd-toolbox-back-color dxd-border-primary dxd-back-secondary-invariant"> <div class="dxrd-menu-button-image dxd-button-back-color dxd-state-normal dxd-back-highlighted" data-bind="dxclick: function(e) { if(stopPropagation) { stopPropagation = false; } else { toggleAppMenu() } }, template: \'dxrd-svg-menu-menu\', css: {\'dxd-state-active\': appMenuVisible }"></div> <div class="dxrd-menu-place dxrd-width-54px" ></div> </div> </div>',
-    '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 --> </div>',
+    '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 -->',
+    '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>',
+    '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 --> <!-- 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>',
     'dxrd-smart-tag-exressions': '<!--ko with: $data.expressionEditor --> <!--ko template: { name: \'dxrd-expressioneditor-popup\' } --> <!--/ko--> <!--/ko-->',
     'dxrd-reportRtlProperty': '<!-- ko if: !!$root.surface() --> <!-- ko template: { name: $root.dx._static.editorTemplates.getEditor("combobox").header, data: $root.surface().wrapRtlProperty($data, $root.undoEngine, $element) } --> <!-- /ko --> <!-- /ko -->',
     'dxrd-wizard-report-tree': '<div class="dxrd-wizard-report-tree"> <div class="dxrd-wizard-report-tree-title" data-bind="text: $root.getLocalization(\'Select the report\', \'ASPxReportsStringId.ReportDesigner_MasterDetailWizard_SelectReport\')"></div> <div class="dxrd-wizard-report-tree-selectbox" data-bind="dxSelectBox: { dataSource: $data.items, itemTemplate: \'stateItem\', valueExpr: \'path\', displayExpr: \'name\', value: $data.value, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true  }"> <div data-options="dxTemplate:{ name:\'stateItem\' }" class="dxrd-text-align-left"> <div data-bind="text: name, styleunit: {marginLeft: 30 * level}"></div> </div> </div> </div>',
     'dxrd-toolbar-two-way-switch': '<div class="dxrd-toolbar-item dxrd-toolbar-two-way-switch dxd-back-contrast" data-bind="visible: $parent.visible"> <!-- ko foreach: $data.items --> <!-- ko template: { name: \'dxrd-toolbar-two-way-switch-active\', if: $data.active } --> <!-- /ko --> <!-- ko template: { name: \'dxrd-toolbar-two-way-switch-clickable\', if: !$data.active, data: $data.itemData } --> <!-- /ko --> <!-- /ko --> </div>',
     'dxrd-toolbar-two-way-switch-active': '<div class="dxd-text-primary dxd-back-highlighted dxd-state-active dxd-state-no-hover" data-bind="text: $data.getDisplayText()"></div>',
     'dxrd-toolbar-two-way-switch-clickable': '<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>',
+    'dxrd-context-menu': '<div data-bind="dxContextMenu: $data.contextMenu"></div>',
     '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> <div class="dx-menu-item-popout-container" data-bind="visible: $data.items && $data.items.length"> <div class="dx-menu-item-popout"></div> </div> </div>',
     'dxrd-expression-editor-addon': '<div class="dxrd-editormenu-box dxd-property-grid-menu-box-color dxrd-editor-box-image" data-bind="cacheElement: { action: function() { $data.cacheFunction($root.activateExpressionEditor); } }, dxclick: function(_, element) { showPopup(_, element) }, attr: { title: hint }, css: editorMenuButtonCss"> <div class="dxrd-editor-box-image-content" data-bind="template: { name: $data.imageTemplateName, if: ko.unwrap($data.imageTemplateName) }"></div> </div>',
     'dxrd-activated-expressioneditor': '<!-- ko if: !!$data --> <!-- ko template: \'dxrd-expressioneditor-popup\' --> <!-- /ko --> <!-- /ko -->',
@@ -142,40 +145,41 @@ SvgTemplatesEngine.addTemplates({
     'dxrd-expressioneditor-property-accordion': '<div class="dx-fieldset dxrd-margin-0" > <div data-bind="dxdAccordion: { collapsed: collapsed }"> <div class="dx-accordion-header dx-expressioneditor-property-accordion-header dxd-list-item-back-color dxd-back-highlighted" data-bind="css: {\'dxd-state-selected\': $data.isSelected }"> <div class="dx-collapsing-image dxrd-display-inline-block" data-bind="template: \'dxrd-svg-collapsed\', css: { \'dx-image-expanded\': !collapsed() }" ></div> <span class="dxrd-expressioneditor-property-header" data-bind="text: displayName, style: { fontWeight: isBinded() ? \'Bold\' : \'\'}"></span> </div> <div class="dx-accordion-content"> <!-- ko foreach: items--> <!-- ko if: $data.templateName --> <!-- ko template: $data.templateName--> <!-- /ko --> <!-- /ko --> <!-- ko ifnot: $data.templateName --> <div class="dxrd-expressioneditor-property dxd-text-primary dxd-list-item-back-color dxd-back-highlighted" data-bind="css: {\'dxd-state-selected\': isSelected }, dxclick: function() { $data.click($data.content); }"> <div class="dxrd-expressioneditor-property-text" data-bind="text: displayName, attr: { title: displayName }, css: { \'dxrd-expressioneditor-property-binded\': isBinded() }"></div> <div class="dxrd-expression-image dxd-icon-accented" data-bind="template: \'dxrd-svg-properties-propertyexpression\', visible: isBinded()"></div> </div> <!-- /ko --> <!-- /ko --> </div> </div> </div>',
     'dxrd-viewStyle': '<div data-bind="dxLocalizedSelectBox: { items: viewmodel.items, value: value, valueExpr: \'value\', displayExpr: \'displayValue\', displayCustomValue: true, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) } }"></div>',
     'dxrd-reportSourceUrl': '<div data-bind="dxSelectBox: { dataSource: $data.getValues($root.reportUrls, $root.navigateByReports.currentTab), onOpened: function() { $data.updateUrls(); }, searchEnabled: true, value: value, disabled: disabled, valueExpr: \'Key\', displayExpr: \'Value\', dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true  }"></div>',
-    'dxrd-content-type': '<!-- ko if: value --> <!-- ko with: value --> <div data-bind="dxLocalizedSelectBox: { items: $parent.values, value: type, valueExpr: \'value\', displayExpr: \'displayValue\', displayCustomValue: true, disabled: $parent.disabled, dropDownOptions: { container: $root.getPopupContainer($element) } }"></div> <!-- /ko --> <!-- /ko -->',
+    'dxrd-content-type': '<!-- ko if: value --> <!-- ko with: value --> <div data-bind="dxLocalizedSelectBox: { items: $parent.values, value: type, valueExpr: \'value\', showClearButton: showClearButton, displayExpr: \'displayValue\', displayCustomValue: true, disabled: $parent.disabled, dropDownOptions: { container: $root.getPopupContainer($element) } }"></div> <!-- /ko --> <!-- /ko -->',
     'dxrd-checkbox-style-combobox': '<div data-bind="dxLocalizedSelectBox: { dataSource: values, value: value, valueExpr: \'value\', displayExpr: \'displayValue\', displayCustomValue: true, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) } }, dxValidator: { validationRules: $data.validationRules || [] }"> <div class="dxrd-checkbox-style-combobox-item" data-options="dxTemplate: { name: \'item\' }"> <div class="dxrd-checkbox-style-combobox-item-icons" data-bind="foreach: [\'Unchecked\',\'Checked\',\'Indeterminate\']"> <!-- ko template: $parent.templateBinding(\'dxrd-svg-checkboxglyphs-\' + $parent.value + \'_\' + $data) --> <!-- /ko --> </div> <span data-bind="text: $root.getLocalization(displayValue, localizationId), attr: { title: $root.getLocalization(displayValue, localizationId) }"></span> </div> </div>',
     'dxrd-datasource': '<div data-bind="dxSelectBox: getEditorOptions($root.dataSourceHelper, $root.undoEngine, $root.getPopupContainer($element))"></div>',
     'dxrd-bands': '<div data-bind="dxSelectBox: { items: generateValue($root.bands), value: value, displayExpr: \'displayName\', valueExpr: \'value\', displayCustomValue: true, disabled: disabled, placeholder: $root.getLocalization(\'(none)\', \'ChartStringId.WizNoBackImage\'), dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true  }"></div>',
-    'dxrd-formattingRuleCollection': '<div class="dxrd-editor dxrd-formatting-rule-collection-editor" data-bind="visible: visible, styleunit: { \'marginLeft\' : padding }"> <div data-bind="dxCollectionEditor: options"> <div data-bind="dxdAccordion: { collapsed: collapsed }"> <div class="dxrd-group-header dx-accordion-header dxd-text-primary"> <div class="dxrd-formatting-rule-checkbox" data-bind="dxCheckBox: { value: value().selected, disabled: editor.disabled }, dxclick: function(_, event) { event.stopPropagation(); }"></div> <div class="dxrd-formatting-rule-collapsed dx-collapsing-image" data-bind="template: \'dxrd-svg-collapsed\', css: { \'dx-image-expanded\': !collapsed() }"></div> <div class="dxrd-formatting-rule-displayName"> <div class="propertygrid-editor-displayName" data-bind="text: value().name, attr: { title: value().name }"></div> </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> </div> </div> </div>',
+    'dxrd-formattingRuleCollection': '<div class="dxrd-editor dxrd-formatting-rule-collection-editor" data-bind="visible: visible, styleunit: { \'marginLeft\' : padding }"> <div data-bind="dxCollectionEditor: options"> <div data-bind="dxdAccordion: { collapsed: collapsed }"> <div class="dxrd-group-header dx-accordion-header dxd-text-primary"> <div class="dxrd-formatting-rule-checkbox" data-bind="dxCheckBox: { value: value().selected, disabled: editor.disabled }, dxclick: function(_, event) { event.stopPropagation(); }"></div> <div class="dxrd-formatting-rule-collapsed dx-collapsing-image" data-bind="template: \'dxrd-svg-collapsed\', css: { \'dx-image-expanded\': !collapsed() }"></div> <div class="dxrd-formatting-rule-displayName"> <div class="propertygrid-editor-displayName" data-bind="text: value().name, attr: { title: value().name }"></div> </div> </div> <div class="dx-accordion-content dxd-back-primary"> <div data-bind="dxPropertyGrid: { target: value, editorsInfo: { editors: $root.dx._static.formattingRuleSerializationsInfo }, level: level + 1, parentDisabled: editor.disabled }"></div> </div> </div> </div> </div>',
     'dxrd-fields-combobox': '<div data-bind="dxSelectBox: { dataSource: wrapValues($root.displayNameProvider), value: value, valueExpr: \'value\', displayExpr: \'displayValue\', displayCustomValue: true, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true  }, dxValidator: { validationRules: $data.validationRules || [] }"></div>',
     'dxrd-style': '<div data-bind="dxSelectBox: new $root.dx._static.StylesEditorHeaderModel(value, $root.styles(), disabled, $root.getPopupContainer($element))"></div>',
     'dxrd-styleContent': '<!-- ko if: value--> <div data-bind="dxStylesEditor: { styleName: value, styles: $root.styles() }"></div> <!--/ko -->',
     'dxrd-dataBindings': '',
-    'dxrd-dataBinding': '<!-- ko with: value --> <!-- ko if: visible --> <!-- ko displayNameExtender: { dataSource: dataSource, dataMember: displayExpr } --> <div data-bind="dxFieldListPicker: { acceptCustomValue: true, displayValue: $displayName, itemsProvider: $root.dataBindingsProvider(), treeListController: $parent.treeListController, value: $data.generateValue($root.undoEngine(), $root.dataSourceHelper(), $root.fieldListDataSources(), $root.dataBindingsProvider()), disabled: $parent.disabled }"></div> <!--/ko --> <!--/ko --> <!--/ko -->',
-    'dxrd-chartValueBinding': '<div data-bind="dxFieldListPicker: { acceptCustomValue: true, displayValue: generateDisplayValue($root.reportDataSource), itemsProvider: $root.reportDataBindingsProvider, treeListController: treeListController, value: generateValue($root.undoEngine(), $root.reportParameters, $root.reportDataSource), disabled: disabled }"></div>',
-    'dxrd-reportexplorer-editor': '<div data-bind="dxFieldListPicker: { acceptCustomValue: true, value: itemsProvider.selectedPath, displayValue: displayExpr, itemsProvider: itemsProvider, path: itemsProvider.path, disabled: disabled, treeListController: treeListController }"></div>',
+    'dxrd-dataBinding': '<!-- ko with: value --> <!-- ko if: visible --> <!-- ko displayNameExtender: { dataSource: dataSource, dataMember: displayExpr } --> <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()), disabled: $parent.disabled }"></div> <!--/ko --> <!--/ko --> <!--/ko -->',
+    'dxrd-chartValueBinding': '<div data-bind="dxFieldListPicker: { acceptCustomValue: true, onValueChanged: onValueChanged, displayValue: generateDisplayValue($root.reportDataSource), itemsProvider: $root.reportDataBindingsProvider, treeListController: treeListController, value: generateValue($root.undoEngine(), $root.reportParameters, $root.reportDataSource), disabled: disabled }"></div>',
+    'dxrd-reportexplorer-editor': '<div data-bind="dxFieldListPicker: { acceptCustomValue: true, onValueChanged: onValueChanged, value: itemsProvider.selectedPath, displayValue: displayExpr, itemsProvider: itemsProvider, path: itemsProvider.path, disabled: disabled, treeListController: treeListController }"></div>',
     'dxrd-dataBindingsContent': '<div data-bind="template: { name: \'dx-propertieseditor\', data: viewmodel }"></div>',
     'dxrd-dataBindingContent': '<div class="dx-field dxd-back-primary"> <div class="dx-field-label dx-accordion-header dxd-text-primary" data-bind="styleunit: padding"> <div class="propertygrid-editor-displayName" data-bind="text: $root.getLocalization(\'Format String\', \'DevExpress.XtraReports.UI.XRBinding.FormatString\')"></div> </div> <div class="dx-field-value"> <!-- ko if: value() --> <!-- ko with: value() --> <!-- ko template: { name: \'dxrd-formatstring\', data: { value: $data.formatString, disabled: $data.disabled, actions: $parent.actions, customPatterns: $parent.customPatterns } } --> <!-- /ko --> <!-- /ko --> <!-- /ko --> </div> </div>',
     'dxrd-scriptsbox': '<div data-bind="dxEventDropDownEditor: { items: $root.events, value: value, editEnabled: true, disabled: disabled, secondAction: function() { $root.gotoEvent && $root.gotoEvent($data.value(), name, $parents[1]._model && $parents[1]._model()); }, placeholder: $root.dx._static.selectPlaceholder(), noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, dropDownOptions: { container: $root.getPopupContainer($element) } }"></div>',
-    'dxrd-collection-item-group': '<div class="dx-field dxd-back-primary" data-bind="styleunit: { \'marginLeft\' : $parents[1].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> <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-picker" data-bind="dxFieldListPicker: { displayValue: $displayName, value: value().fieldName, acceptCustomValue: true, path: editor._model() && editor._model().getPath(\'groupFields\') || \'\', itemsProvider: $root.dataBindingsProvider(), treeListController: new $root.dx._static.TreeListController(), disabled: editor.disabled}"></div> <!--/ko --> </div> </div>',
-    '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> </div>',
+    'dxrd-collection-item-group': '<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].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: 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, acceptCustomValue: true, path: $parents[1]._model() && $parents[1]._model().getPath(\'groupFields\') || \'\', itemsProvider: $root.dataBindingsProvider(), treeListController: new $root.dx._static.TreeListController(), disabled: disabled}"></div> <!--/ko --> </div> </div>',
+    '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="template: { name: \'dx-propertieseditor\', data: getProperties() }"></div> </div> </div>',
     'dxrd-parameterContent': '<div data-bind="template: { name: \'dx-propertieseditor\', data: viewmodel }"></div>',
     'dxrd-calculatedFields': '<div class="dxrd-editor" data-bind="visible: visible"> <div data-bind="dxCollectionEditor: { values: value, displayName: $root.getLocalization(displayName), level: level, info: info, addHandler: function() { return $root.calculatedFieldsSource().createCalculatedField(\'\'); } }"> </div> </div>',
+    'dxrd-watermarks': '<div class="dxrd-editor" data-bind="visible: visible"> <div data-bind="dxCollectionEditor: { values: value, displayName: $root.getLocalization(displayName), level: level, info: info, addHandler: function() { return $root.watermarks().createWatermark(); } }"> </div> </div>',
     'dxrd-parameters': '<div class="dxrd-editor" data-bind="visible: visible"> <div data-bind="dxCollectionEditor: { values: value, displayName: displayName, level: level, info: info, addHandler: function() { return $root.parameters().add(); }, removeHandler: function(parameter) { return $root.parameters().remove(parameter); }, undoEngine: $root.undoEngine }"> </div> </div>',
     'dxrd-levelCollection': '<div class="dxrd-editor" data-bind="visible: visible"> <div data-bind="dxCollectionEditor: { values: value, displayName: $root.getLocalization(displayName), level: level, info: info, addHandler: function() { return $root.dx._static.TableOfContentsLevel.createNew(_model()); } }"> </div> </div>',
-    'dxrd-collectionItemWithAccordion': '<div class="dxrd-accordion-collection-item" data-bind="dxdAccordion: { collapsed: collapsed }"> <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> </div> <div class="dx-accordion-content dxd-back-primary"> <div data-bind="dxPropertyGrid: { target: value, level: editor.level + 2, parentDisabled: editor.disabled }"></div> </div> </div>',
+    'dxrd-collectionItemWithAccordion': '<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\': 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="template: { name: \'dx-propertieseditor\', data: getProperties({ level: level + 2 }) }"></div> </div> </div>',
     'dx-numeric-undo': '<div data-bind="dxNumberBox: getOptions({ value:generateValue($root.undoEngine), showSpinButtons:true, disabled:disabled, min:min, max:max }), dxValidator: { validationRules: validationRules || [] }"></div>',
     'dx-modificators-highlightable': '<div class="dx-font-content"> <div class="dx-field"> <div class="dx-field-label dxd-text-primary" data-bind="styleunit: { \'paddingLeft\': padding }"></div> <!-- ko with: value --> <div class="dx-field-value"> <div class="dx-font-styles-content"> <div class="dx-font-style-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-image-fontstyle-bold" data-bind="css: { \'dxd-state-active\': bold(), \'dx-disabled-button\': $parent.disabled, \'dxd-border-accented\': $data.boldHasExpression }, click: function() { if(!$parent.disabled()) { bold(!bold()); } }"><!-- ko template: \'dxrd-svg-fontstyle-bold\'--><!-- /ko --></div> <div class="dx-font-style-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-image-fontstyle-italic" data-bind="css: { \'dxd-state-active\': italic(), \'dx-disabled-button\': $parent.disabled, \'dxd-border-accented\': $data.italicHasExpression }, click: function() { if(!$parent.disabled()) { italic(!italic()); } }"><!-- ko template: \'dxrd-svg-fontstyle-italic\'--><!-- /ko --></div> <div class="dx-font-style-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-image-fontstyle-underline" data-bind="css: { \'dxd-state-active\': underline(), \'dx-disabled-button\': $parent.disabled, \'dxd-border-accented\': $data.underlineHasExpression }, click: function() { if(!$parent.disabled()) { underline(!underline()); } }"><!-- ko template: \'dxrd-svg-fontstyle-underline\'--><!-- /ko --></div> <div class="dx-font-style-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-image-fontstyle-strikeout" data-bind="css: { \'dxd-state-active\': strikeout(), \'dx-disabled-button\': $parent.disabled, \'dxd-border-accented\': $data.strikeoutHasExpression }, click: function() { if(!$parent.disabled()) { strikeout(!strikeout()); } }"><!-- ko template: \'dxrd-svg-fontstyle-strikeout\'--><!-- /ko --></div> </div> </div> <!-- /ko --> </div> </div>',
     'dx-objectEditorContentUndo': '<!-- ko if: visible --> <div data-bind="template: { name: \'dx-propertieseditor\', data: generateValue($root.undoEngine) }"></div> <!-- /ko -->',
     'dxrd-editOptionsEditorName': '<div data-bind="dxFieldListPicker: $data"></div>',
     'dxrd-editingField-editor-treelist-item': '<div class="dx-treelist-item dxd-list-item-back-color dxd-back-highlighted" data-bind="styleunit: padding, css: { \'dx-treelist-item-selected dxd-state-selected\': isSelected }"> <div class="dx-treelist-caption"> <div class="dx-treelist-selectedcontent" data-bind="click: toggleSelected"> <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-text-wrapper"> <div class="dx-treelist-text" data-bind="text: text, attr: { title: data.title }"></div> </div> </div> </div> </div>',
-    'dxrd-name': '<div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { id: editorInputId } }), dxValidator: { validationRules: generateRules($root.controlsHelper.allControls) || [] }"></div>',
+    'dxrd-name': '<div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { id: editorInputId } }),  dxValidator: { validationRules: generateRules($root.controlsHelper.allControls) || [] }"></div>',
     'dxrd-reportexpression-ellipsis': '<div class="no-margin-right" data-bind="dxEllipsisEditor: { value: displayValue, buttonAction: function() { $parent.showPopup($root.editableObject && $root.editableObject()); }, disabled: disabled, isValid: modelValueValid, warningMessage: modelValueWarning, inputAttr: { id: editorInputId } }"></div>',
     'dxrd-reportexpression-complex': '<!-- ko if: visible --> <div> <!-- ko template: { name: \'dxrd-reportexpression\' }--> <!-- /ko --> <!-- ko template: { name: \'dxrd-expressioneditor-popup\', data: $data.wrapper }--> <!-- /ko --> </div> <!-- /ko -->',
     'dxrd-reportexpression': '<!-- ko if: visible --> <!-- ko if: $data.patchOptions($root.reportExplorerProvider, $root.editableObject && $root.editableObject()) --> <div data-bind="dxExpressionEditor: getOptions({ options: value, fieldListProvider: $root.reportItemsProvider, displayNameProvider: $root.expressionDisplayNameProvider && $root.expressionDisplayNameProvider(), editorTemplateName: $data.editorTemplateName })"></div> <!-- /ko --> <!-- /ko -->',
     'dxrd-pivotcriteria': '<!-- ko with: $data.wrapModel($root.fieldListProvider) --> <div data-bind="dxFilterEditor: { options: value, fieldListProvider: itemsProvider, getDisplayNameByPath: $root.getDisplayNameByPath, displayNameProvider: displayNameProvider }"></div> <!-- /ko -->',
     'dxrd-richtext-loadfile': '<div data-bind="dxRichTextFileEditor: { value: value, placeholderId: \'File\', disabled: disabled, accept:\'.rtf,.docx,.txt,.htm,.html\' }"></div>',
-    'dxrd-image-loadfile': '<div data-bind="dxImageSourceEditor: { value: value, accept: \'image/*\', type: \'img\', disabled: disabled, inputAttr: { id: editorInputId}, showClearButton: true }"></div>',
+    'dxrd-image-loadfile': '<div data-bind="dxImageSourceEditor: { value: value, onValueChanged: onValueChanged, accept: \'image/*\', type: \'img\', disabled: disabled, inputAttr: { id: editorInputId}, showClearButton: true }"></div>',
     'dxrd-pdfcontent-loadfile': '<div data-bind="dxFileImagePicker: { value: value, placeholderId: \'File\', disabled: disabled, accept:\'.pdf\', showClearButton: true }"></div>',
     'dxrd-summaryeditor-header': '<!-- ko template: \'dx-emptyHeader\' --> <!-- /ko --> <div data-bind="dxPopup: { showTitle: true, width: \'550px\', height: \'400px\', wrapperAttr: { class: \'dxrd-summaryeditor-popup\' }, title: $root.getLocalization(\'Summary Editor\'), visible: $data.popup.visible, toolbarItems: $data.popup.buttons, showCloseButton: true, container: $data.popup.container($element), position: { of: $data.popup.container($element) }}"> <!-- ko template: { name: \'dx-propertieseditor\', data: $data.popup.grid } --> <!-- /ko --> </div>',
     'dxrd-datasource-combobox': '<div data-bind="dxSelectBox: { dataSource: $data.getValues(), searchEnabled: true, value: value, valueExpr: \'value\', displayExpr: \'displayValue\', disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element)  }, inputAttr: { id: editorInputId }, popupPosition: { boundary: $root.getPopupContainer($element) }, useItemTextAsTitle: true  }"> <div data-options="dxTemplate: { name: \'item\' }" data-bind="text: displayValue, style: { \'fontWeight\': $root.isLocalized($data.value) ? \'bold\' : \'normal\' }, attr: { title: displayValue }"> </div> </div>',
@@ -196,7 +200,7 @@ SvgTemplatesEngine.addTemplates({
     'dxrd-page-masterdetail-select-reportdata-fieldMembers': '<div class="dxrd-wizard-reportdata-column"> <div class="dxrd-wizard-reportdata-title" data-bind="text: _selectDataFieldsCaption"></div> <div class="dxrd-wizard-add-queries-page dxrd-wizard-masterdetail-fields dxrd-wizard-page-treelist-accordion-style dxd-border-secondary" data-bind="dxScrollView: { showScrollbar: \'onHover\', height: \'auto\' }"> <div data-bind="treelist: _fieldMemberFieldListModel" class="dxrd-width-100 dxrd-height-100"></div> </div> </div>',
     'dxrd-page-masterdetail-select-dataMembers': '<div class="dxrd-wizard-page dxrd-wizard-masterdetail-select-reportdata-page"> <!-- ko template: { name: "dxrd-page-masterdetail-select-reportdata-dataMembers", data: $data }--> <!-- /ko --> </div>',
     'dxrd-page-masterdetail-select-fieldMembers': '<div class="dxrd-wizard-page dxrd-wizard-masterdetail-select-reportdata-page"> <!-- ko template: { name: "dxrd-page-masterdetail-select-reportdata-fieldMembers", data: $data }--> <!-- /ko --> </div>',
-    'dxrd-page-masterdetail-summary-section': '<div class="dxrd-wizard-page dxrd-wizard-masterdetail-summary-options-page"> <div class="dxrd-wizard-masterdetail-summary-options-content"> <div class="dxrd-wizard-list-container"> <div class="dxrd-wizard-list dx-default-border-style dxd-border-secondary" data-bind="dxScrollView: { showScrollbar: \'onHover\', height: \'100%\' }"> <div class="dxrd-wizard-field-infos dxrd-wizard-field-infos-paragraf dxd-border-secondary"> <div class="dxrd-wizard-field-infos-fields dxd-wizard-title-back-color dxd-back-secondary dxd-border-secondary" data-bind="text: _fieldsCaption, attr:{\'title\': _fieldsCaption }"></div> <div class="dxrd-wizard-field-infos-values dxd-wizard-title-back-color dxd-back-secondary dxd-border-secondary" data-bind="text: _summaryFunctionCaption, attr:{\'title\': _summaryFunctionCaption }"></div> <div class="dxrd-wizard-field-infos-removebtn dxd-wizard-title-back-color dxd-back-secondary"></div> </div> <div data-bind="foreach: _summaryInfos"> <div class="dxrd-wizard-field-infos dxd-border-secondary"> <div class="dxrd-wizard-field-infos-fields dxd-wizard-title-back-color dxd-back-secondary dxd-border-secondary"> <div data-bind="dxFieldListPicker: { itemsProvider: $parent._fieldListProvider, acceptCustomValue: false, value: selectedPath, displayValue: displayName, placeholder: $root.dx._static.selectPlaceholder() }"> </div> </div> <div class="dxrd-wizard-field-infos-values dxd-wizard-title-back-color dxd-back-secondary dxd-border-secondary"> <!-- ko template: { name: "dxrd-multivalue", data: $data } --> <!--/ko--> </div> <div class="dxrd-wizard-field-infos-removebtn dxd-wizard-title-back-color dxd-back-secondary"> <div data-bind="dxButton: { icon: \'close\', onClick: function () { return $parent._removeSummaryInfo($data);  }}"></div> </div> </div> </div> </div> </div> </div> <div class="dxrd-wizard-ignore-null-values" data-bind="dxCheckBox: { value: ignoreNullValues, text: _ignoreNullValuesCaption }"></div> </div>',
+    'dxrd-page-masterdetail-summary-section': '<div class="dxrd-wizard-page dxrd-wizard-masterdetail-summary-options-page"> <div class="dxrd-wizard-masterdetail-summary-options-content"> <div class="dxrd-wizard-list-container"> <div class="dxrd-wizard-list dx-default-border-style dxd-border-secondary" data-bind="dxScrollView: { showScrollbar: \'onHover\', height: \'100%\' }"> <div class="dxrd-wizard-field-infos dxrd-wizard-field-infos-paragraf dxd-border-secondary"> <div class="dxrd-wizard-field-infos-fields dxd-wizard-title-back-color dxd-back-secondary dxd-border-secondary" data-bind="text: _fieldsCaption, attr:{\'title\': _fieldsCaption }"></div> <div class="dxrd-wizard-field-infos-values dxd-wizard-title-back-color dxd-back-secondary dxd-border-secondary" data-bind="text: _summaryFunctionCaption, attr:{\'title\': _summaryFunctionCaption }"></div> <div class="dxrd-wizard-field-infos-removebtn dxd-wizard-title-back-color dxd-back-secondary"></div> </div> <div data-bind="foreach: _summaryInfos"> <div class="dxrd-wizard-field-infos dxd-border-secondary"> <div class="dxrd-wizard-field-infos-fields dxd-wizard-title-back-color dxd-back-secondary dxd-border-secondary"> <div data-bind="dxFieldListPicker: { itemsProvider: $parent._fieldListProvider, acceptCustomValue: false, onValueChanged: onValueChanged, value: selectedPath, displayValue: displayName, placeholder: $root.dx._static.selectPlaceholder() }"> </div> </div> <div class="dxrd-wizard-field-infos-values dxd-wizard-title-back-color dxd-back-secondary dxd-border-secondary"> <!-- ko template: { name: "dxrd-multivalue", data: $data } --> <!--/ko--> </div> <div class="dxrd-wizard-field-infos-removebtn dxd-wizard-title-back-color dxd-back-secondary"> <div data-bind="dxButton: { icon: \'close\', onClick: function () { return $parent._removeSummaryInfo($data);  }}"></div> </div> </div> </div> </div> </div> </div> <div class="dxrd-wizard-ignore-null-values" data-bind="dxCheckBox: { value: ignoreNullValues, text: _ignoreNullValuesCaption }"></div> </div>',
     'dxrd-page-masterdetail-summary': '<div class="dxrd-wizard-page dxrd-wizard-masterdetail-summary-options-page"> <div class="dxrd-wizard-masterdetail-summary-options-title"> <!-- ko template: { name: \'dxrd-wizard-report-tree\', data: { items: $data._reportTree, value: $data._currentPath  } }--> <!-- /ko --> </div> <div class="dxrd-wizard-masterdetail-summary-options-content"> <div class="dxrd-wizard-list-title" data-bind="text: _selectFieldToSummaryCaption"></div> <div class="dxrd-wizard-list-container"> <div class="dxrd-wizard-list dx-default-border-style dxd-border-secondary" data-bind="dxScrollView: { showScrollbar: \'onHover\', height: \'100%\' }"> <div class="dxrd-wizard-field-infos dxrd-wizard-field-infos-paragraf dxd-border-secondary"> <div class="dxrd-wizard-field-infos-fields dxd-wizard-title-back-color dxd-back-secondary dxd-border-secondary" data-bind="text: _fieldsCaption"></div> <div class="dxrd-wizard-field-infos-values dxd-wizard-title-back-color dxd-back-secondary dxd-border-secondary" data-bind="text: _summaryFunctionCaption"></div> <div class="dxrd-wizard-field-infos-removebtn dxd-wizard-title-back-color dxd-back-secondary"></div> </div> <div data-bind="foreach: _summaryInfos"> <div class="dxrd-wizard-field-infos dxd-border-secondary"> <div class="dxrd-wizard-field-infos-fields dxd-wizard-title-back-color dxd-back-secondary dxd-border-secondary"> <div data-bind="dxSelectBox: { dataSource: $parent._displayedFields[$parent._currentPath()], itemTemplate: \'visibleItems\', displayExpr: \'displayName\', value: field, placeholder: $root.dx._static.selectPlaceholder(), dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true  }"> <div data-options="dxTemplate:{ name:\'visibleItems\' }" class="dxrd-text-align-left"> <!-- ko if: visible--> <div data-bind="text: name"></div> <!--/ko--> </div> </div> </div> <div class="dxrd-wizard-field-infos-values dxd-wizard-title-back-color dxd-back-secondary dxd-border-secondary"> <!-- ko template: { name: "dxrd-multivalue", data: $data } --> <!--/ko--> </div> <div class="dxrd-wizard-field-infos-removebtn dxd-wizard-title-back-color dxd-back-secondary"> <div data-bind="dxButton: { icon: \'close\', onClick: function () { return $parent._removeSummaryInfo($data);  }}"></div> </div> </div> </div> </div> </div> </div> <div class="dxrd-wizard-ignore-null-values" data-bind="dxCheckBox: { value: ignoreNullValues, text: _ignoreNullValuesCaption }"></div></div>',
     'dxrd-page-pageSetup': '<div class="dxrd-wizard-page dxrd-page-setup-page"> <!-- ko template: { name: \'dxrd-page-setup-page-preview\', data: $data }--> <!-- /ko --> <!-- ko template: { name: \'dxrd-page-setup-page-settings\', data: $data }--> <!-- /ko --> </div>',
     'dxrd-page-setup-page-preview': '<div class="dxrd-wizard-preview dxd-back-secondary"> <!-- ko with: $data.previewPageHelper --> <div class="dxrd-width-100 dxrd-height-100 dxrd-position-relative" data-bind="cacheElement: { action: function(element) { $data.cachePagePreviewElement(element); } }"> <div class="dxrd-wizard-preview-page" data-bind="styleunit: { width: $data.previewPageWidth(), height: $data.previewPageHeight() }"> <div class="dxrd-wizard-preview-margin-top" data-bind="styleunit: { top: $data.previewTopMargin() }"></div> <div class="dxrd-wizard-preview-margin-right" data-bind="styleunit: { right: $data.previewRightMargin() }"></div> <div class="dxrd-wizard-preview-margin-bottom" data-bind="styleunit: { bottom: $data.previewBottomMargin() }"></div> <div class="dxrd-wizard-preview-margin-left" data-bind="styleunit: { left: $data.previewLeftMargin() }"></div> </div> </div> <!-- /ko --> </div>',