devexpress-reporting
Version:
DevExpress Reporting provides the capability to develop a reporting application to create and customize reports.
77 lines • 192 kB
JavaScript
/**
* DevExpress HTML/JS Reporting (dx-designer-templates.generated.js)
* Version: 25.1.3
* Build date: Jun 26, 2025
* Copyright (c) 2012 - 2025 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.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, 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: getOptions({ dataSource: $root.panes, value: value, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true })"></div>',
'dxcd-legends-editor': '<div data-bind="dxSelectBox: getOptions({ dataSource: $root.legends, displayExpr: \'displayValue\', valueExpr: \'value\', value: value, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true })"></div>',
'dxcd-axisX-editor': '<div data-bind="dxSelectBox: getOptions({ dataSource: $root.axisX, value: value, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true })"></div>',
'dxcd-axisY-editor': '<div data-bind="dxSelectBox: getOptions({ dataSource: $root.axisY, value: value, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true })"></div>',
'dxcd-datasource': '<!-- ko with: generateOptions($root.chartDataSources, $root.getPopupContainer($element)) --> <div data-bind="dxSelectBox: $data"></div> <!-- /ko -->',
'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.getAvailableItems(), 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: {\'dxcd-summaryfunction-arg\': $parents[1].actionsAreAvailable }"> <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(); } }"> <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: getOptions({ 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: getOptions({ 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: getOptions({ 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 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="dragDropFileToControl: { dragDropHandler: $root.toolboxDragHandler, dragDropFileEnabled: dragDropFileEnabled}, 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(), \'dxrd-drop-zone-border\': showDropBorders}, resizable: { starting: function(_, container) { $root.resizeHandler.started = true; $root.resizeHandler.starting(); $root.dimensionNotationsModel.start(container); }, resizing: function(boundsDiff) { $root.dimensionNotationsModel.updateSize(boundsDiff); }, stopped: function() { $data.stopResize(); $root.dimensionNotationsModel.stop(); $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 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(_, container) { $root.resizeHandler.started = true; $root.resizeHandler.starting(); $root.dimensionNotationsModel.start(container); }, resizing: function(boundsDiff) { $root.dimensionNotationsModel.updateSize(boundsDiff); }, stopped: function() { $data.stopResize(); $root.dimensionNotationsModel.stop(); $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 -->',
'dxrd-vertical-bands-container-vruler': '<!-- ko with: surface --> <div class="dxrd-band-marker-wrapper dxrd-position-absolute" data-bind="styleunit: { \'width\': markerWidth() + 20, \'top\': topOffset, \'height\': height }" > <div class="dxrd-band-vruler" data-bind="styleunit: { \'height\': height, top: $data.bandOffset }, 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="ruler: { \'zoom\': zoom, \'length\': height, \'units\': $parent.measureUnit, \'direction\': \'vertical\', flip: $root.dx[\'config\']()[\'rtlEnabled\'] }"></div> </div> <div class="dxrd-band-marker dxrd-band-marker-body" data-bind=" css: { \'dxrd-band-marker-body\' : !$data.focused(), \'dxrd-band-marker-body-focused\' : $data.focused() }, styleunit: { \'height\': height(), \'width\': markerWidth }, click: function(_, e) { $data.markerClick($root.selection); e.stopPropagation(); }, resizable: { starting: function() { $root.resizeHandler.started = true; $root.resizeHandler.starting(); }, stopped: function() { $data.stopResize(); $root.resizeHandler.stopped(); $root.resizeHandler.started = false; }, handles: \'s\', disabled: collapsed, 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> </div> <!-- /ko -->',
'dxrd-vertical-bands-leftMargin-selection': '<!-- ko with: surface --> <div data-bind="styleunit: { \'height\': height, \'width\': $parent.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() }" class="dxrd-position-absolute"> </div> <!-- /ko -->',
'dxrd-vertical-bands-leftMargin': '<!-- ko with: surface --> <div data-bind="css: { \'dxrd-band-content\': !$data.collapsed(), \'dxrd-band-collapsed\': $data.collapsed() }, styleunit: { \'height\': height, top: topOffset }"> </div> <!-- /ko -->',
'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 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="dragDropFileToControl:{ dragDropHandler: $root.toolboxDragHandler, dragDropFileEnabled: dragDropFileEnabled}, 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, \'dxrd-drop-zone-border\': showDropBorders }, 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="dragDropFileToControl: { dragDropHandler: $root.toolboxDragHandler, dragDropFileEnabled: dragDropFileEnabled}, visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? \'visible\' : \'hidden\'}, css: {\'dxrd-drop-zone-border\': showDropBorders }"> <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 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 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 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="dragDropFileToControl:{ dragDropHandler: $root.toolboxDragHandler, dragDropFileEnabled: dragDropFileEnabled}, style: { visibility: (selected() || focused()) ? \'inherit\' : \'hidden\'}, css: {\'dxrd-selected dxrd-context-menu-container\': selected, \'dxrd-focused\': focused, \'dxrd-intersect\': isIntersect, \'dxrd-locked\': locked, \'dxrd-drop-zone-border\': showDropBorders }, 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="dragDropFileToControl: { dragDropHandler: $root.toolboxDragHandler, dragDropFileEnabled: dragDropFileEnabled}, visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? \'visible\' : \'hidden\'}, css:{ \'dxrd-drop-zone-border\': showDropBorders}"> <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="dragDropFileToControl: { dragDropHandler: $root.toolboxDragHandler, dragDropFileEnabled: dragDropFileEnabled}, visible: selected() || focused(), css: {\'dxrd-selected dxrd-context-menu-container\': selected, \'dxrd-focused\': focused, \'dxrd-intersect\': isIntersect, \'dxrd-locked\': locked, \'dxrd-drop-zone-border\': showDropBorders }, 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="dragDropFileToControl: { dragDropHandler: $root.toolboxDragHandler, dragDropFileEnabled: dragDropFileEnabled}, visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? \'visible\' : \'hidden\'}, css:{ \'dxrd-drop-zone-border\': showDropBorders}"> <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: in