devexpress-reporting
Version:
DevExpress Reporting provides the capability to develop a reporting application to create and customize reports.
4,692 lines • 310 kB
HTML
<script type='text/html' id='dxrd-checkboxcustomglyph'>
<div class="dxrd-checkbox-custom-glyph" data-bind="style: $data.customGlyphStyleCss"></div></script>
<script type="text/html" id="dxrv-preview-date-range-mobile">
<div class="dxrv-preview-date-range-mobile">
<div class="dx-fieldset">
<div class="dx-field">
<div data-bind="dxSelectBox: { dataSource: items, displayExpr: 'displayName', onValueChanged: popupModel.onTextChanged, useItemTextAsTitle: true , placeholder: popupModel.selectPeriodPlaceholder }"></div>
</div>
<div class="dx-field">
<div class="dx-fieldset-column">
<div class="dx-fieldset-header" data-bind="text: popupModel.fromText"></div>
<div class="dxrv-daterange-editor-button" data-bind="css: { 'dx-button-default': popupModel.startButton.focused }, dxButton: popupModel.startButton"></div>
</div>
<div class="dx-fieldset-column dx-fieldset-column-right">
<div class="dx-fieldset-header" data-bind="text: popupModel.untilText"></div>
<div class="dxd-back-secondary dx-fieldset-column-separator"></div>
<div class="dxrv-daterange-editor-button" data-bind="css: { 'dx-button-default': popupModel.endButton.focused }, dxButton: popupModel.endButton"></div>
</div>
</div>
<div class="dx-field">
<div class="dxrv-daterange-editor-item">
<!-- ko if: popupModel.startButton.focused -->
<!-- ko template: { name: 'dxrv-daterange-calendar', data: startRange } -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: popupModel.endButton.focused -->
<!-- ko template: { name: 'dxrv-daterange-calendar', data: endRange } -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dxrv-preview-time-range-mobile">
<div class="dxrv-preview-date-range-mobile">
<div class="dx-fieldset">
<div class="dx-field">
<div data-bind="dxSelectBox: { dataSource: items, displayExpr: 'displayName', onValueChanged: popupModel.onTextChanged, useItemTextAsTitle: true , placeholder: popupModel.selectPeriodPlaceholder }"></div>
</div>
<div class="dx-field">
<div class="dx-fieldset-column">
<div class="dx-fieldset-header" data-bind="text: popupModel.fromText"></div>
<div data-bind="dxDateBox: { type: 'time', value: startRange.value, onValueChanged: startRange.onValueChanged }" class="dx-accessibility-timerange-item dxrv-timerange-picker-input-start"></div>
</div>
<div class="dx-fieldset-column dx-fieldset-column-right">
<div class="dx-fieldset-header" data-bind="text: popupModel.untilText"></div>
<div class="dxd-back-secondary dx-fieldset-column-separator"></div>
<div data-bind="dxDateBox: { type: 'time', value: endRange.value, onValueChanged: endRange.onValueChanged }" class="dx-accessibility-timerange-item dxrv-timerange-picker-input-start"></div>
</div>
</div>
</div>
</div>
</script><script type="text/html" id="dxrd-preview-page-mobile">
<div class="dxrdp-content" data-bind="dxclick: clickToBrick, styleunit: { width: width, height: height }, autoFit: autoFitOptions, dxPreviewPageRenderer: imageOptions">
<div class="dxrdp-loading-wrapper" data-bind="styleunit: { width: width, height: height, lineHeight: height }, style: { 'background-color': color }, visible: pageLoading, text: loadingText">
</div>
<div class="dxrdp-active-border" data-bind="css: { 'dxrdp-active': active && hasBricks }, visible: !readerMode"></div>
<!-- ko foreach: activeBricks -->
<!-- ko template: { name: "dxrd-page-brick-mobile" } -->
<!--/ko-->
<!--/ko-->
<!-- ko if: !brickLoading && editingFields-->
<!-- ko foreach: editingFields -->
<!-- ko template: template -->
<!--/ko-->
<!--/ko-->
<!--/ko-->
</div>
</script>
<script type="text/html" id="dxrd-page-brick-mobile">
<div class="dxrd-report-preview-brick" data-bind="style: { top: topP, left: leftP, right: rightP, height: heightP, width: widthP }, css: { 'dxrd-report-preview-brick-selected': active }">
</div>
</script><script type="text/html" id="dxrdp-search-mobile">
<!-- ko if: $data.enabled -->
<div class="dxrdp-search-wrapper" data-bind="styleunit:{ height: height }, dxrdSearchBar: $data">
<div class="dxrd-mobile-search">
<div class="dxrdp-taptosearch" data-bind="visible: !editorVisible, dxclick: focusEditor">
<div class="dxrdp-taptosearch-text" data-bind="text: tapToSearchText"></div>
</div>
<div class="dxrdp-search-panel" data-bind="visible: editorVisible">
<div class="dxrdp-search-editor" data-bind="dxTextBox: { value: searchText, onValueChanged: onSearchTextChanged, onEnterKey: startSearch }"></div>
</div>
</div>
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-preview-export-to-mobile">
<div class="dxrd-preview-export-to" data-bind="dxMenu: { wrapperAttr: { class: 'dxrd-preview-export-to' }, items: items, onItemClick: clickAction }, attr: { title: $root.getLocalization(text, $data.textId) }">
<div data-options="dxTemplate: { name: 'item' }" data-bind="attr: { title: $root.getLocalization(text, $data.textId) }">
<!--ko if: $data.format -->
<div class="dxrd-preview-export-item-text" data-bind="text: $root.getLocalization($data.text, $data.textId)"></div>
<!-- /ko -->
<!--ko ifnot: $data.format -->
<div class="dxrd-preview-export-item-image-wrapper">
<div class="dxrd-preview-export-item-image" data-bind="css: ko.unwrap($data.imageClassName), template: { name: ko.unwrap($data.imageTemplateName), if: !!ko.unwrap($data.imageTemplateName)}"> </div>
</div>
<div class="dx-menu-item-popout-container">
<div class="dx-menu-item-popout"></div>
</div>
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dxrdp-surface-mobile-bottom">
<div class="dxrdp-mobile-actions" data-bind="visible: visible">
<div class="dxrdp-mobile-actions-content">
<!-- ko foreach: actions -->
<div class="dxrdp-mobile-action" data-bind="visible: visible, css: $data.imageClassName, template: { name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}, dxclick: clickAction"> </div>
<!-- ko if: $data.content -->
<!-- ko template: $data.content -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dxrdp-pages-mobile">
<div class="dxrdp-mobile-paginator" data-bind="dxrdMobilePaginator: $data">
<div class="dxrdp-mobile-paginator-content">
<div class="dxrdp-mobile-paginator-text" data-bind="text : text"></div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-menu-export-content">
<div class="dxrd-menu-export-popover" data-bind="dxPopover: { wrapperAttr: { class: 'dxrd-menu-export-popover' }, width: '266px', height: '266px', visible: visible, target: '.dxrdp-mobile-action.dxrd-image-export-to', container: $root.getPopupContainer($element), }">
<!-- ko foreach: items -->
<div class="dxrd-menu-export-item" data-bind="dxclick: action, text: text">
</div>
<!-- /ko-->
</div>
</script>
<script type="text/html" id="dxrd-menu-parameters-content">
<div data-bind="dxPopup: { wrapperAttr: { class: 'dxrd-menu-parameters-popup' }, showTitle: false, onHidden: onHidden, width: '100vw', height: '100vh', visible: visible, container: $root.getPopupContainer($element), }">
<!-- ko template: { name: 'dxrv-preview-parameters-mobile', data: $data }-->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrv-preview-parameters-mobile">
<div class="dxrdp-parameters-mobile" data-bind="dxValidationGroup: {}, css: className">
<div class="dxrdp-parameters-title" data-bind="text: $data.title"> </div>
<div class="dxrdp-parameters-scroll" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true, bounceEnabled: false }">
<!-- ko template: { name: $data.contentTemplate, data: model.getViewModel() }-->
<!-- /ko -->
</div>
<div class="dxrdp-parameters-buttons text-buttons" data-bind="foreach: { data: $data.actionButtons }, cacheElement: { action: function(element) { $data.cacheElementContent(element); } }">
<div class="dxrdp-parameter-action" data-bind="dxButton: { text: text, onClick: function(params){ $data.action(params) }, disabled: disabled, visible: visible }, css: className"></div>
</div>
<div class="dxrdp-parameters-buttons" data-bind="visible: showIcons, foreach: { data: $data.actionIcons }">
<div class="dxrdp-parameter-icon" data-bind="dxButton: { onClick: function(params){ $data.action(params)}, disabled: disabled }, css: className"></div>
</div>
</div>
</script>
<script id="dxrv-range-parameter-mobile" type="text/html">
<div data-bind="dxrvDateRangeEditor: {value: value, isMobile: true }"></div>
</script><script type="text/html" id="dxrdp-surface-mobile">
<div class="dxrd-preview-wrapper dxrdp-fullscreen dxrd-preview-surface" data-bind="style: { pointerEvents: surfaceEvents, touchEvents: surfaceEvents }, styleunit: { top: topOffset, height: previewWrapperSizeHeight, width: previewWrapperSizeWidth }, slide: slideOptions, mobileZoom: mobileZoomOptions, dxclick: click, css: { 'dxrp-editing-fields-hightlighted': editingFieldsHighlighted }">
<!-- ko template: {name: 'dxrd-preview-progress-bar', data: progressBar }-->
<!-- /ko -->
<div class="dxrd-mobile-content">
<div class="dxrd-mobile-gallery" data-bind="style: { pointerEvents: galleryEvents, touchEvents: galleryEvents }, dxGalleryReportPreview: { dataSource: gallery.items, gallery: gallery, slideOptions: slideOptions, animationEnabled: gallery.animationEnabled, disabled: zoomUpdating, width:'100%', height: '100%', showIndicator: false, loop: true, onSelectionChanged: onSlide, onOptionChanged: gallery.onOptionChanged }">
<div data-options="dxTemplate: { name: 'item' }">
<div class="dxrd-scrollView-mobile" data-bind="dxScrollView: reportPreview.scrollViewOptions">
<div class="dxrd-gallery-blocks" data-bind="style: gallery.contentSize">
<!-- ko foreach: blocks -->
<!-- ko if: page -->
<div class="dxrd-gallery-block" data-bind="styleunit: position, css: classSet">
<div class="dxrd-gallery-block-content" data-bind="styleunit: { width: Math.max(page.width, position.width), height: Math.max(page.height, position.height) }, style: { 'background-color': page.color }">
<div class="dxrdp-active-border" data-bind="css: { 'dxrdp-active': page.active && active, 'dxrdp-page-padding': page.active && active }, visible: reportPreview.slideOptions.readerMode"></div>
<div class="dxrd-mobile-page" data-bind="styleunit: { width: page.width, height: page.height }, style: { pointerEvents: reportPreview.pageEvents, touchEvents: reportPreview.pageEvents }">
<!-- ko template: { name :'dxrd-preview-page-mobile', data: page } -->
<!-- /ko -->
</div>
</div>
</div>
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</div>
</div>
</div>
</div>
<input type="text" class="dxrd-display-none" />
</script>
<script type="text/html" id="dxrp-editing-field-container">
<div class="dxrp-editing-field-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle, cacheElement: { action: function (elt) { setEditingFieldElement(elt); } }, zoom: zoom, css: { active: active, readonly: field.readOnly }">
<div class="dxrp-editing-field-borders" data-bind="style: borderStyle"></div>
<div class="dxrp-editing-field-content" data-bind="dxclick: activateEditor">
<!-- ko if: !active || field.readOnly -->
<!-- ko if: field.htmlValue -->
<div class="dxrp-editing-field-readonly-text" data-bind="style: textStyle, css: {'dxrp-editing-field-text-wordwrap': !wordWrap}">
<div class="dxrp-editing-field-text-html dxrp-editing-field-text-html-complex" data-bind="style: breakOffsetStyle, html: field.htmlValue"></div>
</div>
<!--/ko-->
<!-- ko ifnot: field.htmlValue -->
<div class="dxrp-editing-field-readonly-text" data-bind="style: textStyle, css: {'dxrp-editing-field-text-wordwrap': !wordWrap}, text: field.editValue"></div>
<!--/ko-->
<!--/ko-->
<!-- ko if: active && !field.readOnly -->
<!-- ko template: { name: editorTemplate, data: data } -->
<!--/ko-->
<!--/ko-->
</div>
</div>
</script>
<script type="text/html" id="dxrp-editing-field-text">
<textarea class="dxrp-editing-field-text" data-bind="value: value, valueUpdate: 'keypress', style: textStyle, event: { blur: hideEditor, input: onInput, keyup: keypressAction }"></textarea>
</script>
<script type="text/html" id="dxrp-editing-field-mask">
<div class="dxrp-editing-field-mask" data-bind="dxTextBox: options, childStyle: { style: textStyle, selector: '.dx-texteditor-input'}"></div>
</script>
<script type="text/html" id="dxrp-editing-field-number">
<div class="dxrp-editing-field-mask" data-bind="dxNumberBox: options, childStyle: { style: textStyle, selector: '.dx-texteditor-input'}"></div>
</script>
<script type="text/html" id="dxrp-editing-field-datetime">
<div class="dxrp-editing-field-datetime dxrd-width-100" data-bind="dxDateBox: $data.getOptions({ dropDownOptions: { container: $root.getPopupContainer($element), position: { at: 'left bottom', collision: 'flipfit flip', my: 'left top', boundary: $root.getPopupContainer($element), of: $element } } }), childStyle: { style: textStyle, selector: '.dx-texteditor-input'}"></div>
</script>
<script type="text/html" id="dxrp-editing-field-image">
<div class="dxrp-editing-field-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle ">
<!-- ko template: 'dxrp-editing-field-image-editor' -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrp-editing-field-image-editor">
<div class="dxrd-height-100 dxrd-width-100" data-bind="dxPictureEditor: $data"></div>
</script>
<script type="text/html" id="dxrp-editing-field-checkbox">
<div class="dxrp-editing-field-check-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle, zoom: zoom, click: onClick">
<div class="dxrp-editing-field-check" tabindex="1" data-bind="style: checkStyle, template: { name: checkStateStyleIcon, if: !!checkStateStyleIcon }"> </div>
</div>
</script>
<script type="text/html" id="dxrp-editing-field-radio">
<div class="dxrp-editing-field-check-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle, zoom: zoom, click: onClick">
<div class="dxrp-editing-field-check" data-bind="style: checkStyle">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 760 760" preserveAspectRatio="xMidYMid meet">
<g fill="#010101" stroke="none">
<path d="M32,380a348,348 0 1,0 696,0a348,348 0 1,0 -696,0" class="highlight dxrd-stroke-width-50 dxrd-stroke-rgb-0" />
<path d="M185,380a195,195 0 1,0 390,0a195,195 0 1,0 -390,0" data-bind="style: { fill: checked ? 'black' : 'transparent' }" />
</g>
</svg>
</div>
</div>
</script>
<script type="text/html" id="dxrp-character-comb-editing-field">
<div class="dxrp-editing-field-charactercomb dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle, dxclick: activateEditor, zoom: zoom, css: { active: active, readonly: field.readOnly }">
<!-- ko if: !active || field.readOnly -->
<!-- ko foreach: cells -->
<div class="dxrp-editing-field-charactercomb-cell" data-bind="style: style, text: text"></div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: active && !field.readOnly -->
<textarea class="dxrp-editing-field-text dxrd-background-white" data-bind="value: field.editorValue, valueUpdate: 'keypress', style: textStyle, event: { blur: hideEditor, input: onInput, keyup: keypressAction }"></textarea>
<!--/ko-->
</div>
</script>
<script type="text/html" id="dxrd-export-tool-content">
<div class="dxrd-visually-hidden">
<form method="post">
</form>
</div>
<div data-bind="dxPopup: {
width: popupOptions.width,
height: popupOptions.height,
title: popupOptions.title,
visible: popupOptions.visible,
showCloseButton: true,
onHidden: popupOptions.onHidden,
toolbarItems: popupOptions.toolbarItems,
wrapperAttr: popupOptions.wrapperAttr,
container: popupOptions.getPopupContainer($element),
position: { of: popupOptions.getPopupContainer($element) }
}">
<div class="dxrd-print-dialog-content">
<div data-bind="text: printingTexts.caption"></div>
<p></p>
<!-- ko if: printingTexts.prefix -->
<div class="dxrdp-print-text-prefix" data-bind="text: printingTexts.prefix"></div>
<!-- /ko -->
<a href="" class="dxrd-preview-printing-link" data-bind="click: printingLinkCallback, text: printingTexts.link"></a>
<!-- ko if: printingTexts.postfix -->
<div class="dxrdp-print-text-postfix" data-bind="text: printingTexts.postfix"></div>
<!-- /ko -->
</div>
</div>
</script><script type="text/html" id="dxrd-preview-export-options">
<div class="dxrd-preview-export-options-wrapper dxrd-preview-property-wrapper" data-bind="visible: active && visible">
<div class="dxrd-right-panel-header dxd-text-primary">
<span data-bind="text: $root.getLocalization('Export Options', 'DevExpress.XtraReports.UI.XtraReport.ExportOptions')"></span>
</div>
<div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }">
<div class="dx-fieldset" data-bind="dxMutationObserver: keyboardHelper">
<div class="dxrd-right-panel-content dxrd-export-options-content" role="tree">
<!-- ko template: { name: 'dx-propertieseditor', data: propertyGrid } -->
<!-- /ko -->
</div>
<!-- ko template: { name: 'dx-propertygrid-popoverservice', if: propertyGrid.popover, data: propertyGrid.popover } -->
<!-- /ko -->
</div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-preview-export-to">
<div class="dxrd-preview-export-toolbar-item dxrd-toolbar-item" data-bind="visible: visible">
<div class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented">
<div class="dxrd-preview-export-to dxd-button-back-color dxd-state-normal dxd-icon-highlighted"
data-bind="dxMenu: {
elementAttr: { class: 'dxrd-preview-export-to dxd-button-back-color dxd-state-normal dxd-icon-highlighted' },
disabled: disabled,
items: widget.items,
cssClass: 'dxrdp-export-to-menu',
onItemClick: click,
onSubmenuShowing: widget.onSubmenuShowing(getPopupContainer($element), $element),
onSubmenuShown: widget.onSubmenuShown,
onSubmenuHiding: widget.onSubmenuHiding,
onItemRendered: widget.onItemRendered,
tabIndex: '-1',
}">
<div data-options="dxTemplate: { name: 'item' }" data-bind="attr: { title: text }">
<!--ko if: $data.format -->
<div class="dxrd-preview-export-item-text" data-bind="text: text"></div>
<!-- /ko -->
<!--ko ifnot: $data.format -->
<div class="dxrd-preview-export-item-image-wrapper">
<div class="dxrd-preview-export-item-image" data-bind="css: imageClassName, template: imageTemplateName"> </div>
</div>
<div class="dx-menu-item-popout-container">
<div class="dx-menu-item-popout"></div>
</div>
<!-- /ko -->
</div>
</div>
</div>
<div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: hasSeparator"></div>
</div>
</script>
<script type="text/html" id="dxrd-page-brick-clickable">
<div class="dxrd-report-preview-brick" data-bind="dxclick: function(_, event){ onClick(event); event.stopPropagation(); }, style: { top: topP, left: $data.leftP, right: $data.rightP, height: heightP, width: widthP }, css: { 'dxrd-report-preview-brick-selected': $data.active, 'dxrd-report-preview-brick-selectable': !($data.bricks) }">
<!-- ko if: $data.navigation -->
<div class="dxrd-report-preview-brick-navigation" data-bind="css: {
'dxrdp-navigation-brick-drill-down' : !!navigation.drillDownKey,
'dxrdp-navigation-brick-sorting' : !!navigation.sortData,
'dxrdp-navigation-brick-sorting-desc': navigation.sortData && navigation.sortData.order === 1,
'dxrdp-navigation-brick-sorting-asc': navigation.sortData && navigation.sortData.order === 2
}"></div>
<!--/ko-->
</div>
</script>
<script type="text/html" id="dxrd-preview-page">
<div data-bind="dxLoadPanel: {
visible: loading,
position: { of: '#' + page_id }
}"></div>
<!-- ko if: $data.aiOperationInProgress -->
<div data-bind="dxAILoadingPanel: getAILoadingPanelOptions()"></div>
<!-- /ko -->
<div role="img" class="dxrd-report-preview-content dxrd-position-relative dxrd-width-100 dxrd-height-100" data-bind="attr: {'aria-label': currentPageAriaLabelImgAlt, 'id': page_id }, dxclick: clickToBrick, 'brick-selection-prog': brickSelectionProg">
<div class="dxrd-report-preview-content-loading-wrapper dxrd-background-white" data-bind="styleunit: { 'width': width + 2, 'height': height + 2 }, visible: pageLoading">
<div class="dxrd-report-preview-content-loading-panel dxrd-text-align-center" data-bind="styleunit: { 'paddingTop': height / 2.3 }">
<div class="dxrd-report-preview-content-loading-panel-text" data-bind="text: loadingText"></div>
</div>
</div>
<div data-bind="dxPreviewPageRenderer: imageOptions, visible: !pageLoading">
<!-- ko foreach: activeBricks -->
<!-- ko template: { name: "dxrd-page-brick-mobile", data: $data } -->
<!--/ko-->
<!--/ko-->
<!-- ko foreach: clickableBricks -->
<!-- ko template: { name: "dxrd-page-brick-clickable", data: $data } -->
<!--/ko-->
<!--/ko-->
<!-- ko if: !brickLoading && $data.editingFields-->
<div data-bind="dxMutationObserver: editingFieldsKeyboardHelper">
<!-- ko foreach: editingFields -->
<!-- ko template: template -->
<!--/ko-->
<!--/ko-->
</div>
<!--/ko-->
<!-- ko if: aiServicesEnabled && active -->
<div data-bind="style: { 'position': 'absolute', top: smartTagAIMenuPosition.topP, left: smartTagAIMenuPosition.leftP, right: smartTagAIMenuPosition.rightP, height: smartTagAIMenuPosition.heightP, width: smartTagAIMenuPosition.widthP }">
<div class="dxrd-control-ai-smart-tag dxd-icon-accented" data-bind="dxMenu: smartTagAIMenu">
<div class="dxrd-ai-floating-smart-tag-container">
<!-- ko if: $data.text -->
<div class="dxrd-ai-floating-smart-tag-text" data-bind="text: text"></div>
<!-- ko if: $data.items -->
<div class="dx-icon dxrd-ai-floating-smart-tag-items" data-bind="css: { 'dx-icon-spinright': !$root.rtl, 'dx-icon-spinleft': $root.rtl }"></div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: $data.icon -->
<div class="dxrd-ai-floating-smart-tag-icon">
<div data-bind="template: icon"> </div>
</div>
<!-- /ko -->
</div>
</div>
</div>
<!-- /ko -->
<!-- ko if: aiServicesEnabled && !!aiCustomDocumentStorageId -->
<div class="dxrd-report-preview-page-modified">
<span data-bind="text: translatedPageBadgeText" class="dxrd-report-preview-page-modified-text"></span>
<div data-bind="dxButton: { onClick: revertToOriginal, icon: 'revert', width: 22, height: 22 }, attr: { title: revertToOriginalBtnTxt }" class="dxrd-report-preview-page-modified-button"></div>
</div>
<!-- /ko -->
</div>
</div>
</script><script type="text/html" id="dxrp-popup-editing-field-image">
<div class="dxrp-editing-field-container" data-bind="style: containerStyle">
<div class="dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="dxclick: activateEditor, css: parentPopupClass">
<div class="dxrp-editing-field-popup-container-cloned" data-bind="dxPainter: getPainterOptions()"></div>
<!-- ko template: { name: 'dx-picture-editing-popup' } -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-picture-editing-popup">
<div class="dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen" data-bind="dxPopup: {
width: containerStyle.width,
height: containerStyle.height,
position: { boundary: popupData.getPopupContainer($element), of: popupData.getPositionTarget($element), collision: 'flipfit flipfit' },
container: popupData.getPopupContainer($element),
showTitle: false,
target: popupData.getPopupContainer($element),
deferRendering: false,
hideOnOutsideClick: true,
showCloseButton: false,
onContentReady: popupData.onContentReady,
onHiding: popupData.onHiding,
onShown: popupData.onShown,
shading: popupData.shading,
wrapperAttr: { class: 'dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen' },
animation: {
show: { type: 'slide', duration: 0, to: { opacity: 1 }, from: { opacity: 0 } },
hide: { type: 'fade', duration: 100, to: { opacity: 0 }, from: { opacity: 1 } }
},
visible: popupData.visible }, cacheElement: { action: function(elt) { setEditingFieldElement(elt); } }">
<!-- ko if: popupData.showContent -->
<!-- ko template: { name: popupData.contentTemplate, afterRender: popupData.renderedHandler } -->
<!--/ko-->
<!--/ko-->
</div>
</script><script type="text/html" id="dxrd-zoom-autofit-select-template">
<div class="dxrd-toolbar-item-zoom" data-bind="visible: visible">
<div class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" >
<div class="dxrd-toolbar-item-zoom-editor" data-bind="dxSelectBox: {
items: widget.dataSource, value: widget.value, onValueChanged: widget.onValueChanged,
displayExpr: widget.displayExpr, displayCustomValue: true, acceptCustomValue: true,
onCustomItemCreating: widget.onCustomItemCreating, useItemTextAsTitle: true,
width: 140,
dropDownOptions: {
container: getPopupContainer($element),
position: { my: 'left top', at: 'left bottom', of: $element },
wrapperAttr: { class: 'dx-zoom-selectbox-popup-wrapper' }
}, tabIndex: '-1', inputAttr: widget.inputAttr }">
</div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-preview-toolbar-scrollable">
<div class="dxrd-toolbar-wrapper dxrdp-toolbar-scrollable dx-shadow-top dxd-back-secondary-invariant" data-bind="dxScrollView: { showScrollbar: 'onHover', direction: 'horizontal', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }">
<div class="dxrd-toolbar" role="toolbar" data-bind="keyDownActions: actionLists, dxMutationObserver: keyboardHelper">
<div id="dxrd-preview-toolbar-live-region" class="dxrd-visually-hidden" aria-live="polite" aria-atomic="true"></div>
<div class="dx-accessibility-container-background dxd-back-accented"></div>
<!-- ko template: {name: 'dxrd-toolbar-tmplt', data: actionLists.toolbarItems } -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dxrd-preview-breadcrumb">
<!-- ko if: listItems.length > 1 -->
<div class="dxrd-breadcrumbs-wrapper" data-bind="dxMutationObserver: keyboardHelper" aria-label="Breadcrumbs"
role="navigation">
<!-- ko foreach: listItems -->
<!-- ko if: $index() !== ($parent.listItems.length - 1) -->
<a class="dxrd-breadcrump-link dxrd-breadcrumb-item dxd-text-accented dx-accessibility-border-accented"
data-bind="click: function(s, e) { $parent.onClick($data.position); }">
<span data-bind="text: $data.displayText"></span>
</a>
<span class="dxrd-breadcrumb-item-seperator"
data-bind="template: { name: 'dxrd-svg-preview-breadcrumbs_seperator' }">
</span>
<!-- /ko -->
<!-- ko if: $index() === ($parent.listItems.length - 1) -->
<div class="dxrd-breadcrumb-item dxd-text-primary dx-accessibility-border-accented" aria-current="location">
<span data-bind="text: $data.displayText"></span>
</div>
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-preview-search">
<div role="search" aria-haspopup="listbox" class="dxrd-preview-search-wrapper" data-bind="visible: active && visible, dxMutationObserver: keyboardHelper">
<div id="dxrd-preview-search-live-region" class="dxrd-visually-hidden" aria-live="polite" aria-atomic="true"></div>
<!-- ko with: model.getViewModel() -->
<div class="dxrd-preview-search-tab-header">
<div class="dxrd-right-panel-header dxd-text-primary">
<span data-bind="text: headerText"></span>
</div>
<div class="dxrd-preview-search-tab-editor-button-container">
<div class="dxrd-preview-search-editor dx-searcheditor" data-bind="dxTextBox: searchEditor"></div>
<div data-bind="dxButton: buttons.searchButton" class="dxrd-preview-search-button"></div>
</div>
<div class="dxrd-preview-search-tab-header-text">
<div class="dxrd-preview-search-checkbox" data-bind="dxCheckBox: matchCaseEditor"></div>
<div class="dxrd-preview-search-checkbox dxrd-preview-search-checkbox-second" data-bind="dxCheckBox: matchWholeWordEditor"></div>
</div>
</div>
<!-- ko if: (searchResultCount > 0 || loading) -->
<div class="dxrd-preview-search-result-wrapper">
<div class="dxrd-preview-search-result-header dxd-border-primary dxd-text-primary">
<div class="dxrd-preview-search-tab-header dxrd-preview-search-indicator-group">
<div class = "dxrd-preview-search-results dxrd-preview-search-result-text" data-bind="attr: { id: searchResultHeaderId, 'aria-busy': loading ? 'true' : 'false' }">
<span class="dxrd-preview-search-result-text-bold" data-bind="text: searchResultCount"></span> 
<span data-bind="text: resultsInText"></span> 
<span class="dxrd-preview-search-result-text-bold" data-bind="text: searchResultPageCount"></span> 
<span data-bind="text: resultsPagesText"></span>
</div>
<div class="dxrd-preview-search-results-navigation">
<div class="dxrdp-search-loading" data-bind="dxLoadIndicator: { visible: loading }"></div>
<div data-bind="dxButton: buttons.upButton " class="dxrd-preview-search-results-navigation-button dx-searcheditor-button dx-widget dx-dropdowneditor-button dxd-icon-highlighted dx-shape-standard"></div>
<div data-bind="dxButton: buttons.downButton " class="dxrd-preview-search-results-navigation-button dx-searcheditor-button dx-widget dx-dropdowneditor-button dxd-icon-highlighted dx-shape-standard"></div>
</div>
</div>
</div>
<div class="dx-accessibility-container-background dxd-back-accented"></div>
<div class="dxrd-preview-search-result dxd-border-accented" data-bind="dxList: { dataSource: searchResultDataSource, pageLoadMode: 'scrollBottom', focusStateEnabled:false, hoverStateEnabled:false, onItemRendered: onItemRendered, noDataText: '', encodeNoDataText: true }, attr: { 'aria-labelledby': searchResultHeaderId }">
<div class="dxrd-preview-search-result-item dxd-list-item-back-color dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented"
data-bind="dxAction: { model: data, action: itemClickAction }, attr: attr"
data-options="dxTemplate : { name: 'item' }"
>
<div class="dx-accessibility-field-background dxd-back-accented"></div>
<div class="dxrd-preview-search-tab-item-text propertygrid-editor-displayName dxd-text-primary" data-bind="text: data.text"></div>
<div class="dxrd-preview-search-tab-item-info dxd-text-primary" data-bind="text: info"></div>
</div>
</div>
</div>
<!-- /ko -->
<!-- ko if: (searchCompleted && searchResultCount == 0) -->
<div class="dxrd-preview-search-result-header dxd-border-primary dxd-text-primary">
<div class="dxrd-preview-search-tab-header dxrd-preview-search-indicator-group">
<div data-bind="text: noResultText" class = "dxrd-preview-search-result-text">
</div>
</div>
</div>
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-preview-ai-panel">
<div id="dxrd-preview-ai-panel-id" class="dxrd-preview-ai-panel" data-bind="visible: active && visible">
<!-- ko with: model.getViewModel() -->
<div class="dxrd-right-panel-header dxd-text-primary">
<span data-bind="text: aiPanelHeaderLabel"></span>
</div>
<div class="dxrd-preview-ai-panel-wrapper dx-editors">
<div class="dx-fieldset">
<div class="dx-field dxrd-preview-ai-select-box">
<label class="dxrd-preview-ai-form-label" for="dxrv-ai-target-select"
data-bind="text: targetContentText"></label>
<div class="dxrd-preview-ai-form-input" id="dxrv-ai-target-select"
data-bind="dxSelectBox: getSelectBoxOptions(targetSelectBoxOptions, $element)"></div>
</div>
<!-- ko if: languageSelectBoxOptions.visible -->
<div class="dx-field dxrd-preview-ai-select-box">
<label class="dxrd-preview-ai-form-label" for="dxrv-ai-language-select"
data-bind="text: targetLanguageText"></label>
<div class="dxrd-preview-ai-form-input" id="dxrv-ai-language-select"
data-bind="dxSelectBox: getSelectBoxOptions(languageSelectBoxOptions, $element)"></div>
</div>
<!-- /ko -->
<!-- ko if: pageSelectBoxVisible -->
<div class="dx-field dxrd-preview-ai-select-box">
<label class="dxrd-preview-ai-form-label" for="dxrv-ai-page-select"
data-bind="text: pageSelectText"></label>
<div class="dxrd-preview-ai-form-input" id="dxrv-ai-page-select"
data-bind="dxSelectBox: getSelectBoxOptions(pageSelectBoxOptions, $element)">
</div>
</div>
<!-- /ko -->
<div class="dx-field">
<div class="dxrd-preview-ai-buttons-wrapper">
<div class="dxrd-preview-ai-buttons dx-accessibility-focus-border-accented" data-bind="dxButton: buttons.translateTextButton">
</div>
<div class="dxrd-preview-ai-buttons dx-accessibility-focus-border-accented" data-bind="dxButton: buttons.summarizeTextButton">
</div>
</div>
</div>
</div>
<!-- ko if: resultVisible -->
<div class="dxrd-right-panel-header dxd-text-primary dxd-border-primary dxrd-ai-result-text">
<span data-bind="text: textProcessingResultHeaderText" class="dxrd-right-panel-result-text"></span>
<div role="button" class="dxrd-right-panel-copy-button dx-accessibility-focus-border-accented" tabindex="0" data-bind="event: { keydown: copyText }">
<div class="dxd-icon-highlighted" data-bind="template: { name: buttons.copyResultButton.template }, dxclick: buttons.copyResultButton.onClick"></div>
</div>
</div>
<div id="dxrd-ai-panel-text-area-id" tabindex="0" role="presentation" class="dx-accessibility-focus-border-accented dxrd-preview-ai-panel-textarea dxd-back-primary2"
data-bind="dxTextArea: { value: aiProcessingResultText,
onInput: function(e) { e.event.preventDefault(); },
onPaste: function(e) { e.event.preventDefault(); },
onKeyDown: function(e) { if (e.event.key !== 'Tab') e.event.preventDefault(); },
hoverStateEnabled: false,
inputAttr: { spellcheck: 'false' },
tabIndex: -1
}">
</div>
<!-- /ko -->
</div>
<div data-bind="dxPopup: {
width: 350,
height: 200,
shading: false,
focusStateEnabled: false,
visible: warningTextLimitPopupVisible,
container: '.dxrd-preview-ai-panel',
target: '.dxrd-preview-ai-panel',
position: {
at: 'top',
my: 'top',
collision: 'fit',
of: '.dxrd-preview-ai-panel'
},
showCloseButton: false,
showTitle: false,
wrapperAttr: { class: 'dxrd-preview-ai-panel-warning-popup' },
}">
<span data-bind="text: limitExceededWarningMsg" class="dxrd-preview-ai-panel-warning-popup-text"></span>
<div class="dxrd-preview-ai-panel-warning-popup-checkbox" data-bind="dxCheckBox: proceedForAllCheckBoxOptions">
</div>
<div class="dxrd-preview-ai-panel-warning-popup-button-group">
<div class="dxrd-preview-ai-panel-warning-popup-button dx-button-default"
data-bind="dxButton: { text: proceedNextChunkButtonText, onClick: proceedNextButtonClick }">
</div>
<div class="dxrd-preview-ai-panel-warning-popup-button"
data-bind="dxButton: { text: cancelChunkedOperationButtonText, onClick: cancelProcessButtonClick }">
</div>
</div>
</div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-preview-progress-bar">
<div role="dialog" class="dxrd-preview-progress dxd-popup-back-color dxd-back-primary2 dxd-border-primary" data-bind="visible: visible, css: cssClasses, dxMutationObserver: progressBarAccessibilityKeyboardHelper">
<div class="dxrd-preview-progress-text dxd-text-primary" data-bind="text : text"></div>
<div class="dxrd-preview-progress-bar dxd-back-primary">
<div class="dxrd-preview-progress-value dxd-preview-progress-bar-value-color dxd-back-accented" data-bind="style : { width: progress + '%' }"></div>
</div>
<div role="button" class="dxrd-preview-progress-cancel dxd-hyperlink-color dxd-border-accented dxd-text-accented dx-accessibility-list-item dx-accessibility-border-accented" data-bind="text: cancelButton.text, visible: cancelButton.visible, click: function() { cancelButton.action && cancelButton.action(); }"></div>
</div>
</script>
<script type="text/html" id="dxrd-preview-parameters">
<div class="dxrd-preview-parameters-wrapper dxrd-preview-property-wrapper" data-bind="visible: active && visible">
<div class="dxrd-right-panel-header dxd-text-primary">
<span data-bind="text: model.headerText, visible: model.showHeader"></span>
<!-- ko if: (model && !model.isEmpty) -->
<!-- /ko -->
</div>
<!-- ko if: (!model || model.isEmpty) -->
<div class="dxrd-group-header-parameters-empty dxd-text-primary" data-bind="text: model.emptyText"></div>
<!-- /ko -->
<!-- ko if: (model && !model.isEmpty) -->
<div class="dxrd-right-panel-body" id="propertiesPanel" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }, dxValidationGroup: {}, dxMutationObserver: keyboardHelper">
<div role="tree" class="dx-fieldset dxrd-right-panel-content">
<!-- ko template: { name: 'dx-propertieseditor', data: propertyGrid } -->
<!-- /ko -->
</div>
<div class="dxrd-preview-parameter-actions-container" data-bind="visible: model.showButtons">
<div class="dxrd-preview-parameter-action dxrd-preview-loading" data-bind="dxLoadIndicator: { visible: model.parametersLoading }"></div>
<!-- ko foreach: model.buttons -->
<div class="dxrd-preview-parameter-action dx-accessibility-focus-border-accented" data-bind="dxButton: $data"></div>
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-preview-pager">
<div class="dxrd-preview-pager dxrd-toolbar-item" data-bind="visible: visible">
<div class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" >
<div class="dxrd-preview-pager-selectbox" data-bind="dxSelectBox: {
dataSource: widget.dataSource, onValueChanged: widget.onValueChanged, value: widget.value,
displayExpr: widget.displayExpr, useItemTextAsTitle: true, itemTemplate: widget.itemTemplate,
searchMode: widget.searchMode, searchEnabled: widget.searchEnabled,
searchTimeout: widget.searchTimeout, disabled: widget.disabled,
dropDownOptions: {
container: getPopupContainer($element),
wrapperAttr: widget.wrapperAttr,
},
tabIndex: '-1', inputAttr: widget.inputAttr }">
</div>
</div>
<div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: $data.hasSeparator"></div>
</div>
</script>
<script type="text/html" id="dxrd-preview-document-map">
<div class="dxrd-preview-document-map dxrd-height-100 dxrd-overflow-hidden" data-bind="visible: active && visible" >
<div class="dxrd-right-panel-header dxd-text-primary">
<div class="dxrd-display-inline-block" data-bind="text: $root.getLocalization('Document Map', 'ASPxReportsStringId.DocumentViewer_RibbonCommandText_DocumentMap')"></div>
</div>
<!-- ko if: model -->
<!-- ko with: model.getViewModel() -->
<div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }, dxMutationObserver: keyboardHelper">
<div role="tree" id="documentMapTree" data-bind="treelist: treeListOptions" class="dxrd-width-100 dxrd-height-100"></div>
</div>
<!-- /ko -->
<!-- /ko -->
</div>
</script><script type="text/html" id="dxrd-report-preview">
<div class="dxrd-preview dxrd-designer-wrapper dxd-scrollbar-color dxd-surface-back-color" data-bind="visible: reportPreview.previewVisible, cssArray: [ $data.rootStyle , { 'dx-rtl' : $data.rtl, 'dx-ltr': !$data.rtl } ]">
<!-- ko foreach: parts -->
<!-- ko template: { name: templateName, data: viewModel || model }-->
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrdp-surface">
<div class="dxrd-preview-wrapper" data-bind="textCopier, css: { 'dx-rtl': rtlReport, 'dxrp-editing-fields-hightlighted': editingFieldsHighlighted } ">
<!-- ko with: progressBar -->
<!-- ko template: 'dxrd-preview-progress-bar'-->
<!-- /ko -->
<!-- /ko -->
<div class="dxrd-preview-surface" data-bind="dxMutationObserver: previewBrickKeyboardHelper">
<!-- ko if: !showMultipagePreview -->
<div class="dxrd-report-preview-holder" role="tablist">
<!-- ko with: currentPage -->
<!-- ko if: pageLoading || (!pageLoading && pageLoaded) -->
<div role="tab" class="dxrd-report-preview dx-accessibility-page-item dx-accessibility-border-accented" data-bind="autoFit: autoFitOptions, styleunit: { width: width, height: height }">
<!-- ko template: { name: 'dxrd-preview-page', afterRender: function() { delayedInit() } }-->
<!-- /ko -->
</div>
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
<!-- ko if: showMultipagePreview && !!currentPage -->
<div class="dxrd-report-preview-holder" role="list" data-bind="lazyImages: lazyImagesOptions">
<!-- ko foreach: {data: pages, afterRender: function() { delayedInit() } } -->
<!-- ko lazy: { if: pageLoading || (!pageLoading && pageLoaded) } -->
<div role="listitem" class="dxrd-report-preview dxrd-report-preview-multipage dx-accessibility-page-item dx-accessibility-border-accented" data-bind="styleunit: { 'width': width, 'height': height }, toView: { setPageActiveChangedEvent: setPageActiveChangedEvent }, css : { 'dxrd-report-preview-active': active }">
<!-- ko template: 'dxrd-preview-page'-->
<!-- /ko -->
</div>
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
<div data-bind="css: { 'dxrd-visually-hidden': !!currentPage || _aiOperationInProgress }" class="dxrd-report-preview-placeholder">
<div aria-live="assertive" aria-atomic="true" class="dxd-empty-area-placeholder-text-color dxd-text-info" data-bind="text: emptyDocumentCaption"></div>
</div>
<!-- ko if: _aiOperationInProgress -->
<div data-bind="dxAILoadingPanel: _getAILoadingPanelOptions($element)"></div>
<!-- /ko -->
</div>
<div data-bind="dxPopup: {
width: 450,
height: 150,
visible: _exportTranslatedDocPopupVisible,
container: '.dxrd-preview-surface',
target: '.dxrd-preview-surface',
position: {
at: 'center',
my: 'center',
collision: 'fit',
of: '.dxrd-preview-surface'
},
dragEnabled: false,
hideOnOutsideClick: true,
showCloseButton: false,
showTitle: false,
onHiding: function(e) { onExportPopupHiding(); }
}">
<span data-bind="text: _exportTranslatedDodumentWarningMsg" class="dxrd-preview-export-warning-popup-text"></span>
<div class="dxrd-preview-export-warning-popup-button-group">
<div class="dxrd-preview-export-warning-popup-button dx-button-default"
data-bind="dxButton: { text: _exportTranslatedDocumentButtonText, onClick: _exportTranslatedHandler }">
</div>
<div class="dxrd-preview-export-warning-popup-button"
data-bind="dxButton: { text: _exportOriginalDocumentButtonText, onClick: _exportTranslatedCancel }">
</div>
</div>
</div>
</div>
<div id="dxrd-preview-bricks-live-region" class="dxrd-visually-hidden" aria-live="polite" aria-atomic="true"></div>
</script>
<script type="text/html" id="dxrd-export-tool">
<div data-bind="dxViewerExport: $data"></div>
</script><script type="text/html" id="dxrv-daterange-editor">
<div class="dxrv-daterange-editor">
<div data-bind="cacheElement: { action: cacheElement }, dxEllipsisEditor: { value: displayValue, disabled: disabled, visible: visible, readOnly: true, inputAttr: { 'aria-label': _displayName, id: _editorInputId }, openOnFieldClick: true, buttonAction: function() { showPopup(); } }"></div>
<!-- ko template: { name: popupTemplate, data: popupModel } -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrv-daterange-editor-popup">
<div role="dialog" aria-modal="true" data-bind="dxPopup: getPopupSettings()">
<div data-bind="dxScrollView: scrollViewOptions">
<div class="dxrv-daterange-editor-popup-container" data-bind="dxMutationObserver: dialogKeyboardHelper" >
<div role="listbox" class="dxrv-daterange-editor-list dxrv-daterange-editor-item dxd-border-primary dx-accessibility-daterange-item" data-bind="attr: predefinedDateRanges.attr, dxScrollView: predefinedDateRanges.scrollViewOptions, dxMutationObserver: predefinedDateRanges.accessibilityKeyboardHelper">
<div class="dx-accessibility-container-background dxd-back-accented"></div>
<!-- ko foreach: predefinedDateRanges.items -->
<div role="option" class="dxrv-daterange-editor-list-item dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented" data-bind="attr: { 'aria-selected': selected }, css: { 'dxd-state-selected': selected }, dxAction: { action: click }">
<div class="dx-accessibility-field-background dxd-back-accented"></div>
<!-- ko text: displayName -->
<!-- /ko -->
</div>
<!-- /ko -->
</div>
<div class="dxrv-daterange-editor-item">
<div class="dx-accessibility-container-background dxd-back-accented"></div>
<!-- ko template: { name: 'dxrv-daterange-calendar', data: startRange } -->
<!-- /ko -->
</div>
<div class="dxrv-daterange-editor-item">
<div class="dx-accessibility-container-background dxd-back-accented"></div>
<!-- ko template: { name: 'dxrv-daterange-calendar', data: endRange } -->
<!-- /ko -->
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dxrv-daterange-editor-timeonly-popup">
<div role="dialog" aria-modal="true" data-bind="dxPopup: getPopupSettings(true)">
<div data-bind="dxMutationObserver: dialogKeyboardHelper" class="dxrv-timerange-editor-popup-content">
<!-- ko foreach: predefinedDateRanges.groupedItems -->
<div class="dxrv-timerange-editor-popup-container"
data-bind="dxBox: {
direction: 'row',
width: '450px',
height: 25,
onItemClick: function(e) { $parent.onRangeItemClick(e); },
onItemRendered: function(e) { $parent.onRangeItemsRendered(e); },
items: $data.map(function(item) {
return {
ratio: item.ratio,
template: item.template,
click: item.click,
selected: item.selected,
id: item.id
}
}),
}"
></div>
<!-- /ko -->
<div data-bind="dxBox: { direction: 'row', width: '450px', height: 30 }" class="dxrv-timerange-picker-container">
<div data-options="dxItem: { ratio: 1 }">
<div class="dxrv-timerange-editor-popup-picker">
<span data-bind="text: $root.getLocalization('Start', 'PreviewStringId.RangeParameters_Start')"></span>
<div data-bind="dxDateBox: { type: 'time', value: $parent.startRange.value, onValueChanged: $parent.startRange.onValueChanged, dropDownOptions: { container: $root.getPopupContainer($element) } }" class="dx-accessibility-timerange-item dxrv-timerange-picker-input-start"></div>
</div>
</div>
<div data-options="dxItem: { ratio: 1 }">
<div class="dxrv-timerange-editor-popup-picker">
<span data-bind="text: $root.getLocalization('End', 'PreviewStringId.RangeParameters_End')"></span>
<div data-bind="dxDateBox: { type: 'time', value: $parent.endRange.value, onValueChanged: $parent.endRange.onValueChanged, dropDownOptions: { container: $root.getPopupContainer($element) } }" class="dx-accessibility-timerange-item dxrv-timerange-picker-input-end"></div>
</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dxrv-daterange-calendar">
<div tabindex="0" class="dx-accessibility-calendar-item dx-accessibility-daterange-item" data-bind="dxCalendar: { value: value, onValueChanged: onValueChanged, cellTemplate: 'select_cell', height: height, min: min }">
<div class="dxrv-daterange-cell dx-calendar-cell" data-options="dxTemplate:{ name:'select_cell' }">
<span class="dxrv-daterange-cell-text" data-bind="text: text"></span>
<div data-bind="css: { 'dxd-back-accented': $parent.inRange(date) }"></div>
</div>
</div>
</script>
<script id="dxrv-range-parameter" type="text/html">
<div data-bind="dxrvDateRangeEditor: { value: value }"></div>
</script>
<script type="text/html" id="dxrd-propertieseditor">
<div data-bind="css: { 'dx-rtl' : viewmodel.rtl }">
<div class="dx-editors">
<div class="dx-fieldset dxrd-parameters-fieldset dxd-border-primary" data-bind="style: { 'display': showHorizontally ? 'flex' : 'block' }">
<!-- ko foreach: viewmodel.editors -->
<!-- ko template: editorTemplate -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-parameters-editor-content">
<!-- ko if: visible -->
<div class="dxrd-parameters-group" data-bind="template: { name: 'dxrd-propertieseditor', data: $data }, css: {
'dxrd-parameters-border' : !$data.hideBorder,
'dxrd-parameters-horizontal' : $data.showHorizontally,
}">
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-parameters-separator">
<div class="dxrd-parameters-item-separator">
<div class="dxrd-item-separator dxd-border-secondary"></div>
</div>
</script>
<script type="text/html" id="dxrd-multivalue">
<!-- ko with: value -->
<div data-bind="dxTagBox: getOptions({ dataSource: dataSource, searchEnabled: true, useItemTextAsTitle: true, searchExpr: searchExpr || ['displayValue'], value: value,
displayExpr: displayExpr || 'displayValue', valueExpr: valueExpr || 'value', multiline: false, showSelectionControls: true,
showDropDownButton: !!showDropDownButton, selectAllMode: 'allPages', selectedItems: selectedItems,
inputAttr: { 'aria-label': displayName, id: editorInputId },
disabled: disabled,
selectAllText: selectAllText,
placeholder: placeholder, maxDisplayedTags: maxDisplayedTags, showMultiTagOnly: true, dropDownOptions: { container: getPopupContainer($element), position: { boundary: getPopupContainer($element), collision: 'flipfit flipfit', of: $element, at: 'bottom', my: 'top' } } }),
dxValidator: getValidatorOptions ? getValidatorOptions(validatorOptions || { validationRules: validationRules || [] }) : (validatorOptions || { validationRules: validationRules || [] })">
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-multivalue-editable">
<!-- ko if: value -->
<div class="dxrd-editor" data-bind="visible: visible">
<div data-bind="dxCollectionEditor: { values: value, info: info, level: level, displayName: $root.getLocalization(displayName) }">
<div data-bind="template: { name: 'dx-propertieseditor', data: getProperties() }"></div>
</div>
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-parameters-property-editor">
<div class="dx-editor" data-bind="visible: visible">
<div class="dx-group" data-bind="dxdAccordion: { collapsed: collapsed, alwaysShow: alwaysShow, setCollapsed: setCollapsed, getCollapsed: getCollapsed, setCollapsedChangedEvent: setCollapsedChangedEvent }">
<div class="dx-editor-header" data-bind="css: { 'dxrd-empty-header': hideEditorHeader }">
<!-- ko ifnot: $data.hideEditorHeader -->
<div class="dx-field" data-bind="attr: {
role: 'treeitem',
'id': isComplexEditor && headerId,
'aria-owns': isComplexEditor && contentId,
'aria-expanded': isComplexEditor && (alwaysShow || !collapsed ? 'true' : 'false') },
css: {
'dxrd-complex-editor dxrd-accessibility-accordion-trigger dx-accessibility-focus-border-accented': isComplexEditor,
'dxrd-vertical-label': editorOptions && editorOptions.hasVerticalLabel
}">
<div class="dx-field-label dxrd-group-label dxd-back-secondary dx-accordion-header dxd-text-primary" data-bind="styleunit: padding, css: {
'dx-accordion-empty': templateName === 'dx-emptyHeader',
'dxd-back-secondary': isGroupLabel,
'dx-accordion-hide-collapsing-image': alwaysShow
}">
<!-- ko if: isComplexEditor -->
<div data-bind="enable: templateName === 'dx-emptyHeader'">
<!-- ko ifnot: $data.alwaysShow -->
<div class="dx-collapsing-image dxrd-display-inline-block" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed }"></div>
<!-- /ko -->
<!-- ko if: !!$data.textToSearch -->
<div class="dx-group-header-font" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName }"></div>
<!-- /ko -->
<!-- ko ifnot: !!$data.textToSearch -->
<div class="dx-group-header-font" data-bind="text: displayName, attr: { 'title': displayName }"></div>
<!-- /ko -->
</div>
<!-- /ko -->
<!-- ko if: !isComplexEditor -->
<!-- ko if: !!$data.textToSearch -->
<label class="propertygrid-editor-displayName" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName, 'for': editorInputId }, css: { 'dx-field-label-required': isRequired }, style: { fontWeight: ko.unwrap(isPropertyModified) ? 'Bold' : ''}"></label>
<!-- /ko -->
<!-- ko ifnot: !!$data.textToSearch -->
<label class="propertygrid-editor-displayName" data-bind="text: displayName, attr: { 'title': displayName, for: editorInputId }, css: { 'dx-property-required': isRequired }, style: { fontWeight: ko.unwrap(isPropertyModified) ? 'Bold' : ''}"></label>
<!-- /ko -->
<!-- /ko -->
</div>
<div class="dx-field-value" data-bind="css: { 'dxd-border-accented': $data.isPropertyHighlighted }">
<div data-bind="service: { name: 'createEditorAddOn' }"></div>
<!-- ko if: templateName !== 'dx-emptyHeader' -->
<!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</div>
<!-- ko if: isComplexEditor -->
<div class="dx-editor-content dx-accordion-content" role="group" data-bind="attr: {
'aria-labelledby': headerId,
'id': contentId,
'aria-hidden': !alwaysShow && collapsed ? 'true' : 'false'
}">
<!-- ko if: editorCreated -->
<!-- ko template: contentTemplateName -->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-picture-editing">
<div class="dx-picture-editing">
<canvas data-bind="zoom: painter.scale"></canvas>
<div class="dx-picture-editing-active" data-bind="dxPopup: {
width: 48, height: 'auto',
wrapperAttr: { class: 'dx-picture-editing-active' },
position:{ my: 'left top', at: 'right top', boundary: getPopupContainer($element), of: element, collision: 'fit fit', offset: '1 -1' },
container: shadingEnabled ? '.dx-overlay-wrapper.dx-picture-edit-popup-content-fullscreen' : getPopupContainer($element),
target: getPopupContainer($element),
showTitle: false,
onContentReady: onContentReady,
showCloseButton: false,
animation: {},
shading: false,
visible: true
}">
<div data-options="dxTemplate: { name: 'content' }">
<div class="dx-picture-editing-toolbar" data-bind="foreach: actions">
<div class="dx-picture-editing-toolbar-item" data-bind="dxclick: action, attr: { title: title }">
<div class="dx-picture-editing-toolbar-item-icon" data-bind="template: { name: icon }"> </div>
</div>
<!-- ko template: { if: $data.template, name: $data.template, data: $data.templateOptions }-->
<!-- /ko -->
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-painter">
<div class="dx-painter">
<canvas data-bind="zoom: scale"></canvas>
</div>
</script>
<script type="text/html" id="dx-picture-editing-toolbar-popup">
<div class="dx-picture-edit-popup-content" data-bind="dxPopover: {
width: width,
height: height,
wrapperAttr: { class: 'dx-picture-edit-popup-content' },
hideOnOutsideClick: hideOnOutsideClick,
onShown: onShown,
onHidden: onHidden,
onContentReady: onContentReady,
position: { my: 'left top', at: 'right top', boundary: $root.getPopupContainer($element), of: getPositionTarget($element), collision: 'flipfit fit', offset: '-10 0' },
container: getPositionTarget($element),
showTitle: false,
target: getPositionTarget($element),
showCloseButton: false,
shading: false,
animation: {},
visible: visible }">
<!-- ko template: { name: contentTemplate, data: contentData } -->
<!--/ko-->
</div>
</script>
<script type="text/html" id="dx-picture-editing-brush-options">
<div class="dx-picture-editing-brush-options">
<div class="dx-picture-editing-line-width">
<div class="dx-picture-editing-text" data-bind="text: brushWidthText"></div>
<div class="dx-picture-editing-line-width-slider" data-bind="dxSlider: { min: 1, max: 9, value: lineWidth, onValueChanged: onLineWidthChanged,
label: { visible: true },
tooltip: { enabled: true, showMode: 'always', position: 'bottom' } }"></div>
</div>
<div class="dx-picture-editing-line-color">
<div class="dx-picture-editing-text" data-bind="text: brushColorText"></div>
<div class="dx-picture-editing-brush-options-colors" data-bind="foreach: colors">
<div class="dx-picture-editing-brush-options-color" data-bind="css: { selected: isSelected }">
<div class="dx-picture-editing-brush-options-color-cell" data-bind="style: { background: value }, dxclick: action"></div>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-picture-editing-sizemode-alignment">
<div class="dx-picture-editing-sizemode-alignment">
<div class="dx-picture-editing-sizemode">
<div class="dx-picture-editing-text" data-bind="text: sizeModeText"></div>
<div class="dx-picture-editing-sizemode-values" data-bind="foreach: { data: sizeModeValues }">
<div class="dx-picture-editing-sizemode-alignment-value" data-bind="css: { selected: isSelected }, template: iconTemplate, dxclick: action, attr: { title: attrTitle }">
</div>
</div>
</div>
<div class="dx-picture-editing-alignment">
<div class="dx-picture-editing-text" data-bind="text: alignmentText"></div>
<div class="dx-picture-editing-alignment-values" data-bind="foreach: { data: alignmentValues }">
<div class="dx-picture-editing-sizemode-alignment-value" data-bind="css: { selected: isSelected }, template: iconTemplate, dxclick: action, , attr: { title: attrTitle }">
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-picture-editing-imagepickerwithfilter">
<div class="dx-picture-editing-filtercontent" data-bind="styleunit: { width: contentWidth }">
<div class="dx-picture-editing-filtercontent-editor" data-bind="dxTextBox: { value: filter, valueChangeEvent: 'keyup', onValueChanged: onFilterChanged, placeholder: searchPlaceholder, showClearButton: true }"></div>
<div class="dx-picture-editing-filtercontent-images">
<!-- ko template: 'dx-picture-editing-imagespicker' -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-picture-editing-imagespicker">
<div class="dx-picture-editing-imagescontainer dxd-text-primary" data-bind="styleunit: { width: contentWidth }, dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true }">
<!-- ko foreach: images -->
<div class="dx-picture-editing-block dxd-state-normal dxd-back-highlighted" data-bind="styleunit: { width: width + 10 }, visible: visible, click: action">
<div class="dx-picture-editing-block-image" data-bind="styleunit: { width: width, height: height }, style: { backgroundImage: 'url(' + (url || data) + ')' }"></div>
<!-- ko if: $data.text-->
<!-- ko if: $parent.filterEnabled -->
<div class="dx-picture-editing-block-text" data-bind="searchHighlighting: { text: text, textToSearch: filter }, attr: { title: text }"></div>
<!-- /ko -->
<!-- ko ifnot: $parent.filterEnabled -->
<div class="dx-picture-editing-block-text" data-bind="text: text, attr: { title: text }"></div>
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</script><script type="text/html" id="dx-selectbox">
<div data-bind="dxSelectBox: getOptions({ dataSource: values, value: value, valueExpr: 'value', displayExpr: 'displayValue', displayCustomValue: true, disabled: disabled, useItemTextAsTitle: true, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, dropDownOptions: { container: $root.getPopupContainer($element) }, popupPosition: { boundary: $root.getPopupContainer($element) }, inputAttr: { 'aria-label': displayName, id: editorInputId } }),
dxValidator: getValidatorOptions ? getValidatorOptions(validatorOptions || { validationRules: validationRules || [] }) : (validatorOptions || { validationRules: validationRules || [] })"></div>
</script>
<script type="text/html" id="dxrdv-signature">
<div data-bind="dxSelectBox: getOptions({ dataSource: values, value: value, itemTemplate: 'signature', displayExpr: 'displayName', valueExpr: 'key', showClearButton: true, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, dropDownOptions: { minWidth: '300px', container: $root.getPopupContainer($element) }, inputAttr: { 'aria-label': displayName, id: editorInputId } }), dxValidator: { validationRules: $data.validationRules || [] }">
<div class="dxrdv-signature-editor-item" data-options="dxTemplate: { name: 'signature' }">
<div class="dxrdv-signature-editor-item-image">
<!-- ko if: image -->
<img data-bind="attr: { src: image }"/>
<!-- /ko -->
<!-- ko ifnot: image -->
<!-- ko template: 'dxrd-svg-preview-signature_img_placeholder' -->
<!-- /ko -->
<!-- /ko -->
</div>
<div class="dxrdv-signature-editor-item-info">
<!-- ko foreach: fields -->
<div class="dxrdv-signature-editor-item-info-field" data-bind="attr: { title: value }">
<span class="dxrdv-signature-editor-item-info-field-label" data-bind="text: label"></span>
<span data-bind="text: value"></span>
</div>
<!-- /ko -->
</div>
</div>
</div>
</script><script type="text/html" id="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>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="dxcd-toolbar">
<div class="dxrd-toolbar-wrapper">
<div class="dxrd-toolbar" data-bind="template: {name: 'dxrd-toolbar-tmplt', data: actionLists.getViewModel().toolbarItems }"></div>
</div>
</script>
<script type="text/html" id="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 -->
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="dxcd-collection-item">
<!-- ko if: selectedItem -->
<div data-bind="dxPropertyGrid: { target: selectedItem, editorsInfo: { editors: editors }, level: 1 }"></div>
<!--/ko -->
</script>
<script type="text/html" id="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 -->
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="dxcd-panes-editor">
<div data-bind="dxSelectBox: getOptions({ dataSource: $root.panes, value: value, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true })"></div>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="dxcd-axisX-editor">
<div data-bind="dxSelectBox: getOptions({ dataSource: $root.axisX, value: value, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true })"></div>
</script>
<script type="text/html" id="dxcd-axisY-editor">
<div data-bind="dxSelectBox: getOptions({ dataSource: $root.axisY, value: value, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true })"></div>
</script>
<script type="text/html" id="dxcd-datasource">
<!-- ko with: generateOptions($root.chartDataSources, $root.getPopupContainer($element)) -->
<div data-bind="dxSelectBox: $data"></div>
<!-- /ko -->
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="dxcd-viewContent">
<div data-bind="dxPropertyGrid: { target: contentValue, level: level + 1, parentDisabled: disabled }"></div>
</script>
<script type="text/html" id="dxcd-summaryfunction">
<div class="dx-editor" data-bind="visible: visible">
<div data-bind="dxCollectionEditor: options">
</div>
</div>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="dxcd-maxSize">
<div data-bind="dxNumberBox: getDependencyOptions({ value:value, showSpinButtons:true, disabled:disabled }, 'min', 'minSize'), dxValidator: { validationRules: validationRules || [] }"></div>
</script>
<script type="text/html" id="dxcd-minSize">
<div data-bind="dxNumberBox: getDependencyOptions({ value:value, showSpinButtons:true, disabled:disabled }, 'max', 'maxSize'), dxValidator: { validationRules: validationRules || [] }"></div>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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>
</script><script type='text/html' id='dxrd-band-coordinate-grid-selection'>
<!-- ko with: surface -->
<div data-bind="styleunit: { 'height': height, 'width': $parent.width, top: absolutePosition.y }, css: { 'dxrd-band-content-selected 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 -->
</script>
<script type="text/html" id="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 -->
</script>
<script type="text/html" id="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 -->
</script>
<script type="text/html" id="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 -->
</script><script type="text/html" id="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 -->
</script>
<script type="text/html" id="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 -->
</script>
<script type="text/html" id="dxrd-bandselection-content">
<!-- ko ifnot: collapsed -->
<!-- ko foreach: controls -->
<!-- ko template: { name: $data.selectiontemplate } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</script><script type='text/html' id='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 -->
</script>
<script type="text/html" id="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 -->
</script>
<script type="text/html" id="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 -->
</script>
<script type="text/html" id="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 -->
</script>
<script type="text/html" id="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 -->
</script><script type="text/html" id="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>
</script><script type="text/html" id="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>
</script>
<script type="text/html" id="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 -->
</script>
<script type="text/html" id="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 -->
</script>
<script type="text/html" id="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 -->
</script>
<script type="text/html" id="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 -->
</script>
<script type="text/html" id="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 -->
</script><script type='text/html' id='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 --></script>
<script type='text/html' id='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>
</script>
<script type='text/html' id='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>
</script>
<script type='text/html' id='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>
</script>
<script type='text/html' id='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></script>
<script type='text/html' id='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></script>
<script type='text/html' id='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>
</script>
<script type='text/html' id='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>
</script>
<script type='text/html' id='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>
</script>
<script type='text/html' id='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>
</script>
<script type="text/html" id="dxrd-crosstab-cell">
<div class="dxrd-crosstab-cell dxrd-control" data-bind="event: { dblclick: function() { isEditable() && $root.inlineTextEdit.show($element) } }, style: { visibility: (selected() || focused()) ? 'inherit' : 'hidden'}, css: {'dxrd-selected 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>
</script>
<script type="text/html" id="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 -->
</script>
<script type='text/html' id='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></script>
<script type='text/html' id='dxrd-crosstab'>
<div class="dxrd-crosstab dxrd-control" data-bind="event: { dblclick: function() { $root.inlineTextEdit.show($element) } }, style: { visibility: (selected() || focused()) ? 'inherit' : 'hidden'}, css: {'dxrd-selected 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>
</script>
<script type='text/html' id='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></script>
<script type='text/html' id='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>
</script>
<script type='text/html' id='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>
</script>
<script type='text/html' id='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></script>
<script type='text/html' id='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>
</script>
<script type='text/html' id='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></script>
<script type='text/html' id='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>
</script>
<script type='text/html' id='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>
</script>
<script type='text/html' id='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>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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>
</script><script type='text/html' id='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></script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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>
</script><script type='text/html' id='dxrd-report'>
<div class="dxrd-surface" data-bind="styleunit: { 'width': Math.min($data.pageWidth() + $data.maxMarkerWidth() + $root.verticalScrollOffset() , $root.surfaceSize()) }, css: { 'dxrd-surface-rtl': rtl() }, click: function(surface, e) { !$root.selection.disabled() && $root.selection.clickHandler($root.selection.dropTarget ? null : surface, e); e.stopPropagation(); }, 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>
</script>
<script type='text/html' id='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>
</script>
<script type='text/html' id='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 --></script>
<script type='text/html' id='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>
</script>
<script type='text/html' id='dxrd-subreport-selection'>
<div class="dxrd-control" data-bind="event: { dblclick: function (control, e) { $root.navigateByReports.goToSubreport(control); } }, visible: isSelected, css: {'dxrd-selected 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></script>
<script type='text/html' id='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>
</script>
<script type='text/html' id='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, resizing: $root.resizeHandler.resizing, 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, resizing: $root.resizeHandler.resizing, 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>
</script>
<script type='text/html' id='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>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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"> # </div>
</td>
</tr>
</table>
</div>
</div>
<!-- /ko -->
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="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>
</script><script type='text/html' id='dxrd-textcontrol-content'>
<div class="dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-width-100" data-bind="styleunit: { lineHeight: contentHeightWithoutZoom }">
<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></script>
<script type='text/html' id='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>
</script>
<script type='text/html' id='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>
</script>
<script type='text/html' id='dxrd-calculatedfield-content'>
<div data-bind="with: propertyGrid">
<!-- ko foreach: getEditors() -->
<!-- ko template: editorTemplate -->
<!-- /ko -->
<!-- /ko -->
</div></script>
<script type='text/html' id='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, aiExpressionGenerator: $root.aiExpressionGenerator }"></div>
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</div>
</script>
<script type='text/html' id='dxrd-aipanelwrapper'>
<div class="dxrd-properties-wrapper dxrd-height-100 dxrd-overflow-hidden dxrd-aipanel" data-bind="visible: active && visible" >
<!-- ko if: model.visible -->
<div class="dxrd-right-panel-header dxd-text-primary">
<div class="dxrd-right-panel-floating-header" data-bind="text: text"></div>
<!-- ko with: model -->
<!-- ko if: fakePreviewButtonVisible -->
<div class="dxrd-right-panel-header-button" data-bind="dxButtonWithTemplate: { onClick: showPreviewWithFakeData, text: fakePreviewButtonText, icon: 'dxrd-svg-operations-ai', iconClass: 'dx-image-ai' }, attr: { title: fakePreviewButtonTitle }">
</div>
<!-- /ko -->
<!-- /ko -->
</div>
<div class="dxrd-properties-grid dxd-border-primary dxrd-top-80px" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true }" >
</div>
<!-- /ko -->
</div></script>
<script type='text/html' id='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>
</script>
<script type="text/html" id="dxrd-expressions-tab">
<div class="dxrd-properties-wrapper dxrd-expressions-tab" data-bind="visible: active && visible">
<div class="dxrd-properties-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>
</script><script type="text/html" id="dx-treelist-action-container-with-rename">
<div class="dx-treelist-action-container" data-bind="visible: !inRenameMode && (isSelected || isHovered), click: function(s, e) { e.stopPropagation(); }">
<!-- ko template: actionsTemplate -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="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>
</script><script type='text/html' id='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 dxrd-right-panel-floating-header" data-bind="text: $root.getLocalization('Field List', 'ReportStringId.UD_Title_FieldList')"></div>
<!-- ko if: $data.allowAddDataSource -->
<div id="btn-add-dataSource" class="dxrd-right-panel-header-button" 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></script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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: hasRegisteredService() -->
<!-- ko with: 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(); },
disabled: isDisabled(),
icon: icon,
iconClass: iconClass },
attr: { title: $root.getLocalization('Localize with AI', 'ASPxReportsStringId.ReportDesigner_LocalizationEditorTranslate') }"></div>
<!-- /ko -->
<!-- /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="dxAILoadingPanel: getLoadPanelOptions($element)"></div>
</div>
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-reportexplorerwrapper">
<div class="dxrd-fieldslist-wrapper dxrd-height-100 dxrd-overflow-hidden" data-bind="visible: active && visible" >
<div class="dxrd-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>
</script><script type='text/html' id='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>
</script>
<script type='text/html' id='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>
</script>
<script type='text/html' id='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 --></script>
<script type="text/html" id="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 -->
</script>
<script type="text/html" id="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>
</script><script type='text/html' id='dxrd-scripts'>
<div class="dxrd-scripts" data-bind="visible: editorVisible, template: 'dxrd-scripts-addon'">
</div>
</script>
<script type="text/html" id="dxrd-context-menu-item">
<div class="dx-context-menu" data-bind="css: {'dx-context-menu-flex': !($data.items) }">
<!-- ko if: $data.imageTemplateName -->
<div class="dx-context-menu-icon">
<!-- ko template: { name: $data.imageTemplateName } -->
<!-- /ko -->
</div>
<!-- /ko -->
<div class="dx-context-menu-text" data-bind="text: $data.displayText ? $data.displayText() : $data.text">
</div>
<!-- ko if: $data.items -->
<div class="dx-context-menu-group-icon">
<!-- ko template: { name: 'dxrd-svg-preview-next_page' } -->
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</script><script type="text/html" id='dxrd-error-panel'>
<div class="dxrd-error-panel dxd-text-primary dxd-back-primary2" data-bind="style: _position, css: { 'collapsed': collapsed }, resizable: _resizableOptions">
<div class="dxrd-width-100 dxrd-height-100" data-bind="style: { display: $data.collapsed() ? 'none' : 'block' }">
<div class="dxrd-error-panel-header dxd-border-primary dxd-back-primary2">
<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.getIconTemplateByErrorCategory($data.data) }, attr: { title: $parent.getTitleByErrorType($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>
</script><script type="text/html" id="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 -->
</script>
<script type="text/html" id="dxrd-navigation-panel-template-content">
<div class="dxrd-navigation-panel-wrapper" data-bind="style: { width: $root.surfaceSize() ? $root.surfaceSize() - 85 + 'px' : 'auto' }">
<div data-bind="dxTabs: { dataSource: tabs, selectedIndex: selectedIndex, showNavButtons: false, scrollingEnabled: true, scrollByContent: true }">
<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>
</script><script type="text/html" id="dxrd-parameters-dialog">
<div data-bind="css: 'dxrd-reportdialog dxrd-parameters-dialog dx-editors dx-widget ' + popupCss, dxPopup: {
wrapperAttr: { class: 'dxrd-reportdialog dxrd-parameters-dialog dx-editors dx-widget ' + popupCss },
showTitle: true,
width: '85%',
height: '85%',
maxWidth: maxWidth,
maxHeight: maxHeight,
title: $root.getLocalization(title),
visible: visible,
toolbarItems: buttons,
showCloseButton: true,
fullScreen: false,
container: container($element),
position: { of: container($element) }
}">
<div class="dxrd-parameters-popup-content">
<!-- ko template: contentTemplate -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dxrd-report-parameters-dialogs">
<!-- ko if: $data -->
<!-- ko template: { name: 'dxrd-parameters-dialog', data: _addParametersDialog } -->
<!-- /ko -->
<!-- ko template: { name: 'dxrd-parameters-dialog', data: _editParametersDialog } -->
<!-- /ko -->
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-parameter-edit">
<div data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<div class="dxrd-parameter-edit-content">
<div class="dxrd-parameter-edit-content-grid dxrd-parameters-properties" data-bind="template: { name: 'dx-propertieseditor', data: _propertiesGrid }"></div>
<!-- ko if: _selectedParameterSettings -->
<div class="dxrd-parameter-edit-content-grid dxrd-parameters-settings" data-bind="template: { name: 'dx-propertieseditor', data: _settingsGrid }"></div>
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dxrd-parameters-content">
<div class="dxrd-parameters-content">
<div class="dxrd-parameters-content-list-wrapper">
<div class="dx-collectioneditor-actions-wrapper">
<!-- ko foreach: addButtons -->
<!-- ko if: visible && ko.unwrap($root.canAddItems) -->
<div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: onClick, icon: icon, iconClass: iconClass }, attr: { title: title }"></div>
<!-- /ko -->
<!-- /ko -->
<div class="dx-collectioneditor-action-separator"></div>
<!-- ko foreach: moveButtons -->
<!-- ko if: visible && ko.unwrap($root.canAddItems) -->
<div class="dx-collectioneditor-action dx-collectioneditor-action-right dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: onClick, disabled: $parent.isDisabledButton(name), icon: icon, iconClass: iconClass }, attr: { title: title }"></div>
<!-- /ko -->
<!-- /ko -->
</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>
</script>
<script type="text/html" id="dxrd-parameter-editing-collection-item">
<div class="dxrd-parameter-editing-collection-item" data-bind="text: $data.value().name"></div>
</script>
<script type="text/html" id="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 -->
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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 -->
</script>
<script type="text/html" id="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,
hideButtons: !ko.unwrap($root.canAddItems)
}">
<div data-bind="template: { name: 'dx-propertieseditor', data: getProperties({ level: level }) }"></div>
</div>
</div>
</script><script type="text/html" id="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>
</script>
<script type="text/html" id="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>
</script>
<script id="dxrd-savereport-dialog-content" type="text/html">
<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>
</script>
<script id="dxrd-savereport-dialog-content-light" type="text/html">
<div class="dxrd-reportdialog-easy-content" data-bind="text: saveText"></div>
</script>
<script id="dxrd-openreport-dialog-content" type="text/html">
<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>
</script><script type="text/html" id="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>
</script><script type="text/html" id="dxrd-smart-tag-editor">
<!-- ko if: editorTemplate !== 'dx-commonCollection' -->
<div class="dx-editor" data-bind="visible: visible">
<div class="dx-field" data-bind="css: { 'dx-field-flex dxrd-display-flex': (templateName === 'dx-boolean'), 'dx-field-block dxrd-display-block': (templateName !== 'dx-boolean') }">
<!-- ko if: templateName !== 'dx-boolean'-->
<label class="dxa-smarttag-editor-displayName"
data-bind="text: displayName, attr: { 'title': fullDisplayName, 'for': editorInputId }, css: { 'dx-property-required': isRequired }"></label>
<!-- /ko -->
<div class="dx-field-value" data-bind="css: { 'dxd-border-accented': $data.isPropertyHighlighted }">
<!-- ko if: templateName !== 'dx-emptyHeader' -->
<!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- ko if: templateName === 'dx-boolean'-->
<label class="dxa-smarttag-editor-displayName"
data-bind="text: displayName, attr: { 'title': fullDisplayName, 'for': editorInputId }, css: { 'dx-property-required': isRequired }"></label>
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</script><script type='text/html' id='dxrd-smart-tag'>
<div class="dxrd-z-index-0 dxrd-position-absolute" data-bind="dxPopover: {
width: '216px',
height: 'auto',
position: { my: 'left center', at: 'right center', boundary: '.dxrd-designer-wrapper', of: '.dxrd-control-smart-tag', collision: 'flip fit', offset: '-10 0' },
container: getPopupContainer($element),
hideOnOutsideClick: true,
showTitle: false,
showCloseButton: false,
shading: false,
visible: popoverVisible,
animation: {} }">
<div class="dxa-tasks-smart-tag-content" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<div data-bind="css: { 'dx-rtl' : rtl }">
<div class="dx-editors">
<div class="dx-fieldset">
<!-- ko foreach: getEditors(false) -->
<!-- ko if: visible -->
<!-- ko template: 'dxrd-smart-tag-editor' -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<div class="dxa-smart-tag-separator" data-bind="visible: separatorVisible"></div>
<!-- ko foreach: getEditors(true) -->
<!-- ko if: visible -->
<!-- ko template: 'dxrd-smart-tag-editor' -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</div>
</div>
</div></script>
<script type="text/html" id="dxrd-smart-tags">
<div class="dxrd-control-smart-tags" data-bind="styleunit: { left: $data.position.x, top: $data.position.y, width: width }, visible: visible">
<!-- ko foreach: $data.smartTags -->
<!-- ko if: visible -->
<div class="dxrd-control-smart-tag dxd-icon-accented" data-bind="dxButtonWithTemplate: {
icon: $data.imageTemplateName,
width: $parent.width,
height: $parent.width,
iconClass: $data.imageTemplateName },
event: { dblclick: function(_, event){ event.stopPropagation(); } },
click: function(_, event){ $data.onClick(); event.stopPropagation(); }">
</div>
<!--ko if: $data.templateName -->
<!--ko template: $data.templateName -->
<!--/ko-->
<!--/ko-->
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-smart-tag-exressions">
<!--ko with: $data.expressionEditor -->
<!--ko template: { name: 'dxrd-expressioneditor-popup' } -->
<!--/ko-->
<!--/ko-->
</script><script type="text/html" id="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 -->
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="dxrd-toolbar-two-way-switch-clickable">
<div role="button" data-bind="class: 'dx-accessibility-toolbar-item dx-accessibility-focus-border-accented dxd-border-primary dxd-back-highlighted ' + (ko.unwrap($data.imageTemplateName) && 'dxrd-switch-button-with-icon' || ''), 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 }" >
<!-- ko ifnot: $data.imageTemplateName -->
<div data-bind="text: $data.displayText && $data.displayText() || $data.text, attr: { title: $data.displayText && $data.displayText() || $data.text, class: 'dxd-text-primary ' + (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>
<!-- /ko -->
<!-- ko if: $data.imageTemplateName -->
<div data-bind="attr: { title: $data.displayText && $data.displayText() || $data.text, class: 'dxd-text-primary dxrd-switch-icon ' + (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 }">
<!-- ko template: { name: $data.imageTemplateName } -->
<!-- /ko -->
<!-- ko text: $data.text -->
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-context-menu">
<div data-bind="dxContextMenu: $data.contextMenu"></div>
</script><script type="text/html" id="dxrd-expression-action">
<div data-bind="dxclick: function() { $root.activateExpressionEditor($data); }">
<span class="dxd-text-primary dx-menu-item-text" data-bind="attr: { title: title }, text: title"></span>
<div class="dx-menu-item-popout-container" data-bind="visible: $data.items && $data.items.length">
<div class="dx-menu-item-popout"></div>
</div>
</div>
</script>
<script type="text/html" id="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>
</script><script type="text/html" id="dxrd-activated-expressioneditor">
<!-- ko if: !!$data -->
<!-- ko template: 'dxrd-expressioneditor-popup' -->
<!-- /ko -->
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-expressioneditor-popup">
<div data-bind="dxPopup: {
animation: {
show: { type: 'fadeIn', duration: 700 },
hide: { type: 'fadeOut', duration: 700 }
},
showTitle: true,
wrapperAttr: { class: 'dx-expressioneditor dxrd-expressioneditor-complex dx-popup-general' },
title: title,
visible: popupVisible,
toolbarItems: buttonItems,
showCloseButton: true,
fullScreen: false,
height: '645px',
maxHeight: '95%',
width: '862px',
maxWidth: '95%',
minHeight: '400px',
minWidth: '600px',
resizeEnabled: true,
onResize: function() { $data.resizeAceEditor() },
container: getPopupContainer($element),
position: { of: getPopupContainer($element)},
onShowing: function(e) { onShowing(e); },
onHiding: function(e) { onHiding(e); },
onShown: function(e) { editor().onShown(e) }
}">
<div class="dxrd-expressioneditor-popup-content">
<div class="dxrd-expressioneditor-popup-columns">
<div class="dxrd-expressioneditor-properties dx-expressioneditor-properties dxd-back-primary2" data-bind="resizable: resizeHelper.resizable($root.resizeHandler, 'e')">
<div class="dxrd-expressioneditor-properties-content-wrapper dxd-border-secondary " data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<!-- ko foreach: properties -->
<!-- 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 dxrd-padding-left-17px" 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>
<!-- ko with: $data.adapter -->
<!-- ko if: $data.patchOptions($root.reportExplorerProvider, $root.editableObject && $root.editableObject()) -->
<div data-bind="dxExpressionEditor: { options: value, fieldListProvider: $root.reportItemsProvider, displayNameProvider: $root.expressionDisplayNameProvider && $root.expressionDisplayNameProvider(), editorTemplateName: 'dx-expressioneditor-main', popupVisible: $data.popupVisible, wrapper: $parent }"></div>
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-expressioneditor-report-items">
<!-- ko template: { name: 'dx-expressioneditor-fields', data: $data } -->
<!-- /ko -->
</script>
<script type="text/html" id="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>
</script><script type="text/html" id="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>
</script>
<script type="text/html" id="dxrd-reportSourceUrl">
<div data-bind="dxSelectBox: getOptions({ 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>
</script>
<script type="text/html" id="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 -->
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="dxrd-datasource">
<div data-bind="dxSelectBox: getEditorOptions($root.dataSourceHelper, $root.undoEngine, $root.getPopupContainer($element))"></div>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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, setCollapsed: setCollapsed, getCollapsed: getCollapsed, setCollapsedChangedEvent: setCollapsedChangedEvent }">
<div class="dxrd-group-header dx-accordion-header dxd-text-primary">
<div class="dxrd-formatting-rule-checkbox" data-bind="dxCheckBox: { value: value.selected, disabled: 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="template: { name: 'dx-propertieseditor', data: getProperties({ editorsInfo: { editors: $root.dx._static.formattingRuleSerializationsInfo }, level: level + 1, disabled: disabled }) }"></div>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="dxrd-style">
<div data-bind="dxSelectBox: new $root.dx._static.StylesEditorHeaderModel(value, $root.model, disabled, $root.getPopupContainer($element))"></div>
</script>
<script type="text/html" id="dxrd-styleContent">
<!-- ko if: value-->
<div data-bind="dxStylesEditor: { styleName: value, styles: $root.styles() }"></div>
<!--/ko -->
</script>
<script type="text/html" id="dxrd-dataBindings">
</script>
<script type="text/html" id="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 -->
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="dxrd-dataBindingsContent">
<div data-bind="template: { name: 'dx-propertieseditor', data: viewmodel }"></div>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="dxrd-lookUpValues">
<div class="dxrd-editor" data-bind="visible: visible">
<div data-bind="dxCollectionEditor: { values: value, addHandler: $root.dx._static.LookUpValue.createNew, undoEngine: $root.undoEngine, level: level, displayName: $root.getLocalization(displayName), info: info }">
<div data-bind="template: { name: 'dx-propertieseditor', data: getProperties() }"></div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-parameterContent">
<div data-bind="template: { name: 'dx-propertieseditor', data: viewmodel }"></div>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="dxrd-watermarks">
<div class="dxrd-editor" data-bind="visible: visible">
<div data-bind="dxCollectionEditor: { values: value, displayName: $root.getLocalization(displayName), allowEditItems: $root.canAddItems, level: level, info: info, _accessibilityProvider: ko.unwrap(_accessibilityProvider), addHandler: function() { return $root.watermarks().createWatermark(); } }">
</div>
</div>
</script>
<script type="text/html" id="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); },
allowEditItems: $root.parameterEditingSettings.allowEditParameterCollection,
allowReorderItems: $root.parameterEditingSettings.allowReorderParameters,
undoEngine: $root.undoEngine
}">
</div>
</div>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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="dx-collapsing-image dxrd-display-inline-block" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed }"></div>
<div class="dx-group-header-font dxd-text-primary dxrd-display-inline-block" 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>
</script>
<script type="text/html" id="dx-numeric-undo">
<div data-bind="dxNumberBox: getOptions({ value:generateValue($root.undoEngine), showSpinButtons:true, disabled:disabled, min:min, max:max }), dxValidator: { validationRules: validationRules || [] }"></div>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="dx-objectEditorContentUndo">
<!-- ko if: visible -->
<div data-bind="template: { name: 'dx-propertieseditor', data: generateValue($root.undoEngine) }"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-editOptionsEditorName">
<div data-bind="dxFieldListPicker: $data"></div>
</script>
<script type="text/html" id="dxrd-editingField-editor-treelist-item">
<div class="dx-treelist-item dxd-list-item-back-color dxd-back-highlighted" data-bind="styleunit: padding, click: toggleSelected, css: { 'dx-treelist-item-selected dxd-state-selected': isSelected }">
<div class="dx-treelist-caption">
<div class="dx-treelist-selectedcontent">
<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>
</script>
<script type="text/html" id="dxrd-name">
<div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { id: editorInputId } }), dxValidator: { validationRules: generateRules($root.controlsHelper.allControls) || [] }"></div>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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 -->
</script>
<script type="text/html" id="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 -->
</script>
<script type="text/html" id="dxrd-pivotcriteria">
<!-- ko with: $data.wrapModel($root.fieldListProvider) -->
<div data-bind="dxFilterEditor: { options: value, fieldListProvider: itemsProvider, getDisplayNameByPath: $root.getDisplayNameByPath, displayNameProvider: displayNameProvider, aiExpressionGenerator: $root.aiExpressionGenerator }"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-richtext-loadfile">
<div data-bind="dxRichTextFileEditor: { value: value, placeholderId: 'File', disabled: disabled, accept:'.rtf,.docx,.txt,.htm,.html' }"></div>
</script>
<script type="text/html" id="dxrd-image-loadfile">
<div data-bind="dxImageSourceEditor: { value: value, onValueChanged: onValueChanged, accept: 'image/*', type: 'img', disabled: disabled, inputAttr: { id: editorInputId}, showClearButton: true }"></div>
</script>
<script type="text/html" id="dxrd-pdfcontent-loadfile">
<div data-bind="dxFileImagePicker: { value: value, placeholderId: 'File', disabled: disabled, accept:'.pdf', showClearButton: true }"></div>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="dxrd-localization-combobox">
<div data-bind="dxSelectBox: { dataSource: $data.getValues(), searchEnabled: true, value: value, valueExpr: 'value', displayExpr: 'displayValue', disabled: disabled,
dropDownOptions: { container: $root.getPopupContainer($element), width: $root.calculateWithZoomFactor(357) }, inputAttr: { id: editorInputId }, popupPosition: { boundary: $root.getPopupContainer($element) }, useItemTextAsTitle: true }">
<div class="dx-localization-combobox-content" data-options="dxTemplate: { name: 'item' }">
<div class="dx-culture dx-culture-code dxd-text-info" data-bind="text: value === 'Default' ? '' : value, style: { 'fontWeight': $root.isLocalized($data.value) ? 'bold' : 'normal' }, attr: { title: value }"></div>
<div class="dx-culture" data-bind="text: displayValue, style: { 'fontWeight': $root.isLocalized($data.value) ? 'bold' : 'normal' }, attr: { title: displayValue }"></div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-tagbox">
<div data-bind="dxTagBox: {
dataSource: getValues(),
value: editorValue,
valueExpr: 'value',
displayExpr: 'displayValue',
disabled: disabled,
dropDownOptions: { container: $root.getPopupContainer($element) },
useItemTextAsTitle: true,
multiline: false,
showSelectionControls: true,
showDropDownButton: true,
selectAllText: selectAllText,
maxDisplayedTags: maxDisplayedTags,
onMultiTagPreparing: onMultiTagPreparing,
}"></div>
</script><script type="text/html" id="dxrd-page-choose-report-type">
<div class="dxrd-wizard-type-page" data-bind="css: $data._extendCssClass('type-page')">
<div class="dxrd-wizard-report-gallery" data-bind="dxList: getListOptions()"></div>
</div>
</script><script id="dxrd-page-crosstab-dataMembers" type="text/html">
<div class="dxrd-wizard-page dxrd-wizard-crosstab-select-dataMembers-page dxrd-wizard-page-treelist-accordion-style">
<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-title dxd-border-secondary dxd-back-contrast">
<div class="dxrd-wizard-field-infos-title-image" data-bind="template: _icon"></div>
<div class="dxrd-wizard-field-infos-title-content dxd-text-primary" data-bind="text: _title"></div>
</div>
<div data-bind="dxScrollView: { showScrollbar: 'onHover', height: 'auto' }">
<div data-bind="treelist: _signleFieldMemberFieldListModel" class="dxrd-width-100 dxrd-height-100"></div>
</div>
</div>
</div>
</div>
</script>
<script id="dxrd-page-crosstab-setlayout" type="text/html">
<div class="dxrd-wizard-page dxrd-wizard-crosstab-setlayout-page" data-bind="trackCursor: underCursor, css: {'dxrd-wizard-crosstab-droppable-page': isDroppable}">
<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-title dxd-border-secondary dxd-back-contrast">
<div class="dxrd-wizard-field-infos-title-image" data-bind="template: _icon"></div>
<div class="dxrd-wizard-field-infos-title-content dxd-text-primary" data-bind="text: _title"></div>
</div>
<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: _fieldName"></div>
<div class="dxrd-wizard-field-infos-values dxd-wizard-title-back-color dxd-back-secondary dxd-border-secondary" data-bind="text: _valueName"></div>
<div class="dxrd-wizard-field-infos-removebtn dxd-wizard-title-back-color dxd-back-secondary"></div>
</div>
<div data-bind="foreach: fieldInfos">
<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._crossTabFields, displayExpr: 'displayName', value: field, placeholder: $root.dx._static.selectPlaceholder(), dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true }"></div>
</div>
<div class="dxrd-wizard-field-infos-values dxd-wizard-title-back-color dxd-back-secondary dxd-border-secondary">
<div data-bind="dxSelectBox: {
dataSource: value.dataSource,
displayExpr: value.displayExpr,
placeholder: value.placeholder,
selectAllText: value.selectAllText,
selectedItems: value.selectedItems,
showDropDownButton: value.showDropDownButton,
value: value.value,
dropDownOptions: { container: $root.getPopupContainer($element) } }"></div>
</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._removeInfo($data); }}"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</script><script type="text/html" id="dxrd-page-ai-report-layout">
<div class="dxrd-wizard-type-page dxrd-page-ai-report-layout">
<!-- ko if: _showDataStructure -->
<div class="dxrd-ai-layout-section dxrd-ai-data-structure">
<div class="dxrd-ai-layout-section-title" data-bind="text: _dataStructureSectionTitle"></div>
<div class="dxrd-ai-layout-section-content dxd-border-secondary" data-bind="dxScrollView: { showScrollbar: 'onHover', height: 'auto' }">
<div data-bind="treelist: _fieldListModel"></div>
</div>
</div>
<!-- /ko -->
<div class="dxrd-ai-layout-section dxrd-ai-report-prompt">
<div class="dxrd-ai-layout-section-title" data-bind="text: _promptSectionTitle"></div>
<div class="dxrd-ai-layout-section-content dxd-border-secondary" data-bind="dxTextArea: _getPromptTextAreaOptions()"></div>
</div>
<div class="dxrd-ai-layout-section dxrd-ai-report-prompt-suggestions">
<div class="dxrd-ai-layout-section-title" data-bind="text: _suggestionsSectionTitle"></div>
<div class="dxrd-ai-layout-section-content dxd-border-secondary" data-bind="dxList: _getSuggentionListOptions()"></div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-page-colorScheme-content">
<div class="dxrd-page-color-scheme">
<!-- ko foreach: _lookupData.scheme -->
<div class="dxrd-page-color-scheme-tile" data-bind="click: function () { $parent._applyScheme($data); }, style: { backgroundColor: color }">
<div class="dxrd-page-color-scheme-tile-content">
<div class="dxrd-page-color-scheme-tile-selected dxd-border-accented" data-bind="visible: $data.selected()"></div>
<!-- ko ifnot: $data.name === 'Custom' -->
<div class="dxrd-page-color-scheme-tile-content-title" data-bind="text: displayName"></div>
<!-- /ko -->
<!-- ko if: $data.name === 'Custom' -->
<div class="dxrd-page-color-scheme-tile-content-custom">
<div class="dxrd-page-color-scheme-tile-content-title" data-bind="text: displayName"></div>
<div class="dxrd-page-color-scheme-tile-content-edit" data-bind="css: { 'dxrd-page-color-scheme-tile-content-edit-active': $data.popoverVisible() }, click: function() { $data.popoverVisible(!$data.popoverVisible()) }">
<div class="dxrd-page-color-scheme-tile-content-edit-icon" data-bind="template:'dxrd-svg-color_gear'"></div>
</div>
</div>
<div class="dxrd-page-color-scheme-colorpicker" data-bind="dxPopover: {
visible: $data.popoverVisible,
width: 'auto',
height: 'auto',
wrapperAttr: { class: 'dxrd-page-color-scheme-colorpicker' },
container: $root.getPopupContainer($element),
target: '.dxrd-page-color-scheme-tile-content-edit-icon',
position: { my: 'left center', at: 'right center', collision: 'fit', of: '.dxrd-page-color-scheme-tile-content-edit', boundary: $root.getPopupContainer($element) }
}">
<div class="dxrd-page-color-scheme-colorpicker-editor-container dxd-border-secondary">
<div data-bind="dxColorView: { value: editorColor, editAlphaChannel: true }"></div>
</div>
<div class="dxrd-page-color-scheme-colorpicker-buttons">
<div class="dxrd-page-color-scheme-colorpicker-button" data-bind="dxButton: { text: 'Cancel', onClick: function() { $data.resetColor() }}"></div>
<div class="dxrd-page-color-scheme-colorpicker-button" data-bind="dxButton: { text: 'Ok', onClick: function() { $data.applyColor() }}"></div>
</div>
</div>
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-page-colorScheme">
<div class="dxrd-wizard-page">
<!-- ko template: 'dxrd-page-colorScheme-content' -->
<!-- /ko -->
</div>
</script>
<script type='text/html' id='dxrd-page-columns'>
<div class="dxrd-wizard-page dxrd-wizard-columns-page">
<div class="dxrd-wizard-left-panel">
<div class="dxrd-wizard-list-title" data-bind="text: availableFields.caption"></div>
<div class="dx-default-border-style dxd-border-secondary">
<div class="dxrd-wizard-list" data-bind="dxList: { items: availableFields.items, selectedItems: availableFields.activeItemArray, height: 257, selectionMode: 'single', activeStateEnabled: false, onItemClick: availableFieldClick }">
<div data-options="dxTemplate : { name: 'item' }" data-bind="event: { dblclick: $parent.availableFieldDblClick }">
<div data-bind="text: displayName"></div>
</div>
</div>
</div>
</div>
<div class="dxrd-wizard-splitter">
<div class="dxrd-wizard-splitter-action dxrd-margin-top-40px" data-bind="dxButtonWithTemplate: { onClick: select, disabled: !isSelectEnable(), icon: 'dxrd-svg-operations-moveright', iconClass: 'dxrd-image-moveright' }" ></div>
<div class="dxrd-wizard-splitter-action" data-bind="dxButtonWithTemplate: { onClick: selectAll, disabled: !isSelectEnable(), icon: 'dxrd-svg-operations-moveright_all', iconClass: 'dxrd-image-moveright-all' }"></div>
<div class="dxrd-wizard-splitter-action dxrd-margin-top-44px" data-bind="dxButtonWithTemplate: { onClick: unselect, disabled: !isUnselectEnable(), icon: 'dxrd-svg-operations-moveleft', iconClass: 'dxrd-image-moveleft' }" ></div>
<div class="dxrd-wizard-splitter-action" data-bind="dxButtonWithTemplate: { onClick: unselectAll, disabled: !isUnselectEnable(), icon: 'dxrd-svg-operations-moveleft_all', iconClass: 'dxrd-image-moveleft-all' }"></div>
</div>
<div class="dxrd-wizard-right-panel">
<div class="dxrd-wizard-list-title" data-bind="text: selectedFields.caption"></div>
<div class="dx-default-border-style dxd-border-secondary">
<div class="dxrd-wizard-list" data-bind="dxList: { items: selectedFields.items, selectedItems: selectedFields.activeItemArray, height: 257, selectionMode: 'single', activeStateEnabled: false, onItemClick: selectedFieldClick }">
<div data-options="dxTemplate : { name: 'item' }" data-bind="event: { dblclick: $parent.selectedFieldDblClick }">
<div data-bind="text: displayName"></div>
</div>
</div>
</div>
</div>
</div></script>
<script type='text/html' id='dxrd-page-customizeLabel'>
<div class="dxrd-wizard-page">
<div class="dxrd-wizard-customizelabel-page dxd-border-secondary">
<div class="dxrd-wizard-customizelabel-list">
<div class="dxrd-wizard-customizelabel-head-props">
<div class="dxrd-wizard-customizelabel-select-papersize">
<span data-bind="text: $root.getLocalization('Page Size:', 'ASPxReportsStringId.ReportDesigner_Wizard_PageSize'), attr: { title: $root.getLocalization('Page Size:', 'ASPxReportsStringId.ReportDesigner_Wizard_PageSize') }"></span>
<div data-bind="dxSelectBox: { items: _labelData.paperKinds, displayExpr: 'name', value: _selectedPaperSize, itemTemplate: 'PaperSizeText', dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true ,
onOpened: function (e) {
e.component._popup.option('width', 300);
}}, attr: { title: _selectedPaperSize().name + ' - ' + $root.dx._static.CustomizeLabelPage._getPageSizeText(_selectedPaperSize().width, _selectedPaperSize().height, _selectedPaperSize().unit)}">
<div data-options="dxTemplate: { name: 'PaperSizeText' }" class="dxrd-wizard-customizelabel-select-customtemplate">
<p class="dxrd-wizard-customizelabel-select-template">
<span data-bind="text: name"></span>
<span data-bind="text: $root.dx._static.CustomizeLabelPage._getPageSizeText(width, height, unit)"></span>
</p>
</div>
</div>
</div>
<div class="dxrd-wizard-customizelabel-radiounit">
<div data-bind="dxRadioGroup:{items: _units, valueExpr: 'value', value: unit, layout: 'horizontal' }"></div>
</div>
<div class="dxrd-wizard-customizelabel-pagesizetext"><span data-bind="text: _pageSizeText"></span></div>
</div>
<div class="dxrd-wizard-customizelabel-props-container">
<div class="dxrd-wizard-customizelabel-props">
<div class="dxrd-wizard-customizelabel-pagesizetext-inline">
<span data-bind="text: $root.getLocalization('Measure Units', 'DevExpress.XtraReports.UI.XtraReport.ReportUnit') + ':', attr: { title: $root.getLocalization('Measure Units', 'DevExpress.XtraReports.UI.XtraReport.ReportUnit') + ':' }"></span>
<div data-bind="dxLocalizedSelectBox: { items: _units, valueExpr: 'value', displayExpr: 'text', value: unit, dropDownOptions: { container: $root.getPopupContainer($element) } }"></div>
</div>
<div>
<span data-bind="text: $root.getLocalization('Label Width:', 'ASPxReportsStringId.ReportDesigner_Wizard_LabelWidth'), attr: { title: $root.getLocalization('Label Width:', 'ASPxReportsStringId.ReportDesigner_Wizard_LabelWidth') }"></span>
<div data-bind="dxNumberBox: { min: 0.0, max: 999.9, showSpinButtons: true, step: _stepUnit, value: labelWidth }"></div>
</div>
<div>
<span data-bind="text: $root.getLocalization('Label Height:', 'ASPxReportsStringId.ReportDesigner_Wizard_LabelHeight'), attr: { title: $root.getLocalization('Label Height:', 'ASPxReportsStringId.ReportDesigner_Wizard_LabelHeight') }"></span>
<div data-bind="dxNumberBox: { min: 0.0, max: 999.9, showSpinButtons: true, step: _stepUnit, value: labelHeight }"></div>
</div>
<div class="dxrd-wizard-customizelabel-prop-whis-top-margin">
<span data-bind="text: $root.getLocalization('Horizontal Pitch:', 'ASPxReportsStringId.ReportDesigner_Wizard_HorizontalPitch'), attr: { title: $root.getLocalization('Horizontal Pitch:', 'ASPxReportsStringId.ReportDesigner_Wizard_HorizontalPitch') }"></span>
<div data-bind="dxNumberBox: { min: 0.0, max: 999.9, showSpinButtons: true, step: _stepUnit, value: horizontalPitch }"></div>
</div>
<div>
<span data-bind="text: $root.getLocalization('Vertical Pitch:', 'ASPxReportsStringId.ReportDesigner_Wizard_VerticalPitch'), attr: { title: $root.getLocalization('Vertical Pitch:', 'ASPxReportsStringId.ReportDesigner_Wizard_VerticalPitch') }"></span>
<div data-bind="dxNumberBox: { min: 0.0, max: 999.9, showSpinButtons: true, step: _stepUnit, value: verticalPitch }"></div>
</div>
<div class="dxrd-wizard-customizelabel-prop-whis-top-margin">
<span data-bind="text: $root.getLocalization('Top Margin:', 'ASPxReportsStringId.ReportDesigner_Wizard_TopMargin'), attr: { title: $root.getLocalization('Top Margin:', 'ASPxReportsStringId.ReportDesigner_Wizard_TopMargin') }"></span>
<div data-bind="dxNumberBox: { min: 0.0, max: 999.9, showSpinButtons: true, step: _stepUnit, value: topMargin }"></div>
</div>
<div>
<span data-bind="text: $root.getLocalization('Left Margin:', 'ASPxReportsStringId.ReportDesigner_Wizard_LeftMargin'), attr: { title: $root.getLocalization('Left Margin:', 'ASPxReportsStringId.ReportDesigner_Wizard_LeftMargin') }"></span>
<div data-bind="dxNumberBox: { min: 0.0, max: 999.9, showSpinButtons: true, step: _stepUnit, value: leftMargin }"></div>
</div>
<div>
<span data-bind="text: $root.getLocalization('Right Margin:', 'ASPxReportsStringId.ReportDesigner_Wizard_RightMargin'), attr: { title: $root.getLocalization('Right Margin:', 'ASPxReportsStringId.ReportDesigner_Wizard_RightMargin') }"></span>
<div data-bind="dxNumberBox: { min: 0.0, max: 999.9, showSpinButtons: true, step: _stepUnit, value: rightMargin }"></div>
</div>
<div>
<span data-bind="text: $root.getLocalization('Bottom Margin:', 'ASPxReportsStringId.ReportDesigner_Wizard_BottomMargin'), attr: { title: $root.getLocalization('Bottom Margin:', 'ASPxReportsStringId.ReportDesigner_Wizard_BottomMargin') }"></span>
<div data-bind="dxNumberBox: { min: 0.0, max: 999.9, showSpinButtons: true, step: _stepUnit, value: bottomMargin }"></div>
</div>
</div>
<div class="dxrd-wizard-customizelabel-pic dxd-border-secondary">
<div class="dxrd-wizard-customizelabel-pic-element"></div>
</div>
<div class="dxrd-wizard-customizelabel-labelscounttext"><span data-bind="text: _labelsCountText"></span></div>
</div>
</div>
</div>
</div></script>
<script type='text/html' id='dxrd-page-dataMember'>
<div class="dxrd-wizard-page">
<div class="dxrd-wizard-dataMember dxd-border-secondary" data-bind="dxScrollView: { showScrollbar: 'onHover', height: scrollViewHeight }">
<div data-bind="treelist: fieldListModel" class="dxrd-width-100 dxrd-height-100"></div>
</div>
</div></script>
<script type='text/html' id='dxrd-page-groups'>
<div class="dxrd-wizard-page dxrd-wizard-groups-page">
<div class="dxrd-wizard-left-panel">
<div class="dxrd-wizard-list-title" data-bind="text: fields.caption"></div>
<div class="dx-default-border-style dxd-border-secondary">
<div class="dxrd-wizard-list" data-bind="dxList: { dataSource: fields.items, selectedItems: fields.activeItemArray, height: 257, selectionMode: 'single', activeStateEnabled: false, onItemClick: fieldClick, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true }">
<div data-options="dxTemplate : { name: 'item' }" data-bind="event: { dblclick: $parent.fieldDblClick }">
<div data-bind="text: $data"></div>
</div>
</div>
</div>
</div>
<div class="dxrd-wizard-splitter">
<div class="dxrd-wizard-splitter-action" data-bind="dxButtonWithTemplate: { onClick: addNewGroup, disabled: !isCreateGroupEnabled(), icon: 'dxrd-svg-operations-moveright', iconClass: 'dxrd-image-moveright' }"></div>
<div class="dxrd-wizard-splitter-action" data-bind="dxButtonWithTemplate: { onClick: appendFieldsToGroup, disabled: !isAppendToGroupEnabled(), icon: 'dxrd-svg-operations-add', iconClass: 'dxrd-image-add' }"></div>
<div class="dxrd-wizard-splitter-action" data-bind="dxButtonWithTemplate: { onClick: removeGroup, disabled: !isRemoveGroupEnabled(), icon: 'dxrd-svg-operations-moveleft', iconClass: 'dxrd-image-moveleft' }"></div>
<div class="dxrd-wizard-splitter-action dxrd-margin-top-95px" data-bind="dxButtonWithTemplate: { onClick: moveUp, disabled: !isMoveUpEnabled(), icon: 'dxrd-svg-operations-moveup', iconClass: 'dxrd-image-moveup' }"></div>
<div class="dxrd-wizard-splitter-action" data-bind="dxButtonWithTemplate: { onClick: moveDown, disabled: !isMoveDownEnabled(), icon: 'dxrd-svg-operations-movedown', iconClass: 'dxrd-image-movedown' }"></div>
</div>
<div class="dxrd-wizard-right-panel">
<div class="dxrd-wizard-list-title" data-bind="text: groups.caption"></div>
<div class="dx-default-border-style dxd-border-secondary">
<div class="dxrd-wizard-list" data-bind="dxList: { items: groups.items, height: 257, selectionMode: 'single', selectedItems: groups.activeItemArray, activeStateEnabled: false, onItemClick: groupClick, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true }">
<div data-options="dxTemplate : { name: 'item' }" data-bind="event: { dblclick: $parent.groupDblClick }">
<div data-bind="text: fields().join(', ')"></div>
</div>
</div>
</div>
</div>
</div></script>
<script type="text/html" id="dxrd-page-masterdetail-groups-section">
<div class="dxrd-wizard-page dxrd-wizard-masterdetail-groups-page dxd-border-secondary">
<div class="dxrd-wizard-masterdetail-groups-page-section-content" data-bind="dxScrollView: { showScrollbar: 'onHover', height: '100%' }">
<div class="dx-fieldset" data-bind="foreach: _groupInfos">
<div class="dx-field dxd-back-primary">
<div class="dx-field-label" data-bind="text: displayName, attr: { 'title': displayName}"></div>
</div>
<!-- ko foreach: groups -->
<div class="dxrd-wizard-groups-item dx-field">
<div class="dxrd-wizard-groups-actions">
<div class="dxd-back-highlighted" data-bind="css: { 'dxrd-disabled-button': $parent.moveUpDisabled($index()) }, click: function(){ $parent.moveup($index()) }">
<!-- ko template: 'dxrd-svg-operations-moveup'--><!-- /ko -->
</div>
<div class="dxd-back-highlighted" data-bind="css: { 'dxrd-disabled-button': $parent.moveDownDisabled($index()) }, click: function(){ $parent.movedown($index()) }">
<!-- ko template: 'dxrd-svg-operations-movedown'--><!-- /ko -->
</div>
<div class="dxd-back-highlighted" data-bind="click: function(){ $parent.remove($index()) }">
<!-- ko template: 'dxrd-svg-operations-recycle_bin'--><!-- /ko -->
</div>
</div>
<div class="dxrd-wizard-groups-choozer">
<!-- ko template: { name: "dxrd-multivalue", data: $data } -->
<!--/ko-->
</div>
</div>
<!-- /ko -->
<!-- ko if: isCreateGroupEnabled() -->
<div class="dxrd-wizard-groups-item dx-field">
<div class="dx-field-label dxd-text-primary dxrd-width-auto" >
<div class="dxrd-wizard-groups-addgroup dxd-hyperlink-color dxd-border-accented dxd-text-accented" data-bind="text: $data.addGroupText(), attr: { 'title': $data.addGroupText() }, click: function() { $data.add() }"></div>
</div>
</div>
<!-- /ko -->
</div>
</div>
</div>
</script><script type='text/html' id='dxrd-page-masterdetail-groups'>
<div class="dxrd-wizard-page dxrd-wizard-masterdetail-groups-page">
<div class="dxrd-wizard-masterdetail-groups-page-title">
<!-- ko template: { name: 'dxrd-wizard-report-tree', data: { items: $data._reportTree, value: $data._currentPath } }-->
<!-- /ko -->
</div>
<div class="dxrd-wizard-masterdetail-groups-page-content">
<div class="dxrd-wizard-left-panel">
<div class="dxrd-wizard-list-title" data-bind="text: _fieldCaption"></div>
<div class="dx-default-border-style dxd-border-secondary dxrd-wizard-panel-content">
<!-- ko if: $data._currentFields() -->
<div class="dxrd-wizard-list" data-bind="dxList: { items: _currentFields().items, selectedItems: _currentFields().activeItemArray, height: '100%', selectionMode: 'single', activeStateEnabled: false, onItemClick: _fieldClick, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true }">
<div data-options="dxTemplate : { name: 'item' }" data-bind="event: { dblclick: $parent._fieldDblClick }">
<div data-bind="text: $data"></div>
</div>
</div>
<!-- /ko -->
</div>
</div>
<div class="dxrd-wizard-splitter">
<div class="dxrd-wizard-splitter-action" data-bind="dxButtonWithTemplate: { onClick: _addNewGroup, disabled: !_isCreateGroupEnabled(), icon: 'dxrd-svg-operations-moveright', iconClass: 'dxrd-image-moveright' }"></div>
<div class="dxrd-wizard-splitter-action" data-bind="dxButtonWithTemplate: { onClick: _appendFieldsToGroup, disabled: !_isAppendToGroupEnabled(), icon: 'dxrd-svg-operations-add', iconClass: 'dxrd-image-add' }"></div>
<div class="dxrd-wizard-splitter-action" data-bind="dxButtonWithTemplate: { onClick: _removeGroup, disabled: !_isRemoveGroupEnabled(), icon: 'dxrd-svg-operations-moveleft', iconClass: 'dxrd-image-moveleft' }"></div>
<div class="dxrd-wizard-splitter-action dxrd-margin-top-83px" data-bind="dxButtonWithTemplate: { onClick: _moveUp, disabled: !_isMoveUpEnabled(), icon: 'dxrd-svg-operations-moveup', iconClass: 'dxrd-image-moveup' }"></div>
<div class="dxrd-wizard-splitter-action" data-bind="dxButtonWithTemplate: { onClick: _moveDown, disabled: !_isMoveDownEnabled(), icon: 'dxrd-svg-operations-movedown', iconClass: 'dxrd-image-movedown' }"></div>
</div>
<div class="dxrd-wizard-right-panel">
<div class="dxrd-wizard-list-title" data-bind="text: _groupCaption"></div>
<div class="dx-default-border-style dxd-border-secondary dxrd-wizard-panel-content">
<!-- ko if: $data._currentGroups() -->
<div class="dxrd-wizard-list" data-bind="dxList: { items: _currentGroups().items, height: '100%', selectionMode: 'single', selectedItems: _currentGroups().activeItemArray, activeStateEnabled: false, onItemClick: _groupClick, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true }">
<div data-options="dxTemplate : { name: 'item' }" data-bind="event: { dblclick: $parent._groupDblClick }">
<div data-bind="text: fields().join(', ')"></div>
</div>
</div>
<!-- /ko -->
</div>
</div>
</div>
</div></script>
<script id="dxrd-page-masterdetail-select-reportdata" type="text/html">
<div class="dxrd-wizard-page dxrd-wizard-masterdetail-select-reportdata-page">
<!-- ko template: {name: 'dxrd-page-masterdetail-select-reportdata-dataMembers', data: $data } -->
<!-- /ko -->
<!-- ko template: {name: 'dxrd-page-masterdetail-select-reportdata-fieldMembers', data: $data } -->
<!-- /ko -->
</div>
</script>
<script id="dxrd-page-masterdetail-select-reportdata-dataMembers" type="text/html">
<div class="dxrd-wizard-reportdata-column dx-first-column">
<div class="dxrd-wizard-reportdata-title" data-bind="text: _selectDataMembersCaption"></div>
<div class="dxrd-wizard-queries-search" data-bind="treeListSearchPanel: {controllers: ko.unwrap(_dataMemberFieldListModel).treeListController}"></div>
<div class="drx-wizard-queires-container">
<div class="dxrd-wizard-add-queries-page dxrd-wizard-masterdetail-dataMember dxrd-wizard-page-treelist-accordion-style dxd-border-secondary" data-bind="dxScrollView: { showScrollbar: 'onHover', height: 'auto' }">
<div data-bind="treelist: _dataMemberFieldListModel" class="dxrd-width-100 dxrd-height-100"></div>
</div>
</div>
</div>
</script>
<script id="dxrd-page-masterdetail-select-reportdata-fieldMembers" type="text/html">
<div class="dxrd-wizard-reportdata-column">
<div class="dxrd-wizard-reportdata-title" data-bind="text: _selectDataFieldsCaption"></div>
<div class="dxrd-wizard-queries-search" data-bind="treeListSearchPanel: {controllers: ko.unwrap(_fieldMemberFieldListModel).treeListController}"></div>
<div class="drx-wizard-queires-container">
<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>
</div>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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>
</script>
<script type='text/html' id='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>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="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>
</script>
<script type="text/html" id="dxrd-page-setup-groups">
<div class="dxrd-page-setup-group">
<div class="dxrd-page-setup-group-caption dxd-back-primary" data-bind="text: $root.getLocalization('Paper', 'ASPxReportsStringId.ReportDesigner_Wizard_PageSetup_Paper')"></div>
<div class="dx-fieldset dxrd-page-setup-long-group">
<div class="dx-field">
<div class="dx-field-label dxd-text-primary" data-bind="text: $root.getLocalization('Size:', 'ASPxReportsStringId.ReportDesigner_Wizard_PageSetup_Size'), attr: { 'title': $root.getLocalization('Size:', 'ASPxReportsStringId.ReportDesigner_Wizard_PageSetup_Size') }"></div>
<div class="dx-field-value" data-bind="dxSelectBox: { items: lookupData.paperKind, valueExpr: 'value', displayExpr: 'displayName', value: paperKind, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true }"></div>
</div>
</div>
<div class="dxrd-page-setup-setting">
<div class="dx-fieldset dxrd-group-fieldset dxrd-page-setup-short-group">
<div class="dx-field">
<div class="dx-field-label dxd-text-primary" data-bind="text: $root.getLocalization('Unit:', 'ASPxReportsStringId.ReportDesigner_Wizard_PageSetup_Unit'), attr: { 'title': $root.getLocalization('Unit:', 'ASPxReportsStringId.ReportDesigner_Wizard_PageSetup_Unit') }"></div>
<div class="dx-field-value" data-bind="dxSelectBox: { items: lookupData.reportUnit, valueExpr: 'value', displayExpr: 'displayName', value: reportUnit, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true }"></div>
</div>
<div class="dx-field dxrd-page-setup-pagemode-compact">
<div class="dx-field-label dxd-text-primary" data-bind="text: $root.getLocalization('Orientation:', 'ASPxReportsStringId.ReportDesigner_Wizard_PageSetup_Orientation'), attr: { 'title': $root.getLocalization('Orientation:', 'ASPxReportsStringId.ReportDesigner_Wizard_PageSetup_Orientation') }"></div>
<div class="dx-field-value" data-bind="dxLocalizedSelectBox: { items: [ { value: true, displayName: 'Landscape', localizationId: 'ASPxReportsStringId.ReportDesigner_Wizard_ReportLayout_Landscape'}, { value: false, displayName: 'Portrait', localizationId:'ASPxReportsStringId.ReportDesigner_Wizard_ReportLayout_Portrait' }], valueExpr: 'value', displayExpr: 'displayName', value: $data.landscape, dropDownOptions: { container: $root.getPopupContainer($element) } }"></div>
</div>
<div class="dx-field">
<div class="dx-field-label dxd-text-primary" data-bind="text: $root.getLocalization('Width:', 'ASPxReportsStringId.ReportDesigner_Wizard_Width'), attr: { 'title': $root.getLocalization('Width:', 'ASPxReportsStringId.ReportDesigner_Wizard_Width') }"></div>
<div class="dx-field-value" data-bind="dxNumberBox: { value: width, disabled: fixedSize, format: valueFormat, min: 0 }"></div>
</div>
<div class="dx-field">
<div class="dx-field-label dxd-text-primary" data-bind="text: $root.getLocalization('Height:', 'ASPxReportsStringId.ReportDesigner_Wizard_Height'), attr: { 'title': $root.getLocalization('Height:', 'ASPxReportsStringId.ReportDesigner_Wizard_Height') }"></div>
<div class="dx-field-value" data-bind="dxNumberBox: { value: height, disabled: fixedSize, format: valueFormat, min: 0 }"></div>
</div>
</div>
<div class="dxrd-group-fieldset dxrd-page-setup-pagemode">
<div class="dxrd-page-setup-landscape-item dxd-back-primary dxd-state-normal dxd-back-highlighted dxrd-margin-left-0px" data-bind="css: { 'dxd-state-no-hover dxd-state-active': !$data.landscape() }, click: function() { $data.landscape(false); }">
<div class="dxrd-page-setup-landscape-item-icon" data-bind="template:'dxrd-svg-portrait'"></div>
</div>
<div class="dxrd-page-setup-landscape-item dxd-back-primary dxd-state-normal dxd-back-highlighted" data-bind="css: { 'dxd-state-no-hover dxd-state-active': $data.landscape() }, click: function() { $data.landscape(true); }">
<div class="dxrd-page-setup-landscape-item-icon" data-bind="template:'dxrd-svg-landscape'"></div>
</div>
</div>
</div>
</div>
<div class="dxrd-page-setup-group dxrd-margin-top-16px" >
<div class="dxrd-page-setup-group-caption dxd-back-primary" data-bind="text: $root.getLocalization('Page Margins', 'ASPxReportsStringId.ReportDesigner_Wizard_PageSetup_PageMargins')"></div>
<div class="dxrd-page-setup-setting dxrd-page-setup-setting-page-margins">
<div class="dx-fieldset dxrd-group-fieldset dxrd-group-fieldset-left">
<div class="dx-field">
<div class="dx-field-label dxd-text-primary" data-bind="text: $root.getLocalization('Left:', 'ASPxReportsStringId.ReportDesigner_Wizard_PageSetup_LeftMargin'), attr: { 'title': $root.getLocalization('Left:', 'ASPxReportsStringId.ReportDesigner_Wizard_PageSetup_LeftMargin') }"></div>
<div class="dx-field-value" data-bind="dxNumberBox: { value: marginLeft, format: valueFormat, min: 0, max: width() - marginRight() }"></div>
</div>
<div class="dx-field">
<div class="dx-field-label dxd-text-primary" data-bind="text: $root.getLocalization('Top:', 'ASPxReportsStringId.ReportDesigner_Wizard_PageSetup_TopMargin'), attr: { 'title': $root.getLocalization('Top:', 'ASPxReportsStringId.ReportDesigner_Wizard_PageSetup_TopMargin') }"></div>
<div class="dx-field-value" data-bind="dxNumberBox: { value: marginTop, format: valueFormat, min: 0, max: height() - marginBottom() }"></div>
</div>
</div>
<div class="dx-fieldset dxrd-group-fieldset dxrd-group-fieldset-right">
<div class="dx-field">
<div class="dx-field-label dxd-text-primary" data-bind="text: $root.getLocalization('Right:', 'ASPxReportsStringId.ReportDesigner_Wizard_PageSetup_RightMargin'), attr: { 'title': $root.getLocalization('Right:', 'ASPxReportsStringId.ReportDesigner_Wizard_PageSetup_RightMargin') }"></div>
<div class="dx-field-value" data-bind="dxNumberBox: { value: marginRight, format: valueFormat, min: 0, max: width() - marginLeft() }"></div>
</div>
<div class="dx-field">
<div class="dx-field-label dxd-text-primary" data-bind="text: $root.getLocalization('Bottom:', 'ASPxReportsStringId.ReportDesigner_Wizard_PageSetup_BottomMargin'), attr: { 'title': $root.getLocalization('Bottom:', 'ASPxReportsStringId.ReportDesigner_Wizard_PageSetup_BottomMargin') }"></div>
<div class="dx-field-value" data-bind="dxNumberBox: { value: marginBottom, format: valueFormat, min: 0, max: height() - marginTop() }"></div>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-page-setup-page-settings">
<div class="dxrd-page-setup-content">
<!-- ko template: { name: 'dxrd-page-setup-groups', data: $data }-->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-page-pageSetupAndColorScheme">
<div class="dxrd-wizard-page dxrd-page-setup-page">
<div class="dxrd-page-setup-content">
<!-- ko template: { name: 'dxrd-page-setup-groups', data: $data._configureReportPageSettingsPage }-->
<!-- /ko -->
<!-- ko if: $data._colorSchemePageVisible -->
<div class="dxrd-page-setup-group dxrd-page-color-setup-group">
<div class="dxrd-page-setup-group-caption dxd-back-primary" data-bind="text: $root.getLocalization('Color Scheme', 'ASPxReportsStringId.ReportDesigner_Wizard_ColorScheme')"></div>
<div class="dxrd-page-setup-setting">
<!-- ko template: { name: 'dxrd-page-colorScheme-content', data: $data._colorSchemePage } -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dxrd-page-pageSetup-settings">
<div class="dxrd-wizard-page dxrd-page-setup-page">
<!-- ko template: { name: "dxrd-page-setup-page-settings", data: $data }-->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-page-pageSetup-preview">
<div class="dxrd-wizard-page dxrd-page-setup-page">
<!-- ko template: { name: "dxrd-page-setup-page-colored-preview", data: $data }-->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-page-setup-page-colored-preview">
<div class="dxrd-wizard-preview dxd-back-secondary">
<!-- ko if: $data._reportTitleVisible -->
<div class="dxrd-wizard-preview-reporttitle" data-bind="dxTextBox: { value: reportTitle, placeholder: _reportTitlePlaceholder() }, styleunit: { width: $data._previewPageHelper.previewPageWidth() }"></div>
<!-- /ko -->
<div class="dxrd-wizard-preview-pagecontainer" data-bind="cacheElement: { action: function(element) { $data._previewPageHelper.cachePagePreviewElement(element); } }">
<div class="dxrd-wizard-preview-page" data-bind="styleunit: { width: $data._previewPageHelper.previewPageWidth(), height: $data._previewPageHelper.previewPageHeight() }">
<div class="dxrd-wizard-preview-margin-top" data-bind="styleunit: { top: $data._previewPageHelper.previewTopMargin() }"></div>
<div class="dxrd-wizard-preview-margin-right" data-bind="styleunit: { right: $data._previewPageHelper.previewRightMargin() }"></div>
<div class="dxrd-wizard-preview-margin-bottom" data-bind="styleunit: { bottom: $data._previewPageHelper.previewBottomMargin() }"></div>
<div class="dxrd-wizard-preview-margin-left" data-bind="styleunit: { left: $data._previewPageHelper.previewLeftMargin() }"></div>
<div data-bind="styleunit: { top: $data._previewPageHelper.previewTopMargin(), right: $data._previewPageHelper.previewRightMargin(), bottom: $data._previewPageHelper.previewBottomMargin(), left: $data._previewPageHelper.previewLeftMargin() }">
<div class="dxrd-wizard-rows-container">
<!-- ko foreach: _masterDetailInfo -->
<div class="dxrd-wizard-preview-row">
<!-- ko foreach: fields -->
<div class="dxrd-wizard-preview-column" data-bind="style: { backgroundColor: $parents[1]._color, width: 100/$parent.fields.length + '%', color: $parents[1]._foreColor }, text: displayName"></div>
<!-- /ko -->
</div>
<div class="dxrd-wizard-preview-row">
<!-- ko foreach: fields -->
<div class="dxrd-wizard-preview-column" data-bind="style: { width: 100/$parent.fields.length + '%' }, text: '[' + name + ']'"></div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</div>
</div>
</div>
</div>
</script><script type='text/html' id='dxrd-page-reportLayoutType'>
<div class="dxrd-wizard-page dxrd-report-layout-type-page">
<div class="dxrd-text-align-center">
<div class="dxrd-report-layout-type-items" data-bind="css: { 'dxrd-report-layout-type-five-items': layoutTypeItems()[0].margin == 1 }">
<div>
<div data-bind="dxRadioGroup: { value: selectedPageOrientation, items: pageOrientationItems, layout: 'horizontal' }">
<div data-options="dxTemplate : { name: 'text' }">
<div data-bind="text: $data"></div>
</div>
</div>
</div>
<!-- ko foreach: layoutTypeItems -->
<div class="dx-background-inheritor dxd-back-highlighted dxd-state-selected">
<div class="dxrd-report-layout-type-item dx-fontsize-reestablished dxd-list-item-back-color" data-bind="event: { click: $parent.layoutTypeItemClick }, css: { 'dxd-state-selected dxd-border-secondary dxd-back-secondary': $parent.isSelected($data) }, style: { margin: '0 ' + margin + 'px' }">
<div data-bind="attr: { class: imageClassName }"></div>
<div data-bind="text: text" class="dxrd-report-layout-type-text"></div>
</div>
</div>
<!-- /ko -->
<div class="dxrd-clear-both"></div>
<div data-bind="dxCheckBox: { value: fitFieldsToPage, text: $root.getLocalization('Adjust the field width so all fields fit onto a page', 'ASPxReportsStringId.ReportDesigner_Wizard_ReportLayout_AdjustFieldWidth') }"></div>
</div>
</div>
</div></script>
<script type='text/html' id='dxrd-page-reportStyle'>
<div class="dxrd-wizard-page dxrd-wizard-report-style-page">
<div class="dxrd-wizard-report-style-image-container">
<div data-bind="attr: { class: selectedReportStyle().className }">
<div class="title dxrd-margin-bottom-18px" data-bind="text: $root.getLocalization('Title', 'ASPxReportsStringId.ReportDesigner_Wizard_ReportStyle_Title')"></div>
<div class="caption dxrd-margin-bottom-4px" data-bind="text: $root.getLocalization('Caption', 'ASPxReportsStringId.ReportDesigner_Wizard_ReportStyle_Caption')"></div>
<div class="data" data-bind="text: $root.getLocalization('Data', 'ASPxReportsStringId.ReportDesigner_Wizard_ReportStyle_Data')"></div>
</div>
</div>
<div class="dxrd-wizard-report-style-items" data-bind="dxRadioGroup: { value: selectedReportStyle, items: reportStyleItems }">
<div data-options="dxTemplate : { name: 'item' }">
<div data-bind="text: text"></div>
</div>
</div>
</div></script>
<script type='text/html' id='dxrd-page-reportTitle'>
<div class="dxrd-width-272px dxrd-position-relative dxrd-top-38 dxrd-margin-0-auto">
<div class="dxrd-margin-bottom-5px" data-bind="text: $root.getLocalization('Specify the report\'s title', 'ASPxReportsStringId.ReportDesigner_Wizard_SpecifyReportTitle')"></div>
<div data-bind="dxTextBox: { value: reportTitle, width: 270 }"></div>
</div></script>
<script type='text/html' id='dxrd-page-selectPredefinedLabels'>
<div class="dxrd-wizard-page">
<div class="dxrd-wizard-selectlabelproduct-page dxd-border-secondary">
<div class="dxrd-wizard-selectlabelproduct-list">
<div class="dxrd-wizard-selectlabelproduct-list-label" data-bind="text: $root.getLocalization('Label Product:', 'ASPxReportsStringId.ReportDesigner_Wizard_LabelProduct')"></div>
<div data-bind="dxSelectBox: { items: _labelData.labelProducts, displayExpr: 'name', value: _selectedLabelProduct, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true }"></div>
<div class="dxrd-wizard-selectlabelproduct-list-label" data-bind="text: $root.getLocalization('Product Number:', 'ASPxReportsStringId.ReportDesigner_Wizard_ProductNumber')"></div>
<div data-bind="dxSelectBox: { dataSource: _labelDetails, displayExpr: 'name', value: _selectedLabelDetails, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true }"></div>
</div>
<div class="dxrd-wizard-selectproduct-props">
<div>
<span data-bind="text: $root.getLocalization('Width:', 'ASPxReportsStringId.ReportDesigner_Wizard_Width')"></span>
<span data-bind="text: _width"></span>
</div>
<div>
<span data-bind="text: $root.getLocalization('Height:', 'ASPxReportsStringId.ReportDesigner_Wizard_Height')"></span>
<span data-bind="text: _height"></span>
</div>
<div>
<span data-bind="text: $root.getLocalization('Paper Type:', 'ASPxReportsStringId.ReportDesigner_Wizard_PaperType')"></span>
<span data-bind="text: _paperType"></span>
</div>
<div>
<span data-bind="text: $root.getLocalization('Paper Size:', 'ASPxReportsStringId.ReportDesigner_Wizard_PaperSize')"></span>
<span data-bind="text: _pageSizeText"></span>
</div>
</div>
</div>
</div>
</script>
<script type='text/html' id='dxrd-page-summaryOptions'>
<div class="dxrd-wizard-summary-options-page">
<div class="dxrd-wizard-summary-options-titles dxrd-wizard-dataMember dxd-wizard-title-back-color dxd-back-secondary dxd-border-secondary">
<div data-bind="text: $root.getLocalization('Average', 'ASPxReportsStringId.ReportDesigner_Wizard_SummaryOptions_Average')"></div>
<div data-bind="text: $root.getLocalization('Count', 'ASPxReportsStringId.ReportDesigner_Wizard_SummaryOptions_Count')"></div>
<div data-bind="text: $root.getLocalization('Max', 'ASPxReportsStringId.ReportDesigner_Wizard_SummaryOptions_Max')"></div>
<div data-bind="text: $root.getLocalization('Min', 'ASPxReportsStringId.ReportDesigner_Wizard_SummaryOptions_Min')"></div>
<div data-bind="text: $root.getLocalization('Sum', 'ASPxReportsStringId.ReportDesigner_Wizard_SummaryOptions_Sum')"></div>
</div>
<div class="dxrd-wizard-summary-content dxrd-wizard-dataMember dxd-border-secondary" data-bind="dxScrollView: { }">
<div class="dxrd-wizard-summary-columns dxd-border-secondary">
<!-- ko foreach: summaryOptions -->
<div class="dxrd-wizard-summary-column-name" data-bind="text: columnName, attr: { title: columnName }"></div>
<!-- /ko -->
</div>
<div class="dxrd-wizard-summary-options">
<!-- ko foreach: summaryOptions -->
<div class="dxrd-wizard-summary-options-values">
<div data-bind="dxCheckBox: { value: avg }"></div>
<div data-bind="dxCheckBox: { value: count }"></div>
<div data-bind="dxCheckBox: { value: max }"></div>
<div data-bind="dxCheckBox: { value: min }"></div>
<div data-bind="dxCheckBox: { value: sum }"></div>
</div>
<!-- /ko -->
</div>
</div>
<div class="dxrd-wizard-ignore-null-values" data-bind="dxCheckBox: { value: ignoreNullValues, text: $root.getLocalization('Ignore null values', 'ASPxReportsStringId.ReportDesigner_Wizard_SummaryOptions_IgnoreNullValues') }"></div>
</div>
</script>
<script type="text/html" id="dxrd-rich-edit">
<div class="dxrd-width-100 dxrd-height-100" data-bind="css: rich.className">
<div data-bind="visible: rich.visible">
<!-- ko with: rich.getToolbar() -->
<!-- ko template: { name: template, data: $data }-->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dxrd-richedit-toolbar">
<div class="dxrd-z-index-0 dxrd-position-absolute" data-bind="dxPopover: {
width: 'auto',
height: 'auto',
position: { my: 'right center', at: 'left center', boundary: '.dxrd-designer-wrapper', of: getPositionTarget($element), collision: 'flip fit', offset: '-10 0' },
container: getPopupContainer($element),
onContentReady: onContentReady,
hideOnOutsideClick: hideOnOutsideClick,
closeOnTargetScroll: false,
showTitle: false,
target: getPositionTarget($element),
showCloseButton: false,
shading: false,
visible: visible,
animation: {} }">
<div class="dxrd-rich-toolbar-popover-content">
<!-- ko foreach: componentCollection -->
<!-- ko if: $data.visible -->
<!-- ko template: { name: $data.template, data: $data } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dxrd-rich-edit-toolbar-component-collection">
<div class="dxrd-toolbar-elements-line">
<!-- ko if: $index() !== 0 -->
<div class="dxrd-toolbar-elements-line-bottom dxd-border-secondary"></div>
<!-- /ko -->
<!-- ko if: $data.showTitle() -->
<div class="dxrd-rich-toolbar-header" data-bind="text: $data.showTitle();"></div>
<!-- /ko -->
<div class="dxrd-rich-toolbar-value">
<!-- ko foreach: { data: $data.items } -->
<!-- ko if: $data.visible -->
<!-- ko template: { name: $data.template, data: $data } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dxrd-rich-edit-toolbar-button-group">
<div data-bind="dxButtonGroup:{ items: items, keyExpr: itemKey, selectedItems: selectedItems, selectionMode: selectionMode, stylingMode: 'text', focusStateEnabled: false}"></div>
</script>
<script type="text/html" id="dxrd-button-with-template">
<div data-bind="dxButton: { onClick: $data.clickAction, icon: $data.icon, hint: $data.hint, stylingMode: 'text', focusStateEnabled: false }"></div>
</script>
<script type="text/html" id="dxrd-richEdit-toolbar-colorpicker">
<div data-bind="dxColorBox: { value: value, popupPosition: { collision: 'flipfit flipfit' }, focusStateEnabled: false, dropDownOptions: { container: $root.getPopupContainer($element) } }"></div>
</script>
<script type="text/html" id="dxrd-rich-toolbar-combobox">
<div data-bind="dxLocalizedSelectBox: {
dataSource: items,
value: value,
dropDownOptions: { container: $root.getPopupContainer($element) },
focusStateEnabled: false,
searchEnabled: !supportCustomValue,
displayCustomValue: true,
acceptCustomValue: supportCustomValue,
openOnFieldClick: !supportCustomValue
}, dxValidator: { validationRules: validationRules }"></div>
</script><script type='text/html' id='dxrd-richedit-content'>
<div data-bind="css:{ 'dxrd-intersect': !isValid() }" class="dxrd-box-sizing-border-box dxrd-letter-spacing-normal dxrd-width-100 dxrd-height-100">
<div data-bind="style: { display: isValid()? 'inline' : 'none' }">
<div class="dxrd-control-content dxrd-richedit-readonly dxrd-width-100 dxrd-height-100 dxrd-vertical-align-top" data-bind="style: contentCss"></div>
</div>
<!-- ko if: !isValid() -->
<div data-bind="text: 'Document is not valid'"></div>
<!-- /ko -->
</div></script>
<script type='text/html' id='dxrd-richedit-selection'>
<div class="dxrd-control" data-bind="dragDropFileToControl: { dragDropHandler: $root.toolboxDragHandler, dragDropFileEnabled: dragDropFileEnabled}, event: { dblclick: function() { $root.richInlineControl.show($element) } }, visible: selected() || focused(), css: {'dxrd-selected dxrd-context-menu-container': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked, 'dxrd-drop-zone-border': showDropBorders }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
<!-- ko if: selected() -->
<div class="dxd-border-accented dxrd-control-border-box" data-bind="style: { 'backgroundColor': $root.richInlineControl.visible() && selected() ? '#FFF' : 'transparent' }"></div>
<!-- /ko -->
</div>
<div class="dxrd-control 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>
<div class="dxrd-control dxrd-richedit-selected" data-bind="styleunit: position, trackCursor: underCursor, style:{ pointerEvents: $root.richInlineControl.visible() && selected() ? 'auto' : 'none' }">
<div class="dxrd-control-content-main" data-bind="styleunit: defaultStyleunit">
<div class="dxrd-richedit-selected-content" data-bind="zoom: _context.zoom(), styleunit: { 'height': contentHeightWithoutZoom, 'width': contentWidthWithoutZoom }, dxRichSurface: { inlineEdit: $root.richInlineControl }">
</div>
</div>
</div></script>