devexpress-reporting
Version:
DevExpress Reporting provides the capability to develop a reporting application to create and customize reports.
7,827 lines • 502 kB
HTML
<script type='text/html' id='dxrd-bordereditor'>
<div class="dxrd-bordereditor-content">
<!-- ko with: value-->
<div class="dxrd-bordereditor-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxrd-image-borders-none" data-bind="template: 'dxrd-svg-properties-borders-none', css: { 'dxd-state-active': (!bottom() && !left() && !top() && !right()), 'dxrd-disabled-button': disabled }, click: function() { setNone() }"></div>
<div class="dxrd-bordereditor-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxrd-image-borders-all dxrd-bordereditor-right-margin" data-bind="template: 'dxrd-svg-properties-borders-all', css: { 'dxd-state-active': (bottom() && left() && top() && right()), 'dxrd-disabled-button': disabled }, click: function() { setAll() }"></div>
<div class="dxrd-bordereditor-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxrd-image-borders-left" data-bind="template: 'dxrd-svg-properties-borders-left', css: { 'dxd-state-active': left(), 'dxrd-disabled-button': disabled }, click: function() { setValue('left') }"></div>
<div class="dxrd-bordereditor-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxrd-image-borders-top" data-bind="template: 'dxrd-svg-properties-borders-top', css: { 'dxd-state-active': top(), 'dxrd-disabled-button': disabled }, click: function() { setValue('top') }"></div>
<div class="dxrd-bordereditor-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxrd-image-borders-right" data-bind="template: 'dxrd-svg-properties-borders-right', css: { 'dxd-state-active': right(), 'dxrd-disabled-button': disabled }, click: function() { setValue('right') }"></div>
<div class="dxrd-bordereditor-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxrd-image-borders-bottom" data-bind="template: 'dxrd-svg-properties-borders-bottom', css: { 'dxd-state-active': bottom(), 'dxrd-disabled-button': disabled }, click: function() { setValue('bottom') }"></div>
<p></p>
<!-- /ko -->
</div></script>
<script type="text/html" id="dxd-dimension-notations">
<div class="dxd-dimension-notations-wrapper dxd-dimension-horizontal" data-bind="visible: isHAxisVisible, css: { 'dxd-dimension-notations-inside-elt' : isLocatedInsideContainer }">
<div class="dxd-dimension-notations-arrowed-line">
<span class="dxd-dimension-notations-text" data-bind="text: width"></span>
</div>
</div>
<div class="dxd-dimension-notations-wrapper dxd-dimension-vertical" data-bind="visible: isVAxisVisible, css: { 'dxd-dimension-notations-inside-elt' : isLocatedInsideContainer }">
<div class="dxd-dimension-notations-arrowed-line">
<span class="dxd-dimension-notations-text" data-bind="text: height"></span>
</div>
</div>
</script>
<script type="text/html" id="dxrd-borders">
<div class="dxrd-bordereditor" data-bind="dxBorderEditor: $data"></div>
</script><script type="text/html" id="dxrd-colorpicker">
<div data-bind="dxColorBox: { value: displayValue, onValueChanged: onValueChanged, placeholder: $root.getLocalization('(Not set)', 'ReportStringId.UD_PropertyGrid_NotSetText'), editAlphaChannel: true, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element), position: { at: 'left bottom', collision: 'flipfit flipfit', my: 'left top', boundary: $root.getPopupContainer($element), of: $element } }, inputAttr: { 'aria-label': displayName, id: editorInputId } }"></div>
</script><script type="text/html" id="dxrd-expressionstring">
<!-- ko if: value -->
<div data-bind="dxExpressionEditor: getOptions({ options: value, fieldListProvider: $root.dataBindingsProvider, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() })"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-field">
<!-- ko displayNameExtender: { path: path, dataMember: value, getPath: getPath, getDataMember: getDataMember } -->
<!-- ko if: visible -->
<div data-bind="dxFieldListPicker: { path: path, onValueChanged: onValueChanged, acceptCustomValue: true, value: value, displayValue: $displayName, itemsProvider: $root.dataBindingsProvider, treeListController: treeListController, disabled: disabled, inputAttr: {id: editorInputId} }"></div>
<!-- /ko -->
<!-- /ko -->
</script><script type="text/html" id="dxrd-filterstring">
<!-- ko if: value -->
<div data-bind="dxFilterEditor: { options: value, fieldListProvider: $root.dataBindingsProvider, getDisplayNameByPath: $root.getDisplayNameByPath, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() }"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-filterstringgroup">
<!-- ko if: value -->
<div data-bind="dxFilterEditor: { options: value, fieldListProvider: $root.dataBindingsGroupProvider, getDisplayNameByPath: $root.getDisplayNameByPath, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() }"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-formatstring">
<div data-bind="dxFormatEditor: { value: value, disabled: disabled, actions: $data.actions, customPatterns: $data.customPatterns }"></div>
</script>
<script type="text/html" id="dxrd-guid">
<div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { 'aria-label': displayName, id: editorInputId } }), dxValidator: { validationRules: (validationRules || []) }"></div>
</script>
<script type="text/html" id="dxrd-emptyHeader">
</script>
<script type="text/html" id="dxrd-objectEditorContent">
<!-- ko if: $data.visible() && editorCreated -->
<div data-bind="template: { name: 'dx-propertieseditor', data: viewmodel }"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-commonCollectionItem">
<div data-bind="template: { name: 'dx-propertieseditor', data: getProperties() }"></div>
</script>
<script type="text/html" id="dxrd-textalignment">
<div class="dxrd-textalignment-editor" data-bind="dxTextAlignmentEditor: $data"></div>
</script><script type="text/html" id="dxrd-objectVisitor">
<!-- ko if: options -->
<div data-bind="treelist: options"></div>
<!-- /ko -->
</script><script type="text/html" id="dxd-snap-lines-holder">
<div class="dxd-snap-lines-holder">
<div class="dxd-snap-line dxd-snap-line-horizontal" data-bind="style: { transform: snapLineSurfaces[0].transform() }"></div>
<div class="dxd-snap-line dxd-snap-line-horizontal" data-bind="style: { transform: snapLineSurfaces[1].transform() }"></div>
<div class="dxd-snap-line dxd-snap-line-vertical" data-bind="style: { transform: snapLineSurfaces[2].transform() }"></div>
<div class="dxd-snap-line dxd-snap-line-vertical" data-bind="style: { transform: snapLineSurfaces[3].transform() }"></div>
</div>
</script><script type="text/html" id="dxrd-surface-template-base">
<!-- ko ifnot: isLoading -->
<!-- ko with: surface -->
<div class="dxrd-surface-wrapper" data-bind="css: { 'dxrd-context-menu-container': selected() }, template: templateName, click: function(_, e) { $data.clickHandler($root.selection, e); }, event: $root.ContextMenusEnabled && $root.ContextMenusEnabled() ? { contextmenu: function(_, e) { $data.reportContextMenuHandler && $data.reportContextMenuHandler($root.selection, e); }} : null">
</div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: isLoading -->
<div class="dxrd-surface-wrapper"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-designer">
<div tabindex="-1" data-bind="cssArray: [surfaceClass($element), { 'dx-accessibility': $data.accessibilityCompliant, 'dx-rtl': $data.rtl } ]">
<div class="dxrd-designer-wrapper dx-editors dxd-surface-back-color dxd-scrollbar-color" data-bind="visible: (!designMode || designMode()), cssArray: [rootStyle, { 'dx-rtl' : rtl, 'dx-ltr': !rtl }]">
<!-- ko foreach: parts -->
<!-- ko template: { name: templateName, data: viewModel || model }-->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- ko if: ($data.addOns) -->
<!-- ko foreach: addOns -->
<!-- ko template: { name: templateName, data: model } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<div id="dxrd-designer-last-focus-item-blank" class="dxrd-visually-hidden" tabindex='-1'></div>
</div>
</script><script type='text/html' id='dxrd-textalignment-editor'>
<div class="dxrd-textalignment-editor-content">
<!-- ko with: value-->
<div>
<div class="dxrd-textalignment-editor-label dx-field-label" data-bind="text: verticalString"></div>
<div class="dxrd-textalignment-editor-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxrd-image-textAlignment-top" data-bind="template: 'dxrd-svg-properties-textAlignment-top', css: { 'dxd-state-active': top(), 'dxrd-disabled-button': disabled }, click: function() { setValue('top', 'Vertical') }"></div>
<div class="dxrd-textalignment-editor-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxrd-image-textAlignment-middle" data-bind="template: 'dxrd-svg-properties-textAlignment-middle', css: { 'dxd-state-active': middle(), 'dxrd-disabled-button': disabled }, click: function() { setValue('middle', 'Vertical') }"></div>
<div class="dxrd-textalignment-editor-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxrd-image-textAlignment-bottom" data-bind="template: 'dxrd-svg-properties-textAlignment-bottom', css: { 'dxd-state-active': bottom(), 'dxrd-disabled-button': disabled }, click: function() { setValue('bottom', 'Vertical') }"></div>
</div>
<div class="dxrd-textalignment-margin-top">
<br/>
<div class="dxrd-textalignment-editor-label dx-field-label" data-bind="text: horizontalString"></div>
<div class="dxrd-textalignment-editor-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxrd-image-textAlignment-left" data-bind="template: 'dxrd-svg-properties-textAlignment-left', css: { 'dxd-state-active': left(), 'dxrd-disabled-button': disabled }, click: function() { setValue('left', 'Horizontal') }"></div>
<div class="dxrd-textalignment-editor-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxrd-image-textAlignment-center" data-bind="template: 'dxrd-svg-properties-textAlignment-center', css: { 'dxd-state-active': center(), 'dxrd-disabled-button': disabled }, click: function() { setValue('center', 'Horizontal') }"></div>
<div class="dxrd-textalignment-editor-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxrd-image-textAlignment-right" data-bind="template: 'dxrd-svg-properties-textAlignment-right', css: { 'dxd-state-active': right(), 'dxrd-disabled-button': disabled }, click: function() { setValue('right', 'Horizontal') }"></div>
<div class="dxrd-textalignment-editor-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxrd-image-textAlignment-justify" data-bind="template: 'dxrd-svg-properties-textAlignment-justify', css: { 'dxd-state-active': justify(), 'dxrd-disabled-button': disabled }, click: function() { setValue('justify', 'Horizontal') }"></div>
</div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-collectionactions-template">
<div class="dxrd-action-items-container"></div>
<div class="dx-treelist-action" data-bind="dxButtonWithTemplate: { onClick: togglePopoverVisible, disabled: disabled, icon: ko.unwrap($data.imageTemplateName), iconClass: ko.unwrap($data.imageClassName) }, attr: { id: id, title: text }"></div>
<div data-bind="dxPopup: { width: 235, height: 'auto',
position: { my: $root.rtl ? 'left top': 'right top', at: 'bottom', of: ('#' + id) },
showTitle: false,
showCloseButton: false,
animation: {},
hideOnOutsideClick: true,
container: ($data.getContainer || function(_e, selector) { return selector; })($element, '.dxrd-action-items-container'),
shading: false,
visible: popoverVisible }">
<!-- ko if: $data.contentTemplate-->
<!-- ko template: contentTemplate-->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: !$data.contentTemplate -->
<!-- ko foreach: actions -->
<div class="dxrd-action-item dxd-button-back-color dxd-state-normal dxd-back-highlighted" data-bind="dxclick: clickAction, css: { 'dxrd-disabled-button': disabled }">
<div class="dxrd-action-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>
</div>
<!-- /ko -->
<!-- /ko -->
</div>
</script><script type="text/html" id="dxrd-drag-helper-source">
<div class="dxrd-drag-helper-source" data-bind="styleunit: { top: $data.top, left: $data.left, width: $data.width, height: $data.height }, css: { 'dxrd-locked': $data.isLocked }">
<!-- ko foreach: $data.controls() -->
<div class="dxrd-drag-helper-control" data-bind="styleunit: { left: $data.left, top: $data.top, width: $data.width, height: $data.height }, css: $data.className">
<!-- ko with: $parent.customData() -->
<div data-bind="template: { name: $data.template, data: $data.data }"> </div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-drag-helper-source-reorder-treelist">
<div class="dxrd-drag-helper-source-reorder-treelist dxd-back-primary dxd-text-primary dxd-ghost-border-color dxd-border-accented">
<div class="dxrd-drag-helper-treelist-image" data-bind="css: $data.imageClassName, template: {name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}"> </div>
<div class="dxrd-drag-helper-treelist-text-wrapper">
<div class="dxrd-drag-helper-treelist-text" data-bind="text: text, attr: { title: text }"></div>
</div>
</div>
</script><script type="text/html" id="dxrd-menubutton-template-base">
<div class="dxrd-menu-container dxrd-position-relative dxrd-width-0 dxrd-height-100" ></div>
<div class="dxrd-menu-button dxd-toolbox-back-color dxd-border-primary dxd-back-primary2">
<div class="dxrd-menu-place dxrd-width-54px" ></div>
<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 data-bind="dxPopup: {
width: 250,
wrapperAttr: { class: 'dxd-menu-back-color dxd-back-primary2' },
height: '100%' ,
position: $data.rtl ? { my: 'right top' , at: 'left top' , offset: '-10 0' } : { my: 'left top' , at: 'right top' , offset: '10 0' },
showTitle: false,
showCloseButton: false,
container: getMenuPopupContainer($element),
target: getMenuPopupTarget($element),
animation: {},
hideOnOutsideClick: function(e) {
var buttonClassName = 'dxrd-menu-button-image';
var parentClassList = e.target.parentNode && e.target.parentNode.parentNode && e.target.parentNode.parentNode.classList;
stopPropagation = (e.target.classList && e.target.classList.contains(buttonClassName)) || (parentClassList && parentClassList.contains(buttonClassName));
return true;
},
shading: false,
focusStateEnabled: false,
visible: appMenuVisible }">
<div class="dxrd-menu-break dxd-popup-back-color dxd-back-primary2"></div>
<!-- ko foreach: actionLists.menuItems -->
<div class="dxrd-menu-item dxd-text-primary dxd-list-item-back-color dxd-back-highlighted" data-bind="dxclick: function(e) { if(disabled && !disabled() || !disabled) { $root.toggleAppMenu(); clickAction($root.model(), e); }}, css: { 'dxrd-disabled-button': disabled }, 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>
<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>
</div>
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dxrd-top-grid">
<!-- ko if: popularVisible -->
<div class="dx-fieldset">
<div class="dx-accordion" data-bind="dxdAccordion: { collapsed: collapsed }">
<div class="dxrd-group-header dx-accordion-header dxd-border-primary" data-bind="css: { 'dxrd-group-header-collapsed': collapsed() }">
<div class="dx-collapsing-image dxrd-display-inline-block" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed() }" ></div>
<span class="dxrd-group-header-text" data-bind="text: $root.actionsGroupTitle()"></span>
</div>
<div class="dx-accordion-content dxd-back-primary dxd-border-primary">
<!-- ko foreach: (contextActions || []) -->
<!-- ko if: $data.templateName && !isContextMenuAction -->
<!-- ko template: templateName -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: !$data.templateName && !isContextMenuAction -->
<div class="dxrd-properties-grid-action" data-bind="dxclick: function() { if($data.disabled && !$data.disabled() || !$data.disabled) { clickAction($root.editableObject()); } }, css: { 'dxrd-disabled-button': $data.disabled && $data.disabled() }, visible: (ko.unwrap($data.visible) == undefined) || ko.unwrap($data.visible)">
<div class="dxrd-properties-grid-action-image dxd-button-back-color dxd-state-normal dxd-back-highlighted" data-bind="css: $data.imageClassName, template: {name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}, attr: { title: $data.displayText && $data.displayText() || text }"></div>
</div>
<!-- /ko -->
<!-- /ko -->
<!-- ko with: popularProperties -->
<div class="dxrd-position-relative" data-bind="template: { name: 'dx-propertieseditor', data: $data }"></div>
<!-- /ko -->
</div>
</div>
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-group-actions">
<div class="dxd-back-primary2 dxrd-property-grid-actions-group">
<!-- ko if: groupActionsVisible -->
<!-- ko foreach: (groupActions || []) -->
<div class="dxd-border-primary dxrd-properties-grid-actions-group-content" data-bind="visible: items.some(x => !x.visible || ko.unwrap(x.visible))">
<div class="dxd-text-primary dxrd-properties-grid-action-name" data-bind="text: group"></div>
<!-- ko foreach: (items || []) -->
<!-- ko template: { name: $data.templateName, if: $data.templateName } -->
<!-- /ko -->
<!-- ko if: !$data.templateName -->
<div class="dxrd-properties-grid-action" data-bind="dxclick: function() { if($data.disabled && !$data.disabled() || !$data.disabled) { clickAction($root.editableObject()); } }, css: { 'dxrd-disabled-button': $data.disabled && $data.disabled() }, visible: (ko.unwrap($data.visible) == undefined) || ko.unwrap($data.visible)">
<div class="dxrd-properties-grid-action-image dxd-button-back-color dxd-state-normal dxd-back-highlighted" data-bind="css: $data.imageClassName, template: {name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}, attr: { title: $data.displayText && $data.displayText() || text }"> </div>
</div>
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
<!-- /ko-->
</div>
</script><script type="text/javascript" id="dx-propertygrid-searchbox">
<div class="dx-property-grid-search-group dx-property-grid-search-collapsed" data-bind="css: { 'dx-property-grid-search-collapsed': !isSearching() }">
<div class="dx-property-grid-sorting-action dxd-button-back-color dxd-state-normal dxd-back-highlighted dxd-back-primary2 dx-button-has-text" data-bind="css: { 'dxd-state-active': isSearching },
dxButtonWithTemplate: { onClick: switchSearchBox, icon: 'dxrd-svg-properties-search', iconClass: 'image-search' },
attr: { title: $root.getLocalization('Search', 'ASPxReportsStringId.SearchDialog_Header') }">
</div>
<div class="dx-property-grid-search-box no-margin-right" data-bind="dxTextBox: { value: textToSearch, valueChangeEvent: 'keyup', placeholder: searchPlaceholder(), showClearButton: true }, cacheElement: { action: function(element) { searchBox(element); } }"></div>
</div>
</script>
<script type="text/html" id="dxrd-propertiestab">
<div class="dxrd-properties-wrapper" data-bind="visible: active && visible">
<div class="dxd-text-primary dxrd-properties-sub-wrapper">
<div class="dxrd-right-panel-header">
<span data-bind="text: text"></span>
</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-sorting-actions-group" data-bind="css: { 'dx-property-grid-search-collapsed': isSearching }">
<div class="dxrd-properties-focused-item" data-bind="dxSelectBox: { dataSource: $root.controlsStore.dataSource, value: focusedItem, displayExpr: displayExpr, dropDownOptions: { container: $root.getPopupContainer($element) }, useItemTextAsTitle: true }"></div>
<div class="dx-property-grid-sorting-actions-container">
<div class="dx-property-grid-sorting-action dxd-state-normal dxd-back-highlighted dxd-back-primary2 dx-button-has-text" data-bind="css: { 'dxd-state-active dxd-state-no-hover': !isSortingByGroups() }, dxButtonWithTemplate: { onClick: function() { $data.isSortingByGroups(false); }, icon: 'dxrd-svg-properties-sortingbyalphabet', iconClass: 'image-sortingbyalphabet' }"></div>
<div class="dx-property-grid-sorting-action dxd-state-normal dxd-back-highlighted dxd-back-primary2 dx-button-has-text" data-bind="css: { 'dxd-state-active dxd-state-no-hover': isSortingByGroups }, dxButtonWithTemplate: { onClick: function() { $data.isSortingByGroups(true); }, icon: 'dxrd-svg-properties-sortingbygroups', iconClass: 'image-sortingbygroups' }"></div>
</div>
</div>
<!-- ko template: 'dx-propertygrid-searchbox' -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
<div class="dxrd-properties-grid dxd-border-primary" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true }">
<!-- ko template: { name: 'dxrd-group-actions', data: { groupActions: $root.contextGroupActions, groupActionsVisible: $root.groupActionsVisible() } } -->
<!-- /ko -->
<!-- ko template: { name: 'dxrd-top-grid', data: { contextActions: $root.contextActions, popularProperties: $root.popularProperties, collapsed: ko.observable(false), popularVisible: $root.popularVisible() && isSortingByGroups(), actionsGroupTitle: $root.actionsGroupTitle } } -->
<!-- /ko -->
<div data-bind="visible: isSortingByGroups">
<!-- ko foreach: groups -->
<div class="dx-fieldset" data-bind="visible: visible">
<div class="dx-accordion" data-bind="dxdAccordion: { collapsed: collapsed }">
<div class="dxrd-group-header dx-accordion-header dxd-border-primary" data-bind="css: { 'dxrd-group-header-collapsed': collapsed() }">
<div class="dx-collapsing-image dxrd-display-inline-block" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed() }" ></div>
<span class="dxrd-group-header-text" data-bind="text: displayName()"></span>
</div>
<div class="dx-accordion-content dxd-back-primary dxd-border-primary">
<!-- ko ifnot: editorsCreated -->
<div class="dx-accordion-content-loading-panel">
<div data-bind="dxLoadIndicator: { visible: !editorsCreated() }"></div>
</div>
<!-- /ko -->
<!-- ko if: $data.editorsRendered() -->
<div data-bind="visible: editorsCreated">
<div class="dx-editors">
<!-- ko foreach: editors -->
<!-- ko template: editorTemplate -->
<!-- /ko -->
<!-- ko if: ($index() === $parent.editors().length - 1 && $parent.editorsCreated(true)) -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</div>
</div>
</div>
<!-- /ko -->
</div>
<div class="dx-fieldset dxd-back-primary" data-bind="visible: !isSortingByGroups()">
<div data-bind="dxLoadIndicator: { visible: !allEditorsCreated() }"></div>
<!-- ko if: $data.editorsRendered() -->
<div data-bind="visible: allEditorsCreated">
<div class="dx-editors">
<!-- ko foreach: $data.getEditors() -->
<!-- ko template: editorTemplate -->
<!-- /ko -->
<!-- ko if: ($index() === $parent._editors().length - 1 && $parent.allEditorsCreated(true)) -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</div>
<!-- ko template: 'dx-propertygrid-popupservice' -->
<!-- /ko -->
<!-- ko template: { name: 'dx-propertygrid-popoverservice', if: popover, data: popover.getViewModel() } -->
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-propertygrid-popupservice">
<div data-bind="dxPopup: { width: 250, height: 'auto',
position: $data.rtl ? { my: 'left top', at: 'right top', of: popupService.target, collision: 'flipfit' } : { my: 'right top', at: 'left top', of: popupService.target, collision: 'flipfit' },
container: $root.getPopupContainer($element),
target: popupService.target,
showTitle: false,
showCloseButton: false,
animation: {},
hideOnOutsideClick: true,
shading: false,
visible: popupService.visible }">
<div data-options="dxTemplate: { name: 'content' }">
<div class="dxrd-editor-menu-caption dxd-text-primary" data-bind="text: popupService.title, visible: popupService.title"></div>
<div class="dxd-button-back-color" data-bind="dxMenu: { wrapperAttr: { class: 'dxd-button-back-color' }, disabled: popupService.disabled, dataSource: popupService.actions, displayExpr: 'title', cssClass: 'dxrd-editor-menu', orientation: 'vertical', showFirstSubmenuMode: 'onHover', onSubmenuShowing: function(e) { e.submenu._overlay.option('container', $root.getPopupContainer($element)) } }">
<div class="dxrd-editor-menu-item dxd-back-highlighted dxd-state-normal" data-options="dxTemplate: { name: 'item' }">
<!-- ko if: $data.itemTemplate -->
<!-- ko template: $data.itemTemplate -->
<!--/ko-->
<!--/ko-->
<!-- ko ifnot: $data.itemTemplate -->
<div data-bind="dxclick: action">
<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>
<!--ko if: $data.innerTemplate-->
<!--ko template: $data.innerTemplate-->
<!--/ko-->
<!--/ko-->
</div>
<!--/ko-->
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-propertygrid-popoverservice">
<div data-bind="dxPopover: {
container: getPopupContainer($element),
target: target,
position: 'bottom',
showCloseButton: false,
onHiding: onHiding,
hideOnOutsideClick: true,
hideOnParentScroll: true,
width: '350px',
visible: visible
}">
<div class="propertygrid-editor-description-popover-content">
<span data-bind="text: data"></span>
</div>
</div>
</script><script type="text/html" id="dx-right-panel-lightweight">
<!-- ko with: tabPanel.getViewModel() -->
<div class="dxrd-right-panel dx-shadow dx-shadow-right dxd-border-secondary dxd-property-grid-group-header-back-color dxd-back-primary2" data-bind="styleunit: { width: contentElement.width }, css: class, resizable: getResizableOptions($element, 1, $root.calculateWithZoomFactor(325))">
<!-- ko foreach: tabs -->
<!-- ko lazy: { template: $data.template } -->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-right-panel-template-base">
<div class="dx-shadow dx-shadow-right dxd-border-secondary dxrd-tab-panel-wrapper" data-bind="styleunit: { width: width }, css: class, dxMutationObserver: keyboardHelper">
<div class="dxrd-right-tabs dxd-side-panel-tabs-back-color dxd-back-contrast" data-bind="css: tabsElement.class">
<!-- ko foreach: $data.tabs -->
<div role="button" class="dxrd-tab-item dx-accessibility-rightpanel-button dxd-side-panel-tab-back-color dxd-back-highlighted dx-accessibility-focus-border-accented" data-bind="dxAction: { action: function(s) { $data.click(); }}, css: css.class, attr: { title: text, 'aria-label': text, 'aria-expanded': !collapsed && active ? 'true' : 'false' }, visible: visible">
<div class="dxrd-image-padding" data-bind="css: image.class, template: {name: image.templateName, if: !!ko.unwrap($data.image.templateName)}"> </div>
</div>
<!-- /ko -->
</div>
<div class="dxrd-right-panel dxd-property-grid-group-header-back-color dxd-back-primary2" data-bind="styleunit: { width: contentElement.width }, css: contentElement.class, resizable: getResizableOptions($element, 50, 396)">
<!-- ko foreach: $data.tabs -->
<!-- ko lazy: { template: $data.template } -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script><script type="text/html" id="dx-right-panel-switcher">
<div class="dx-right-panel-switcher">
<div class="dxrd-collectioneditor-action" data-bind="dxButtonWithTemplate: { icon: 'dxrd-svg-operations-edit', iconClass: 'dx-image-edit', disabled: disabled, onClick: toogle, hint: title }"></div>
</div>
</script><script type="text/html" id="dxrd-toolbar-template-base">
<div class="dxrd-toolbar-wrapper dxd-back-secondary-invariant dx-shadow-top">
<div class="dxrd-toolbar" data-bind="template: {name: 'dxrd-toolbar-tmplt', data: actionLists.getViewModel().toolbarItems }"></div>
</div>
</script>
<script type="text/html" id="dxrd-toolbar-tmplt">
<!-- ko foreach: $data -->
<!-- ko if: templateName -->
<!-- ko template: { name: templateName, data: contentData || $data } -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: !templateName -->
<div class="dxrd-toolbar-item" data-bind="visible: visible, css: actionClass">
<div role="button" class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" data-bind="attr: block.attr" >
<div data-bind="template: { name: image.templateName, if: !!image.templateName }, attr: { class: image.class, title: displayText }, dxclick: click"> </div>
<div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: hasSeparator"></div>
</div>
</div>
<!-- /ko -->
<!-- /ko -->
</script><script type="text/html" id="dxrd-toolbox-template-base">
<div class="dxrd-toolbox-wrapper dxd-toolbox-back-color dxd-back-primary2 dx-shadow dx-shadow-left" data-bind="dxScrollView: { showScrollbar: 'onHover', scrollByContent: false, bounceEnabled: false, useNative: false, scrollByThumb: true }">
<!-- ko foreach: toolboxItems -->
<div class="dxrd-toolbox-item dxd-icon-highlighted" data-bind="attr: { title: displayName }">
<div class="dxrd-image-padding dx-fontsize-reestablished" data-bind="template: {name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}, css: $data.imageClassName, draggable: $root.toolboxDragHandler"> </div>
</div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-grouped-toolbox-template-base">
<div class="dxrd-toolbox-wrapper dxd-toolbox-back-color dxd-back-primary2-invariant toolbox-grouped dx-shadow dx-shadow-left" data-bind="dxScrollView: { showScrollbar: 'onHover', scrollByContent: false, bounceEnabled: false, useNative: false, scrollByThumb: true }">
<!-- ko foreach: groupedToolboxItems -->
<div class="dxrd-toolbox-group dxd-border-primary">
<!-- ko foreach: items -->
<div class="dxrd-toolbox-item dxd-icon-highlighted" data-bind="attr: { title: displayName }">
<div class="dxrd-image-padding dx-fontsize-reestablished" data-bind="template: {name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}, css: $data.imageClassName, draggable: $root.toolboxDragHandler"> </div>
</div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</script><script type="text/html" id="dxrd-zoom-select-template">
<div class="dxrd-toolbar-item-zoom" data-bind="visible: visible">
<div class="dxrd-toolbar-item-zoom-editor" data-bind="dxSelectBox: {
items: widget.dataSource,
value: widget.value,
onValueChanged: widget.onValueChanged,
displayExpr: widget.displayExpr,
displayCustomValue: true,
acceptCustomValue: true,
onCustomItemCreating: widget.onCustomItemCreating,
disabled: disabled,
dropDownOptions: { container: getPopupContainer($element) }, useItemTextAsTitle: true }"></div>
</div>
</script>
<script type="text/html" id="dx-editor-addons">
<div class="dxrd-editormenu-boxes">
<!-- ko foreach: $data -->
<!-- ko if: $data.visible -->
<!-- ko if: $data.templateName -->
<!-- ko template: $data.templateName -->
<!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $data.templateName -->
<!-- ko if: !ko.unwrap($data.imageTemplateName) -->
<div class="dxrd-editormenu-box dxd-property-grid-menu-box-color dxd-back-contrast" data-bind="dxclick: function(_, element) { showPopup(_, element) }, css: editorMenuButtonCss, attr: { title: hint }">
<div class="dxrd-editormenu-box-inside dxd-back-secondary"></div>
</div>
<!-- /ko -->
<!-- ko if: ko.unwrap($data.imageTemplateName) -->
<div class="dxrd-editormenu-box dxd-property-grid-menu-box-color dxrd-editor-box-image" data-bind="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>
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-collectioneditor">
<div class="dx-collectioneditor">
<div data-bind="dxdAccordion: { collapsed: collapsed, setCollapsed: setCollapsed, getCollapsed: getCollapsed, setCollapsedChangedEvent: setCollapsedChangedEvent, alwaysShow: alwaysShow }, dxMutationObserver: keyboardHelper">
<div class="dx-collectioneditor-header dx-accordion-header">
<div class="dx-editor-header">
<div role="treeitem" class="dx-field dx-accessibility-focus-border-accented dxrd-accessibility-accordion-trigger" data-bind="attr: {
'aria-expanded': alwaysShow || !collapsed ? 'true' : 'false',
'aria-owns': contentId,
'id': headerId,
}">
<!-- ko if: showButtons-->
<!-- ko with: buttons -->
<div class="dx-collectioneditor-actions-wrapper">
<!-- ko if: up.visible -->
<div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButton: { onClick: up.action, disabled: up.disabled, icon: 'dxrd-svg-operations-moveup', template: up.template }, attr: { title: up.text }"></div>
<!-- /ko -->
<!-- ko if: down.visible -->
<div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButton: { onClick: down.action, disabled: down.disabled, icon: 'dxrd-svg-operations-movedown', template: down.template }, attr: { title: down.text }"></div>
<!-- /ko -->
<div class="dx-collectioneditor-action-separator"></div>
<!-- ko if: add.visible -->
<div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButton: { onClick: add.action, disabled: add.disabled, icon: 'dxrd-svg-operations-add', template: add.template }, attr: { title: add.text }"></div>
<!-- /ko -->
<!-- ko if: delete.visible -->
<div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButton: { onClick: delete.action, disabled: delete.disabled, icon: 'dxrd-svg-operations-remove', template: delete.template }, attr: { title: delete.text }"></div>
<!-- /ko -->
</div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: displayName -->
<div class="dx-collectioneditor-header-text dxd-text-primary" data-bind="styleunit: { 'paddingLeft': padding }">
<div class="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: displayName, attr: { title: displayName }"></div>
</div>
<!-- /ko -->
</div>
</div>
</div>
<div role="group" class="dx-accordion-content" data-bind="attr: {
'aria-hidden': !alwaysShow && collapsed ? 'true' : 'false',
'aria-labelledby': headerId,
'id': contentId
}">
<div data-bind="visible: !disabled, dxScrollView: { showScrollbar: 'onHover', disabled: !showScroll, useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }">
<!-- ko if: values.length === 0 -->
<div class="dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info">
<span class="dx-collectioneditor-empty-text" data-bind="text: emptyAreaText"></span>
</div>
<!-- /ko -->
<!-- ko if: values.length !== 0 -->
<div class="dx-collectioneditor-items" data-bind="foreach: values">
<div class="dx-collectioneditor-item-container dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented" data-bind="attr: { 'aria-selected': selected }, dxAction: { model: $data, action: select }, css: { 'dxd-state-selected' : selected }">
<div class="dx-collection-item"></div>
</div>
</div>
<!-- /ko -->
</div>
</div>
</div>
</div>
</script><script type="text/html" id="dx-boolean">
<div class="propertygrid-editor-checkbox" data-bind="dxCheckBox: getOptions({ value: value, disabled: disabled, elementAttr: { 'aria-label': displayName } }), dxValidator: { validationRules: validationRules || [] }"></div>
</script>
<script type="text/html" id="dx-boolean-select">
<div data-bind="dxLocalizedSelectBox: { dataSource: [ { val: true, text: $root.getLocalization('Yes', 'AnalyticsCoreStringId.ParametersPanel_True') }, { val: false, text: $root.getLocalization('No', 'AnalyticsCoreStringId.ParametersPanel_False') }], inputAttr: { 'aria-label': displayName, id: editorInputId }, valueExpr: 'val', displayExpr: 'text', value: value, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) } }, dxValidator: { validationRules: validationRules || [] }"></div>
</script><script type="text/html" id="dx-commonCollection">
<div class="dx-editor" data-bind="visible: visible">
<div data-bind="dxCollectionEditor: { values: value, displayName: displayName, level: level, info: info }">
</div>
</div>
</script>
<script type="text/html" id="dx-commonCollectionItem">
<div data-bind="template: { name: 'dx-propertieseditor', data: getProperties() }"></div>
</script><script type="text/html" id="item-with-title">
<div class="dx-listitem-with-title" data-bind="text: $data.display, attr: { title: $data.display }"></div>
</script>
<script type="text/html" id="dx-combobox">
<div data-bind="dxLocalizedSelectBox: { dataSource: values, value: value, valueExpr: 'value', displayExpr: 'displayValue', displayCustomValue: true, disabled: disabled,
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="dx-combobox-editable">
<div data-bind="dxLocalizedSelectBox: {
items: values, value: value, valueExpr: 'value', displayExpr: 'displayValue', disabled: disabled,
acceptCustomValue: true,
onCustomItemCreating: function(arg) { return { value: arg.text, displayValue: arg.text }; },
dropDownOptions: { container: $root.getPopupContainer($element) },
popupPosition: { boundary: $root.getPopupContainer($element) },
inputAttr: { 'aria-label': displayName, id: editorInputId },
useLocalizedTextAsValue: true
}">
</div>
</script>
<script type="text/html" id="dx-combobox-undo">
<div data-bind="dxLocalizedSelectBox: { dataSource: values, value: generateValue($root.undoEngine), valueExpr: 'value', displayExpr: 'displayValue', displayCustomValue: true, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) }, inputAttr: { id: editorInputId } },
dxValidator: getValidatorOptions ? getValidatorOptions(validatorOptions || { validationRules: validationRules || [] }) : (validatorOptions || { validationRules: validationRules || [] })">
</div>
</script><script type="text/html" id="dx-property-editor">
<div class="dx-editor" data-bind="visible: visible">
<div class="dx-group" data-bind="dxdAccordion: { collapsed: collapsed, setCollapsed: setCollapsed, getCollapsed: getCollapsed, setCollapsedChangedEvent: setCollapsedChangedEvent }">
<div class="dx-editor-header">
<div class="dx-field" data-bind="attr: {
role: 'treeitem',
'id': isComplexEditor && headerId,
'aria-owns': isComplexEditor && contentId,
'aria-expanded': isComplexEditor && (alwaysShow || !collapsed ? 'true' : 'false') },
css: {'dxrd-accessibility-accordion-trigger dx-accessibility-focus-border-accented': isComplexEditor}">
<div class="dx-field-label dx-accordion-header dxd-text-primary" data-bind="styleunit: padding, css: { 'dx-accordion-empty': templateName === 'dx-emptyHeader' }">
<!-- ko if: isComplexEditor -->
<div data-bind="enable: templateName === 'dx-emptyHeader'">
<!-- ko ifnot: $data.hideCollapsingButton -->
<div class="dx-collapsing-image dxrd-display-inline-block" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !ko.unwrap(collapsed) }"></div>
<!-- /ko -->
<!-- ko if: !!$data.textToSearch -->
<div class="dx-group-header-font" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName }, css: { 'dx-collapsing-image-hidden': $data.hideCollapsingButton }"></div>
<!-- /ko -->
<!-- ko ifnot: !!$data.textToSearch -->
<div class="dx-group-header-font" data-bind="text: displayName, attr: { 'title': displayName }, css: { 'dx-collapsing-image-hidden': $data.hideCollapsingButton }"></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 if: !$data.editorDescriptionAddon && $data.description -->
<div data-bind="service: { name: 'createEditorDescriptionAddOn' }"></div>
<!-- /ko -->
<!-- ko if: $data.editorDescriptionAddon -->
<!-- ko template: { name: $data.editorDescriptionAddon.templateName, data: $data.editorDescriptionAddon.data } --><!-- /ko -->
<!-- /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>
</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-emptyHeader">
</script>
<script type="text/html" id="dx-property-grid-editor-description">
<div class="propertygrid-editor-description" data-bind="dxButtonWithTemplate: { onClick: onClick, icon: 'dxrd-svg-tabs-description_info' }"></div>
</script>
<script type="text/html" id="dx-date">
<div class="dx-datebox-container">
<div data-bind="
dxDateBox: getOptions({
value: value,
closeOnValueChange: true,
type: 'datetime',
disabled: disabled,
inputAttr: { 'aria-label': displayName, id: editorInputId },
dropDownOptions: {
container: $root.getPopupContainer($element),
position: {
at: 'left bottom',
collision: 'flipfit flip',
my: 'left top',
boundary: $root.getPopupContainer($element),
of: $element
}
}
}),
dxValidator: getValidatorOptions ? getValidatorOptions(validatorOptions || { validationRules: validationRules || [] }) : (validatorOptions || { validationRules: validationRules || [] })"></div>
</div>
</script><script type="text/html" id="dx-file">
<div data-bind="dxFileImagePicker: { value: value, placeholderId: 'File', disabled: disabled }"></div>
</script><script type="text/html" id="dx-modificators">
<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 }, click: function() { if(!ko.unwrap($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 }, click: function() { if(!ko.unwrap($parent.disabled)) { italic(!italic()); } }"><!-- ko template: 'dxrd-svg-fontstyle-italic'--><!-- /ko --></div>
<!-- ko ifnot: $parents[2].editorOptions && $parents[2].editorOptions.hideUnderline -->
<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 }, click: function() { if(!ko.unwrap($parent.disabled)) { underline(!underline()); } }"><!-- ko template: 'dxrd-svg-fontstyle-underline'--><!-- /ko --></div>
<!-- /ko -->
<!-- ko ifnot: $parents[2].editorOptions && $parents[2].editorOptions.hideStrikeout -->
<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 }, click: function() { if(!ko.unwrap($parent.disabled)) { strikeout(!strikeout()); } }"><!-- ko template: 'dxrd-svg-fontstyle-strikeout'--><!-- /ko --></div>
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</div>
</div>
</script><script type="text/html" id="dx-image">
<div data-bind="dxFileImagePicker: { value: value, placeholderId: 'Image', accept: 'image/*', type: 'img', disabled: disabled }"></div>
</script><script type="text/html" id="dx-numeric">
<div data-bind="dxNumberBox: getOptions({ value:value, showSpinButtons:true, disabled:disabled, inputAttr: { 'aria-label': displayName, id: editorInputId } }),
dxValidator: getValidatorOptions ? getValidatorOptions(validatorOptions || { validationRules: validationRules || [] }) : (validatorOptions || { validationRules: validationRules || [] })"></div>
</script>
<script type="text/html" id="dx-number-editor">
<div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { 'aria-label': displayName, id: editorInputId } }),
dxValidator: getValidatorOptions ? getValidatorOptions(validatorOptions || { validationRules: validationRules || [] }) : (validatorOptions || { validationRules: validationRules || [] })"></div>
</script> <script type="text/html" id="dx-text">
<!-- ko if: $data.validationRules || $data.validatorOptions -->
<div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { 'aria-label': displayName, 'id': editorInputId }}), dxValidator: getValidatorOptions ? getValidatorOptions(validatorOptions || { validationRules: validationRules || [] }) : (validatorOptions || { validationRules: validationRules || [] })"></div>
<!-- /ko -->
<!-- ko if: !$data.validationRules -->
<div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { 'aria-label': displayName, 'id': editorInputId }})"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dx-string-array">
<div class="dx-field" data-bind="css: { 'dxd-border-accented': $data.isPropertyHighlighted }">
<div class="dx-string-array-container dx-texteditor dx-editor-outlined dx-multiline">
<textarea class="dx-string-array-textarea dx-texteditor-input" data-bind="value: value, disable: disabled"></textarea>
</div>
</div>
</script><script type="text/html" id="dx-propertieseditor">
<div data-bind="css: { 'dx-rtl' : rtl }">
<div class="dx-editors">
<div class="dx-fieldset">
<!-- ko foreach: editors -->
<!-- ko template: editorTemplate -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-objectEditorContent">
<!-- ko if: visible -->
<div data-bind="template: { name: 'dx-propertieseditor', data: viewmodel }"></div>
<!-- /ko -->
</script><script type="text/html" id="dxrd-federated-manageQueries-editor">
<!-- ko if: $data -->
<div>
<div data-bind="dxPopup: {
showTitle: true, width: '750px', height: '475px', title: title(),
rtlEnabled: rtl,
visible: popupVisible,
wrapperAttr: { class: className },
toolbarItems: buttonItems, showCloseButton: true, container: $root.getPopupContainer($element),
position: { of: $root.getPopupContainer($element) },
}">
<div class="dxrd-federated-manageQueries-grid-wrapper dxrd-cursor-default" >
<div class="dxd-border-secondary dxrd-federated-manageQueries-grid" data-bind="dxDataGrid: queriesGrid"></div>
</div>
</div>
</div>
<!-- ko template: { name: $data._queriesPopupHelper.template, data: _queriesPopupHelper } -->
<!-- /ko -->
<!-- /ko -->
</script>
<script type="text/html" id="dx-querybuilder-federation-popup-templates">
<!-- ko if: $data -->
<!-- ko foreach: $data.popupItems -->
<!-- ko template: { name: template, data: model } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-managequeries-selectbox">
<!-- ko with: options -->
<div class="dxrd-managequeries-selectbox">
<div data-bind="dxDropDownButton: $data"></div>
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dx-expressioneditor-main">
<div class="dx-expression-tree">
<!-- ko if: !aceAvailable -->
<div class="dx-expressioneditor-textarea dxd-border-secondary dxd-back-primary2" data-bind="dxTextArea: { value: textAreaValue, isValid: isValid, spellcheck: false, onKeyUp: function() { isValid(true); } }, resizable: resizeHelper.resizable($root.resizeHandler, 's', $element)"></div>
<!-- /ko -->
<!-- ko if: aceAvailable -->
<div class="dx-expressioneditor-textarea dxd-border-secondary dxd-back-primary2" data-bind="dxAceEditor: { value: textAreaValue, editorContainer: editorContainer, theme: theme, options: aceOptions, additionalOptions: additionalOptions, callbacks: callbacks }, resizable: resizeHelper.resizable($root.resizeHandler, 's', $element)"></div>
<!-- /ko -->
<div class="dx-expressioneditor-tools">
<!-- ko with: tools-->
<div class="dx-expressioneditor-tools-tabs">
<!-- ko foreach: toolBox-->
<div data-bind="visible: visible, attr: {
class: 'dx-expressioneditor-tools-tab dxd-back-primary2 '+ ($data.templateName ? $data.templateName : '')}">
<!-- ko if: $data.templateName -->
<!-- ko template: { name: $data.templateName }-->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko-->
</div>
<!-- /ko-->
</div>
</div>
</script>
<script type="text/html" id="dx-expressioneditor">
<div>
<div class="no-margin-right" data-bind="dxEllipsisEditor: { value: displayValue, buttonAction: function() { popupVisible(true); }, disabled: disabled, isValid: modelValueValid, warningMessage: modelValueWarning, inputAttr: { id: editorInputId } }"></div>
<!-- ko template: 'dx-expressioneditor-popup'-->
<!--/ko-->
</div>
</script>
<script type="text/html" id="dx-expressioneditor-popup">
<div data-bind="dxPopup: {
animation: {
show: { type: 'fadeIn', duration: 700 },
hide: { type: 'fadeOut', duration: 700 }
},
showTitle: true,
wrapperAttr: { class: 'dx-expressioneditor dx-popup-general' },
title: title(),
visible: popupVisible,
toolbarItems: buttonItems,
showCloseButton: true,
fullScreen: false,
height: '615px',
maxHeight: '90%',
maxWidth: '90%',
minHeight: 400,
minWidth: 500,
width: '645px',
container: getPopupContainer($element),
position: { of: getPopupContainer($element)},
onContentReady: onContentReady,
onShowing: onShowing,
onHiding: onHiding,
onShown: onShown,
resizeEnabled: true,
onResize: function() { $data.resizeAceEditor() }
}">
<!-- ko if: popupVisible -->
<!-- ko template: "dx-expressioneditor-main" -->
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-expressioneditor-categories">
<div class="dx-expressioneditor-tools-tab-content-wrapper dxd-border-secondary " data-bind="dxScrollView: { showScrollbar: 'onHover' }, resizable: $parents[1].resizeHelper.resizable($root.resizeHandler, 'e')">
<!-- ko foreach: content -->
<!-- ko if: $data.templateName -->
<!-- ko template: $data.templateName-->
<!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $data.templateName -->
<div class="dx-expressioneditor-tools-tab-category dxd-list-item-back-color dxd-back-highlighted" data-bind="css: {'dxd-state-selected': content.isSelected }, text: displayName, dxclick: function() { $parent.click($data.content) }">
</div>
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-expressioneditor-category-accordion">
<div class="dx-fieldset dxrd-margin-0" >
<div data-bind="dxdAccordion: { collapsed: collapsed }">
<div class="dx-accordion-header dx-expressioneditor-tools-tab-accordion-header dxd-list-item-back-color dxd-back-highlighted" data-bind="css: {'dxd-state-selected': $data.isSelected }, dxclick: function() { $data.updateContent($data.allItems(), $data.isSelected); $parent.click($data.content) }">
<div class="dx-collapsing-image dxrd-display-inline-block" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed() }" ></div>
<span class="dx-expressioneditor-tools-tab-header" data-bind="text: displayName"></span>
</div>
<div class="dx-accordion-content">
<!-- ko foreach: items-->
<div class="dx-expressioneditor-tools-tab-item dxd-text-primary dxd-list-item-back-color dxd-back-highlighted" data-bind="css: {'dxd-state-selected': isSelected }, text: $data.display, dxclick: function() { $parent.updateContent($data.data, $data.isSelected); $parents[1].click($parent.content); }"></div>
<!-- /ko -->
</div>
</div>
</div>
</script><script type="text/html" id="dx-expressioneditor-description">
<div class="dx-expressioneditor-tools-tab-content-wrapper dxd-border-secondary " data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<div class="dx-expressioneditor-description-content dxd-text-primary" data-bind="text: content"></div>
</div>
</script><script type="text/html" id="dx-expressioneditor-fields">
<div class="dx-expressioneditor-fields">
<div data-bind="treeListSearchPanel: { controllers: [
ko.unwrap($data.parameters) ? ko.unwrap($data.parameters).treeListController : ko.unwrap($data.parameters),
ko.unwrap($data.fields) ? ko.unwrap($data.fields).treeListController : ko.unwrap($data.fields)
] }">
</div>
<div class="dx-expressioneditor-tools-tab-content-wrapper dxd-border-secondary " data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<!-- ko if: fields -->
<div class="dx-treelist-wrapper" data-bind="treelist: fields"></div>
<!-- /ko -->
<!-- ko if: $data.parameters -->
<div class="dx-treelist-wrapper" data-bind="treelist: parameters"></div>
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-ee-treelist-item">
<div class="dx-treelist-item dxd-list-item-back-color dxd-back-highlighted" data-bind="visible: visible, event: { dblclick: function() { actions[0].clickAction($element); }}, styleunit: padding, css: { 'dx-treelist-item-selected dxd-state-selected': isSelected }">
<div class="dx-treelist-item-images">
<!-- ko if: hasItems -->
<div class="dx-treelist-collapsedbutton" data-bind="css: nodeImageClass, template: 'dxrd-svg-collapsed', click: toggleCollapsed"></div>
<!-- /ko -->
<!-- ko ifnot: hasItems -->
<div class="dx-treelist-collapsedbutton"></div>
<!-- /ko -->
<div class="dx-treelist-image" data-bind="css: $data.imageClassName, template: {name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}, attr: { title: text }"> </div>
</div>
<div class="dx-treelist-caption">
<div class="dx-treelist-selectedcontent" data-bind="click: toggleSelected">
<!-- ko template: { name: 'dx-treelist-item-text-content' } -->
<!-- /ko -->
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-expressioneditor-selectedcontent">
<!-- ko with: content -->
<!-- ko template: $data-->
<!-- /ko -->
<!-- /ko -->
</script>
<script type="text/html" id="dx-expressioneditor-collection">
<div class="dx-expressioneditor-tools-tab-content-wrapper dxd-border-secondary" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<!-- ko foreach: items -->
<div data-bind="attr: { class: 'dx-expressioneditor-tools-tab-item dxd-list-item-back-color dxd-text-primary dxd-back-highlighted ' + ($data.class ? $data.class : '') }, text: $data.displayName || $data.text, css: { 'dx-expressioneditor-state-selected dxd-state-selected': $parent.selectedItem() === $data }, dxclick: function() { $parent.selectedItem($data); $parents[2].click($data); }, event: { dblclick: function() { $parents[2].dblclick($data, $element); } }"></div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-expressioneditor-collection-function">
<div class="dx-expressioneditor-collection-function">
<div class="dx-expressioneditor-collection-function-search">
<div data-bind="dxTextBox: { value: textToSearch, showClearButton: true, valueChangeEvent: 'keyup', placeholder: $parents[2].searchPlaceholder() }"></div>
</div>
<div class="dx-expressioneditor-collection-function-items dxd-border-secondary" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<!-- ko foreach: availableItems -->
<div class="dx-expressioneditor-tools-tab-item dxd-list-item-back-color dxd-text-primary dxd-back-highlighted" data-bind="css: { 'dx-expressioneditor-state-selected dxd-state-selected': $parent.selectedItem() === $data }, dxclick: function() { $parent.selectedItem($data); $parents[2].click($data); }, event: { dblclick: function() { $parents[2].dblclick($data, $element); } }, searchHighlighting: { text: $data.displayName || $data.text, textToSearch: $parent.textToSearch }"></div>
<!-- /ko -->
</div>
</div>
</script><script type="text/html" id="dx-filtereditor-content">
<div class="dx-filtereditor-tree-container" data-bind="css: { 'advanced': advancedMode }">
<!-- ko template: 'dx-filtereditor-content-tree' -->
<!-- /ko -->
</div>
<div class="dx-filtereditor-text-container" data-bind="css: { 'advanced': advancedMode }, visible: textVisible">
<!-- ko template: 'dx-filtereditor-content-text'-->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-filtereditor-plain-content-text">
<div class="dx-filtereditor-text-container" data-bind="css: $data.getTextCssClasses(), style: { height: textContentHeightPerc }">
<!-- ko template: 'dx-filtereditor-content-text'-->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-filtereditor-content-plain">
<div class="dx-filtereditor-plain-advanced" data-bind="dxCheckBox: { value: advancedMode, text: advancedModeText }, style: $data.getCheckBoxStyles()"></div>
<div class="dx-filtereditor-plain-content" data-bind="style: $data.getContentStyles()">
<!-- ko if: $data.advancedModeTop() -->
<!-- ko template: 'dx-filtereditor-plain-content-text'-->
<!-- /ko -->
<!-- /ko -->
<div class="dx-filtereditor-tree-container" data-bind="css: { 'advanced': advancedMode }">
<!-- ko template: 'dx-filtereditor-content-tree' -->
<!-- /ko -->
</div>
<!-- ko ifnot: $data.advancedModeTop() -->
<!-- ko template: 'dx-filtereditor-plain-content-text'-->
<!-- /ko -->
<!-- /ko -->
<div class="dx-filtereditor-plain-disabled" data-bind="visible: $data.options().disabled()"></div>
</div>
</script>
<script type="text/html" id="dx-filtereditor-content-text">
<!-- ko if: !aceAvailable -->
<div class="dx-filtereditor-text dx-default-border-style dxd-border-secondary" data-bind="dxTextArea: { value: displayValue, isValid: isValid, onInput: onInput, spellcheck: false }, cacheElement: { action: function(element) { cacheElement(element) } }"></div>
<!-- /ko -->
<!-- ko if: aceAvailable -->
<div class="dx-filtereditor-text dx-default-border-style dxd-border-secondary dx-textarea dx-textbox dx-texteditor dx-editor-filled" data-bind="css: {'dx-invalid': !$data.isValid(), 'dx-state-focused': textFocused }">
<div class="dx-texteditor-container">
<div class="dx-filtereditor-ace dxd-back-primary2" data-bind="dxAceEditor: { value: $data.displayValue, theme: helper.aceTheme, editorContainer: editorContainer, options: aceOptions, additionalOptions: additionalOptions }"></div>
<div class="dx-texteditor-buttons-container"></div>
</div>
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dx-filtereditor-content-tree">
<div class="dx-filtereditor-tree dxd-border-secondary" data-bind="dxScrollView: { showScrollbar: 'onHover', direction: 'both' }">
<!-- ko with: operandSurface -->
<!-- ko template: { name: $data.templateName, data: $data, if: $parent.isSurfaceValid }-->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- ko ifnot: isSurfaceValid -->
<div class="dx-filtereditor-tree-lockscreen" data-bind="dxclick: function() { $data.advancedMode(true); }">
<div class="dx-filtereditor-tree-lockscreen-content">
<div class="dx-filtereditor-tree-lockscreen-content-text" data-bind="text: invalidMessage()">
</div>
</div>
</div>
<!-- /ko -->
</script><script type="text/html" id="dx-filtereditor">
<div>
<div class="no-margin-right" data-bind="dxEllipsisEditor: { value: modelDisplayValue, isValid: modelValueIsValid, disabled: disabled, buttonAction: function() { popupVisible(true); }, inputAttr: { id: editorInputId } }"></div>
<!-- ko template: 'dx-filtereditor-popup' -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-filtereditor-advanced">
<div class="dx-filtereditor dxrd-width-100 dxrd-height-100" data-bind="style: { pointerEvents: $data.options().disabled() ? 'none' : '' }">
<!-- ko template: 'dx-filtereditor-content' -->
<!-- /ko -->
<!-- ko template: 'dx-filtereditor-content-popups' -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-filtereditor-plain">
<div class="dx-filtereditor dxrd-width-100 dxrd-height-100">
<!-- ko template: 'dx-filtereditor-content-plain' -->
<!-- /ko -->
<!-- ko template: 'dx-filtereditor-content-popups' -->
<!-- /ko -->
</div>
</script><script id="dx-filtereditor-aggregate-common" type="text/html">
<!-- ko with: property-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
<div data-bind="service: { name: 'createChangeType' }"></div>
<!-- ko if: $data.aggregatedExpression() -->
<div class="criteria-operator-text dxd-filter-editor-text-color">(</div>
<!-- ko with: aggregatedExpression-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
<div class="criteria-operator-text dxd-filter-editor-text-color">)</div>
<!-- /ko -->
</script>
<script id="dx-filtereditor-aggregate" type="text/html">
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-action" data-bind="dxclick: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"><!-- ko template: 'dxrd-svg-filtereditor-remove' --><!-- /ko --></div>
</div>
<!-- ko template: { name: 'dx-filtereditor-aggregate-common' }-->
<!-- /ko -->
</div>
<div class="criteria-operator-content">
<!-- ko with: condition-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script><script id="dx-filtereditor-between" type="text/html">
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-action" data-bind="dxclick: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"><!-- ko template: 'dxrd-svg-filtereditor-remove' --><!-- /ko --></div>
</div>
<!-- ko with: property-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
<div data-bind="service: { name: 'createChangeType' }"></div>
<!-- ko with: begin-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
<div class="criteria-operator-text dxd-filter-editor-text-color">and</div>
<!-- ko with: end-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script>
<script id="dx-filtereditor-binary" type="text/html">
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-action" data-bind="dxclick: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"><!-- ko template: 'dxrd-svg-filtereditor-remove' --><!-- /ko --></div>
</div>
<!-- ko with: leftOperand-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
<div data-bind="service: { name: 'createChangeType' }"></div>
<!-- ko with: rightOperand-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script><script id="dx-filtereditor-common" type="text/html">
<!-- ko template: contentTemplateName -->
<!-- /ko -->
<!-- ko if: $data.leftPart && $data.leftPart.condition -->
<div class="criteria-operator-content">
<!-- ko with: leftPart-->
<!-- ko with: condition-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
</script>
<script id="dx-filtereditor-function-lightweight" type="text/html">
<div class="criteria-operator-text dxd-filter-editor-text-color" data-bind="css: css">
<div class="criteria-operator-text dxd-filter-editor-text-color" data-bind="text: displayType"></div>
<div data-bind="service: { name: 'createChangeValueType' }"></div>
</div>
</script>
<script id="dx-filtereditor-function" type="text/html">
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-action" data-bind="dxclick: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"><!-- ko template: 'dxrd-svg-filtereditor-remove' --><!-- /ko --></div>
</div>
<!-- ko template: { name: $data.leftPart.templateName, data: $data.leftPart }-->
<!-- /ko -->
<div data-bind="service: { name: 'createChangeType' }"></div>
<!-- ko foreach: rightPart -->
<!-- ko template: { name: $data.templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script><script id="dx-filtereditor-group" type="text/html">
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-action" data-bind="dxclick: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"><!-- ko template: 'dxrd-svg-filtereditor-remove' --><!-- /ko --></div>
</div>
<div class="criteria-operator-item">
<div data-bind="service: { name: 'createChangeType' }"></div>
</div>
<div data-bind="service: { name: 'createAddButton' }"></div>
</div>
<div class="criteria-operator-content">
<!-- ko foreach: operands -->
<!-- ko template: { name: templateName, data: $data } -->
<!-- /ko-->
<!-- /ko -->
</div>
</div>
</script>
<script id="dx-filtereditor-in" type="text/html">
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-action" data-bind="dxclick: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"><!-- ko template: 'dxrd-svg-filtereditor-remove' --><!-- /ko --></div>
</div>
<!-- ko with: criteriaOperator-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
<div data-bind="service: { name: 'createChangeType' }"></div>
<!-- ko if: $data.operands().length > 1-->
<div class="criteria-operator-item criteria-operator-text dxd-filter-editor-text-color">(</div>
<div class="criteria-operator-item">
<!-- ko foreach: $data.operands() -->
<!-- ko template: { name: $data.templateName, data: $data }-->
<!-- /ko -->
<div class="criteria-operator-item criteria-operator-text dxd-filter-editor-text-color">,</div>
<!-- /ko -->
</div>
<div class="criteria-operator-item criteria-operator-text dxd-filter-editor-text-color">)</div>
<!-- /ko -->
<!-- ko if: $data.operands().length == 1-->
<!-- ko template: { name: $data.operands()[0].templateName, data: $data.operands()[0] }-->
<!-- /ko -->
<!-- /ko -->
<div class="criteria-operator-action" data-bind="dxclick: addValue">
<div class="criteria-operator-action-image dx-image-filtereditor-add"><!-- ko template: 'dxrd-svg-filtereditor-add' --><!-- /ko --></div>
</div>
</div>
</div>
</script><script id="dx-filtereditor-parameter" type="text/html">
<div class="criteria-operator-text dxd-filter-editor-text-color" data-bind="css: css">
<div data-bind="service: { name: 'createChangeParameter' }"></div>
<!-- ko if: $data.canChange -->
<div data-bind="service: { name: 'createChangeValueType' }"></div>
<!-- /ko -->
</div>
</script><script id="dx-filtereditor-property" type="text/html">
<div class="criteria-operator-text dxd-filter-editor-text-color" data-bind="css: css">
<div data-bind="service: { name: 'createChangeProperty' }"></div>
<!-- ko if: $data.canChange -->
<div data-bind="service: { name: 'createChangeValueType' }"></div>
<!-- /ko -->
</div>
</script><script id="dx-filtereditor-unary" type="text/html">
<!-- ko if: $data.operand().reverse -->
<!-- ko template: {name: $data.operand().templateName, data: $data.operand() }-->
<!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $data.operand().reverse -->
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-action" data-bind="dxclick: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"><!-- ko template: 'dxrd-svg-filtereditor-remove' --><!-- /ko --></div>
</div>
<!-- ko with: operand-->
<div class="criteria-operator-item">
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
</div>
<!-- /ko -->
<div data-bind="service: { name: 'createChangeType' }"></div>
</div>
</div>
<!-- /ko -->
</script>
<script id="dx-filtereditor-not" type="text/html">
<!-- ko with: operand-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
</script>
<script id="dx-filtereditor-value" type="text/html">
<div class="criteria-operator-item" data-bind="visible: isEditable">
<!-- ko if: $data.items.length === 0 -->
<!-- ko if: $data.specifics() === "string" || $data.specifics() === "guid" -->
<div class="criteria-operator-item-editor" data-bind="dxTextBox: getStringEditorOptions($element), focus: { on: isEditable }"></div>
<!-- /ko -->
<!-- ko if: $data.specifics() === "bool" -->
<div class="criteria-operator-item-editor" data-bind="focus: isEditable, dxLocalizedSelectBox: getBoolEditorOptions($element, $root)"></div>
<!-- /ko -->
<!-- ko if: $data.specifics() === "date" || $data.specifics() === "time" || $data.specifics() === "datetime" -->
<div class="criteria-operator-item-editor" data-bind="focus: isEditable, dxDateBox: getDateEditorOptions($element, $root, $data.specifics())"></div>
<!-- /ko -->
<!-- ko if: $data.specifics() !== "string" && $data.specifics() !== "bool" && $data.specifics() !== "date" && $data.specifics() !== "guid" && $data.specifics() !== "time" && $data.specifics() !== "datetime" -->
<div class="criteria-operator-item-editor" data-bind="dxTextBox: getNumberEditorOptions($element), focus: { on: isEditable }"></div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: $data.items.length > 0 -->
<div class="criteria-operator-item-editor" data-bind="focus: isEditable, dxSelectBox: getListEditOptions($element, $root)"></div>
<!-- /ko -->
</div>
<div class="criteria-operator-text dxd-filter-editor-text-color criteria-operator-item-value dxd-filter-editor-value-back-color" data-bind="visible: !isEditable()">
<div class="criteria-operator-text dxd-filter-editor-text-color clickable" data-bind="text: value, click: function() { isEditable(true); }, css: { 'default': $data.isDefaultDisplay() } "></div>
<div data-bind="service: { name: 'createChangeValueType' }"></div>
</div>
</script>
<script type="text/html" id="dx-filtereditor-popup">
<div data-bind="dxPopup: {
animation: {
show: { type: 'fadeIn', duration: 700 },
hide: { type: 'fadeOut', duration: 700 }
},
showTitle: true,
wrapperAttr: { class: 'dx-filtereditor dx-popup-general' },
resizeEnabled: true,
onResize: function() { $data.resizeAceEditor() },
width: 700,
height: 500,
maxHeight: '95%',
maxWidth: '95%',
minHeight: 300,
minWidth: 400,
title: options() && options().title(),
visible: popupVisible,
onShown: function() { $data.focusText() },
toolbarItems: buttonItems,
showCloseButton: true,
container: getPopupContainer($element),
position: { of: getPopupContainer($element) }
}">
<!-- ko template: 'dx-filtereditor-content' -->
<!-- /ko -->
</div>
<!-- ko template: 'dx-filtereditor-content-popups' -->
<!-- /ko -->
</script>
<script type="text/html" id="dx-filtereditor-create">
<div class="criteria-operator-action" data-bind="dxclick: showPopup">
<div class="criteria-operator-action-image dx-image-filtereditor-add"><!-- ko template: 'dxrd-svg-filtereditor-add' --><!-- /ko --></div>
</div>
</script>
<script type="text/html" id="dx-filtereditor-change">
<div class="criteria-operator-text dxd-filter-editor-text-color clickable" data-bind="text: target.displayType, dxclick: showPopup, css: target.css"></div>
</script>
<script type="text/html" id="dx-filtereditor-changeParameter">
<div class="criteria-operator-text dxd-filter-editor-text-color clickable " data-bind="text: target.parameterName(), dxclick: showPopup, css: { 'dxd-state-selected': target.isSelected }"></div>
</script>
<script type="text/html" id="dx-filtereditor-changeProperty">
<div class="criteria-operator-text dxd-filter-editor-text-color clickable" data-bind="text: target.displayName, dxclick: showPopup, css: { 'dxd-state-selected': target.isSelected }"></div>
</script>
<script id="dx-filtereditor-changeValueType" type="text/html">
<div class="criteria-operator-action" data-bind="dxclick: showPopup">
<div class="criteria-operator-action-image-edit dx-image-filtereditor-edit"><!-- ko template: 'dxrd-svg-filtereditor-edit' --><!-- /ko --></div>
</div>
</script><script type="text/html" id="dx-filtereditor-content-popups">
<div class="dx-selectbox-popup-wrapper dx-dropdownlist-popup-wrapper dx-filtereditor-criteriaoperator-popup dx-dropdowneditor-overlay" data-bind="dxPopupWithAutoHeight: {
minWidth:'170px',
maxWidth:'500px',
width: 'auto',
height: '300px',
wrapperAttr: { class: 'dx-selectbox-popup-wrapper dx-dropdownlist-popup-wrapper dx-filtereditor-criteriaoperator-popup dx-dropdowneditor-overlay' },
focusStateEnabled: false,
position: $data.rtl ? { my: 'right top', at: 'right bottom', of: popupService.target} : { my: 'left top', at: 'left bottom', of: popupService.target },
container: $data.getPopupContainer($element),
target: popupService.target,
showTitle: false,
showCloseButton: false,
animation: {},
hideOnOutsideClick: true,
shading: false,
visible: popupService.visible }">
<!-- ko with: popupService-->
<!-- ko with: data -->
<!-- ko template: template-->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-filtereditor-search-panel">
<div class="dx-filtereditor-popup-item dx-filtereditor-search dx-item dx-list-item dxd-list-item-back-color dxd-back-highlighted">
<div class="dx-item-content dxd-border-secondary dxd-text-primary dx-list-item-content" data-bind="dxTextBox: {
placeholder: searchPlaceholder(),
value: ($data.value || $data.filterString),
height: '100%',
width: '100%',
stylingMode: 'underlined',
valueChangeEvent: 'keyup'
}">
</div>
</div>
</script>
<script type="text/html" id="dx-filtereditor-popup-common">
<!-- ko if: $data.isFiltered -->
<div data-bind="template: { name: 'dx-filtereditor-search-panel', data: $data }"></div>
<!-- /ko -->
<div class="dx-widget" data-bind="dxScrollView: { showScrollbar: 'onHover' }, css: { 'dx-filtereditor-filtered': isFiltered }">
<!-- ko foreach: data -->
<!-- ko if: !$data.hidden -->
<!-- ko ifnot: $parent.isFiltered -->
<div class="dx-filtereditor-popup-item dx-item dx-list-item dxd-list-item-back-color dxd-back-highlighted">
<span class="dx-item-content dx-list-item-content"
data-bind="text: $data.displayText || $data.name, click: function() { $parent.click($data); }, attr: {'title': $data.displayText || $data.name } "></span>
</div>
<!-- /ko -->
<!-- ko if: $parent.isFiltered -->
<div class="dx-filtereditor-popup-item dx-item dx-list-item dxd-list-item-back-color dxd-back-highlighted">
<div class="dx-item-content dx-list-item-content"
data-bind="searchHighlighting: { text: $data.displayText || $data.name, textToSearch: $parent.filterString }, click: function() { $parent.click($data); }, attr: {'title': $data.displayText || $data.name } ">
</div>
</div>
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-filtereditor-popup-treelist">
<div class="dx-filtereditor-search" data-bind="treeListSearchPanel: { controllers: data().treeListController, template: 'dx-filtereditor-search-panel' } "></div>
<div class="dx-widget dx-filtereditor-filtered" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<div class="dx-treelist-wrapper" data-bind="treelist: data"></div>
</div>
</script><script type="text/html" id="dx-format-string-list">
<div class="dx-format-string-list dxd-format-string-editor-border-color dxd-border-secondary">
<div data-bind="dxList: { items: $data.items, selectedItems: $data.selectedItems, onItemClick: $data.action, selectionMode: 'single', activeStateEnabled: false }">
<div data-options="dxTemplate: { name: 'item' }" class="dx-theme-border-color">
<div class="dx-image-filtereditor-remove" data-bind="click: $parent.removeItem, visible: $data.canRemove"><!-- ko template: 'dxrd-svg-filtereditor-remove' --><!-- /ko --></div>
<div class="dx-format-string-list-item" data-bind="text: $data.displayName"></div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-format-string-edit-area">
<div class="dx-format-string-content-area-title dxd-text-primary" data-bind="text: getDisplayText('types')"></div>
<div class="dx-format-string-formats">
<!-- ko template: { name: 'dx-format-string-list', data: { items: patternList, action: setFormat, removeItem: removeCustomFormat, selectedItems: selectedFormats } } -->
<!-- /ko -->
<div class="dx-format-string-customization">
<div class="dx-format-string-customization-add" data-bind="dxButton:{ onClick: addCustomFormat, text: getDisplayText('add'), disabled: !canAddCustomFormat() }"></div>
<div class="dx-format-string-customization-value dx-format-string-value dxd-back-primary" data-bind="dxTextBox: { value: formatResult, onInput: function(e) { updateInputText('formatResult', e.component); } }"></div>
</div>
</div>
</script>
<script type="text/html" id="dx-format-string-edit-area-general">
<div class="dx-format-string-content-area-title dxd-text-primary" data-bind="text: getDisplayText('prefix')"></div>
<div class="dx-format-string-customization-general-value dx-format-string-value" data-bind="dxTextBox: { value: formatPrefix, onInput: function(e) { updateInputText('formatPrefix', e.component); } }"></div>
<div class="dx-format-string-content-area-title dxd-text-primary" data-bind="text: getDisplayText('suffix')"></div>
<div class="dx-format-string-customization-general-value dx-format-string-value" data-bind="dxTextBox: { value: formatSuffix, onInput: function(e) { updateInputText('formatSuffix', e.component); } }"></div>
</script>
<script type="text/html" id="dx-format-string">
<div>
<div class="no-margin-right" data-bind="dxEllipsisEditor: { value: value, disabled: disabled, buttonAction: function() { popupVisible(true); } }"></div>
<div data-bind="dxPopup: {
wrapperAttr: { class: 'dx-format-string dx-popup-general' },
showTitle: true,
width: '95%',
height: '95%',
minWidth: 650,
title: getDisplayText('title'),
visible: popupVisible,
toolbarItems: buttonItems,
showCloseButton: true,
container: getPopupContainer($element),
position: { of: getPopupContainer($element) }
}">
<div class="dx-format-string-content">
<div class="dx-format-string-content-area-left">
<div class="dx-format-string-content-area-title dxd-text-primary" data-bind="text: getDisplayText('category')"></div>
<!-- ko template: { name: 'dx-format-string-list', data: { items: types, action: setType, selectedItems: selectedTypes } } -->
<!-- /ko -->
</div>
<div class="dx-format-string-content-area-right">
<!-- ko if: !isGeneralType -->
<!-- ko template: 'dx-format-string-edit-area' -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: isGeneralType -->
<!-- ko template: 'dx-format-string-edit-area-general' -->
<!-- /ko -->
<!-- /ko -->
<div class="dx-format-string-preview-area" data-bind="css: { 'dx-format-general': isGeneralType }">
<div class="dx-format-string-preview-area-caption dxd-text-primary" data-bind="text: getDisplayText('preview')"></div>
<div class="dx-format-string-preview-value dxd-format-string-editor-border-color dxd-text-primary dxd-back-primary dxd-border-secondary">
<span class="dx-format-string-preview-value-inner" data-bind="text: previewString"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-treelist-item-actions">
<!-- ko foreach: actions -->
<!-- ko if: $data.templateName && (ko.unwrap($root.canAddItems) || $root.canAddItems === undefined) -->
<!-- ko template: templateName -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: !$data.templateName && (ko.unwrap($root.canAddItems) || canAddItems) -->
<div class="dx-treelist-action" data-bind="dxButtonWithTemplate: { onClick: function() { clickAction($parent); }, icon: ko.unwrap($data.imageTemplateName), iconClass: $data.imageClassName, visible: (ko.unwrap($data.visible) == undefined) || ko.unwrap($data.visible), disabled: $data.disabled && $data.disabled() }, attr: { title: $data.displayText && $data.displayText() || text }"></div>
<!-- /ko -->
<!-- /ko -->
</script>
<script type="text/html" id="dx-treelist-edit-action">
<div class="dx-treelist-action-edit dx-accordion-button" data-bind="dxButtonWithTemplate: { icon: 'dxrd-svg-operations-edit', iconClass: 'dx-image-edit', onClick: $parent.reverseCollapsed }, visible: $parent.hasContent, attr: { title: $data.displayText() }"></div>
</script>
<script type="text/html" id="dx-treelist-item-actions-with-edit">
<!-- ko template: { name: 'dx-treelist-edit-action', data: treeListEditAction } -->
<!-- /ko -->
<!-- ko template: 'dx-treelist-item-actions' -->
<!-- /ko -->
</script>
<script type="text/html" id="dx-treelist-item-ellipsis">
<div class="dx-treelist-item dxd-list-item-back-color dxd-back-highlighted" data-bind="styleunit: padding, click: events.click">
<div class="dx-treelist-collapsedbutton"></div>
<div class="dx-treelist-caption">
<div class="dx-treelist-selectedcontent">
<div class="dx-treelist-text-wrapper">
<div class="dx-treelist-ellipsis-text dxd-text-accented dxd-hyperlink-color" data-bind="text: text"></div>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-treelist-item">
<!-- ko if: visible -->
<!-- ko if: hasContent -->
<!-- ko template: templates.accordionItem -->
<!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: hasContent -->
<!-- ko template: templates.headerItem -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</script>
<script type="text/html" id="dx-treelist-accordion-item">
<div data-bind="dxdAccordionExt: { collapsed: collapsed, lazyContentRendering: true, setCollapsedChangedEvent: setCollapsedChangedEvent }">
<!-- ko template: templates.headerItem -->
<!-- /ko -->
<div class="dx-fieldset dx-accordion-content dxd-back-primary">
<!-- ko with: data -->
<!-- ko template: { name: contenttemplate } -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-treelist-item-actions-container">
<div class="dx-treelist-action-container" data-bind="visible: isSelected || isHovered">
<!-- ko template: actionsTemplate -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-treelist-header-item">
<div role="treeitem" class="dx-treelist-item dxd-list-item-back-color dxd-back-highlighted dx-accessibility-treelist-item dx-accessibility-focus-border-accented" data-bind="event: events,
styleunit: padding, css: cssRules,
attr: attr">
<!-- ko if: hasItems-->
<div class="dx-treelist-collapsedbutton" data-bind="css: nodeImageClass, template: 'dxrd-svg-collapsed', click: toggleCollapsed"></div>
<!-- /ko -->
<div class="dx-treelist-caption" data-bind="style: { 'padding-left': hasItems ? '0px': '18px' }">
<!-- ko if: actions && actions.length > 0 -->
<!-- ko template: templates.actionsContainer -->
<!-- /ko -->
<!-- /ko -->
<div class="dx-treelist-selectedcontent" data-bind="click: function(s, e) { $root.hideContextMenu && $root.hideContextMenu(); toggleSelected(s, e); }, event: $root.ContextMenusEnabled && $root.ContextMenusEnabled() ? { contextmenu: toggleSelected } : null, draggable: isDraggable ? dragDropHandler : null">
<!-- ko template: templates.headerItemContent -->
<!-- /ko -->
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-treelist-item-text-content">
<div class="dx-treelist-text-wrapper">
<!--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 -->
</div>
</script>
<script type="text/html" id="dx-treelist-header-item-caption-content">
<div class="dx-treelist-image" data-bind="css: imageClassName, template: { name: imageTemplateName, if: !!imageTemplateName }, attr: { title: text }"> </div>
<!-- ko template: templates.itemTextContent -->
<!-- /ko -->
</script><script type="text/html" id="dx-treelist-item-with-hover">
<div data-bind="visible: visible">
<!-- ko if: hasContent -->
<!-- ko template: "dx-treelist-accordion-item-with-hover" -->
<!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: hasContent -->
<!-- ko template: "dx-treelist-header-item-with-hover" -->
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-treelist-accordion-item-with-hover">
<div data-bind="dxdAccordionExt: { collapsed: collapsed, lazyContentRendering: true, setCollapsedChangedEvent: setCollapsedChangedEvent }">
<!-- ko template: "dx-treelist-header-item-with-hover" -->
<!-- /ko -->
<div class="dx-fieldset dx-accordion-content dxd-back-primary">
<!-- ko with: data -->
<!-- ko template: { name: contenttemplate } -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-treelist-header-item-with-hover">
<div class="dx-background-inheritor dxd-back-highlighted dxd-state-selected">
<div class="dx-treelist-item dx-fontsize-reestablished dxd-list-item-back-color" data-bind="event: events, styleunit: padding, css: { 'dx-treelist-item-selected dxd-state-selected dxd-back-secondary': isSelected || isMultiSelected }">
<div class="dx-treelist-collapsedbutton" data-bind="css: nodeImageClass, template: 'dxrd-svg-collapsed', click: toggleCollapsed, style: { 'visibility': hasItems ? 'visible' : 'hidden' }"></div>
<div class="dx-treelist-caption">
<!-- ko if: actions && actions.length > 0 -->
<div class="dx-treelist-action-container" data-bind="visible: isSelected || isHovered">
<!-- ko template: actionsTemplate -->
<!-- /ko -->
</div>
<!-- /ko -->
<div class="dx-treelist-selectedcontent" data-bind="click: toggleSelected, draggable: isDraggable ? dragDropHandler : null">
<div class="dx-treelist-image" data-bind="css: imageClassName, template: { name: imageTemplateName, if: !!imageTemplateName }, attr: { title: text }"> </div>
<div class="dx-treelist-text-wrapper">
<div class="dx-treelist-text" data-bind="text: text, attr: { title: text }"></div>
</div>
</div>
</div>
</div>
</div>
</script><script type="text/html" id="dx-treelist">
<div role="group" class="dx-treelist dxd-text-primary">
<!-- ko foreach: items -->
<!-- ko lazy: { resolver: resolver, innerBindings: { template: templateName } } -->
<!-- /ko -->
<!-- ko if: !collapsed -->
<!-- ko template: { name: 'dx-treelist' } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-treelist-search-panel">
<div class="dxrd-treelist-search-panel" data-bind="dxTextBox: { mode: 'search', value:value, valueChangeEvent: 'keyup', showClearButton: true, placeholder: searchPlaceholder()}"></div>
</script>
<script type='text/html' id='dxdd-connection-line'>
<svg class="dxdd-connection-line dxrd-width-100 dxrd-height-100" >
<line class="dxd-qb-relationship-line-color" data-bind="attr: { x1: startPoint().relativeX, y1: startPoint().relativeY, x2: endPoint().relativeX, y2: endPoint().relativeY }" />
</svg>
</script><script type='text/html' id='dxdd-connecting-point'>
<div class="dxdd-connecting-point" data-bind="styleunit: position, trackCursor: underCursor, style: { 'marginLeft': -3 * _context.zoom() + 'px', 'marginTop': -3 * _context.zoom() + 'px' }, draggable: $root.connectingPointDragHandler">
<svg class="dxrd-width-100 dxrd-height-100">
<line x1="0" y1="0" x2="100%" y2="100%" />
<line x1=0 y1="100%" x2="100%" y2="0" />
</svg>
</div>
</script>
<script type='text/html' id='dxdd-connection-point-selection'>
<div class="dxrd-control" data-bind="draggable: $root.connectionPointDragHandler, styleunit: { top: relativeY, left: relativeX }">
</div>
</script>
<script type='text/html' id='dxdd-connector'>
<div class="dxdd-connector" data-bind="styleunit: position, trackCursor: underCursor">
<!-- ko template: { name: 'dxdd-connection-line' } -->
<!-- /ko -->
</div>
</script>
<script type='text/html' id='dxdd-connector-selection'>
<div class="dxdd-connector" data-bind="styleunit: position, dxclick: function() {}, draggable: $root.dragHandler">
<!-- ko template: { name: 'dxdd-connection-line' } -->
<!-- /ko -->
<!-- ko with: startPoint -->
<!-- ko template: { name: 'dxdd-connection-point-selection' } -->
<!-- /ko -->
<!-- /ko -->
<!-- ko with: endPoint -->
<!-- ko template: { name: 'dxdd-connection-point-selection' } -->
<!-- /ko -->
<!-- /ko -->
</div>
</script><script type='text/html' id='dxdd-routed-connection-line'>
<svg class="dxdd-connection-line">
<defs>
<!-- ko if: showArrow -->
<marker data-bind="attr: { id: 'dxqb-arrow_end' + connectorID() }" viewBox="0 0 5 10" refX="5" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="14" markerHeight="14">
<polyline class="dxd-qb-relationship-line-color" points="0,0 5,5 0,10" />
</marker>
<!-- /ko -->
<!-- ko if: showRightArrow -->
<marker data-bind="attr: { id: 'dxqb-arrow_start' + connectorID() }" viewBox="0 0 5 10" refX="5" refY="5"
markerUnits="userSpaceOnUse" orient="auto-start-reverse"
markerWidth="14" markerHeight="14">
<polyline class="dxd-qb-relationship-line-color" points="0,0 5,5 0,10" />
</marker>
<!-- /ko -->
</defs>
<polyline class="dxd-qb-relationship-line-color" fill="none" data-bind="attr: {
points: routePointsSet,
'marker-end': showArrow() ? 'url(#dxqb-arrow_end' + connectorID() + ')' : '',
'marker-start': showRightArrow() ? 'url(#dxqb-arrow_start' + connectorID() + ')' : ''
}" />
</svg>
</script>
<script type='text/html' id='dxdd-routed-connector'>
<div class="dxdd-connector" data-bind="styleunit: position, visible: isVisible">
<!-- ko template: { name: 'dxdd-routed-connection-line' } -->
<!-- /ko -->
<!-- ko foreach: routeLineWrappers -->
<div data-bind="styleunit: position" class="dxrd-position-absolute">
<!-- ko with: $parent -->
<div class="dxd-selectable dxrd-position-relative dxrd-width-100 dxrd-height-100" data-bind="trackCursor: underCursor, click: $root.selectItemProperties" ></div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</script>
<script type='text/html' id='dxdd-routed-connector-selection'>
<div class="dxdd-connector dxrd-selected dxd-state-selected" data-bind="styleunit: position, dxclick: function() {}, visible: isVisible">
<!-- ko template: { name: 'dxdd-routed-connection-line' } -->
<!-- /ko -->
<!-- ko foreach: routeLineWrappers -->
<!-- ko ifnot: isLocked -->
<div data-bind="styleunit: position, style: { cursor: isVerticalLine ? 'ew-resize' : 'ns-resize' }, routeLineDraggable: { starting: $root.resizeHandler.starting, stopped: function() { resizeStopped(); $root.resizeHandler.stopped(); }, forceResize: resizeHandler }" class="dxrd-position-absolute">
</div>
<!-- /ko -->
<!-- ko if: isLocked -->
<div data-bind="styleunit: position" class="dxrd-position-absolute">
</div>
<!-- /ko -->
<!-- /ko -->
<!-- ko with: startPoint -->
<!-- ko template: { name: 'dxdd-connection-point-selection' } -->
<!-- /ko -->
<!-- /ko -->
<!-- ko with: endPoint -->
<!-- ko template: { name: 'dxdd-connection-point-selection' } -->
<!-- /ko -->
<!-- /ko -->
</div>
</script><script type='text/html' id='dx-diagram-element'>
<div class="dxrd-control dxd-selectable" data-bind="styleunit: position, trackCursor: underCursor">
<div class="dxrd-control-content-main" data-bind="styleunit: { lineHeight: positionLineHeightWithoutMargins }, style: css">
<div data-bind="template: contenttemplate, styleunit: { 'height': positionLineHeightWithoutMargins, 'width': positionWidthWithoutMargins }">
</div>
</div>
</div>
</script>
<script type='text/html' id='dx-diagram-element-selection'>
<div class="dxrd-control" data-bind="event: { dblclick: $root.inlineTextEdit.show($element) }, css: {'dxrd-selected': selected, 'dxrd-focused': focused }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
<!-- ko if: !$root.inlineTextEdit.visible() -->
<div class="dxrd-control-content-main" data-bind="styleunit: { lineHeight: positionLineHeightWithoutMargins }, style: css">
<div data-bind="template: contenttemplate, styleunit: { 'height': positionLineHeightWithoutMargins, 'width': positionWidthWithoutMargins}">
</div>
</div>
<!-- /ko -->
<!-- ko if: $root.inlineTextEdit.visible -->
<!-- ko with: $root.inlineTextEdit -->
<div class="inline-text-edit" data-bind="dxTextArea: { value: text, onKeyUp: keypressAction, valueChangeEvent: 'keyup' }"></div>
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type='text/html' id='dx-diagram-element-content'>
<div class="dxrd-width-100 dxrd-height-100 dxrd-border-1px-solid-black">
<div data-bind="text: getControlModel().text"></div>
</div>
</script>
<script type='text/html' id='dxdd-element-content-with-connecting-points'>
<div class="dxrd-width-100 dxrd-height-100 dxrd-overflow-hidden">
<svg class="dxrd-top-0 dxrd-left-0 dxrd-width-100 dxrd-height-100 dxrd-stroke-black dxrd-fill-transparent dxrd-stroke-width-1">
<!-- ko if: getControlModel().type() === 'Ellipse' -->
<ellipse cx="50%" cy="50%" rx="50%" ry="50%" />
<!-- /ko -->
<!-- ko if: getControlModel().type() === 'Condition' -->
<line x1="50%" y1="0" x2="100%" y2="50%" />
<line x1="100%" y1="50%" x2="50%" y2="100%" />
<line x1="50%" y1="100%" x2="0" y2="50%" />
<line x1="0" y1="50%" x2="50%" y2="0" />
<!-- /ko -->
<!-- ko if: !getControlModel().type() -->
<rect height="100%" width="100%" />
<!-- /ko -->
<text x="50%" y="50%" alignment-baseline="middle" class="dxrd-text-anchor-middle dxrd-cursor-default" data-bind="text: getControlModel().text"></text>
</svg>
<!-- ko foreach: connectingPoints -->
<!-- ko template: 'dxdd-connecting-point' -->
<!-- /ko -->
<!-- /ko -->
</div>
</script><script type="text/html" id="dx-diagram-surface">
<div class="dxrd-surface dxrd-height-100 dxrd-display-inline-block" data-bind="styleunit: { 'width': Math.min(pageWidth(), $root.surfaceSize()) }, click: function(_, e) { $root.selection.clickHandler(null, e); e.stopPropagation(); }, keyDownActions: $root.actionLists.getViewModel()">
<div class="dxrd-viewport dxrd-overflow-auto dxrd-width-inherit dxrd-height-inherit" data-bind="styleunit: { minWidth: Math.min(pageWidth(), $root.surfaceSize()), maxWidth: pageWidth(), maxHeight: pageHeight() + 20 }">
<div data-bind="selectable: { selection: $root.selection, zoom: zoom }">
<div class="dxrd-ghost-containment">
<div class="dxrd-ghost-container dxrd-background-white dxrd-position-relative" data-bind="styleunit: { 'width': pageWidth(), 'height': pageHeight() }, trackCursor: underCursor">
<!-- ko foreach: controls -->
<!-- ko template: { name: isSelected() ? selectiontemplate : template } -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</div>
</div>
</div>
</script>
<script type='text/html' id='dxqb-joincondition'>
<div class="dxdd-connector" data-bind="styleunit: position, trackCursor: underCursor">
<svg class="dxrd-width-100 dxrd-height-100">
<line data-bind="attr: { x1: startPoint.x, y1: startPoint.y, x2: endPoint.x, y2: endPoint.y }" />
</svg>
</div>
</script><script type="text/html" id="dx-query-surface">
<div class="dxrd-surface dxrd-display-inline-block" data-bind="styleunit: { 'width': $root.surfaceSize }, click: function(_, e) { $root.selection.clickHandler(null, e); e.stopPropagation(); }, keyDownActions: $root.actionLists.getViewModel()">
<div class="dxrd-viewport dxrd-width-inherit dxrd-height-inherit" >
<div class="dxqb-mainwin" data-bind="dxScrollView: { direction: 'both', showScrollbar: 'always', scrollByContent: false, scrollByThumb: true, bounceEnabled: false, useNative: true, height: '100%' }">
<div class="dxrd-height-100">
<div class="dxrd-ghost-containment dxrd-height-100" >
<div class="dxrd-ghost-container dxqb-ghost-container" data-bind="styleunit: { 'minWidth': pageWidth, 'minHeight': pageHeight }, trackCursor: { recalculateBounds: true, underCursor: underCursor }">
<div class="dxqb-main" data-bind="trackCursor: { recalculateBounds: true, underCursor: underCursor }, style: { 'z-index' : $parent.dragDropStarted() ? 2 : null }">
<!-- ko if: tables().length === 0-->
<div class="dxqb-placeholder dxd-empty-area-placeholder-text-color dxd-text-info" data-bind="text: placeholder()"></div>
<!-- /ko -->
<!-- ko foreach: relations -->
<!-- ko foreach: conditions -->
<!-- ko if: !isSelected()-->
<!-- ko template: template -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<!-- ko foreach: tables -->
<!-- ko template: template -->
<!-- /ko -->
<!-- /ko -->
<!-- ko foreach: relations -->
<!-- ko foreach: conditions -->
<!-- ko if: isSelected()-->
<!-- ko template: selectiontemplate -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<!-- ko with: $root.columnDragHandler.dragDropConnector -->
<svg class="dxdd-connection-line-draggable" data-bind="styleunit: { top: position.top(), left: position.left() }">
<!-- ko foreach: routePoints -->
<!-- ko if: $index() < ($parent.routePoints().length - 1) -->
<line class="dxd-qb-relationship-line-color" fill="none" data-bind="attr: {x1 : $data.x, y1: $data.y, x2: $parent.routePoints()[$index()+1].x, y2: $parent.routePoints()[$index()+1].y }"></line>
<!-- /ko -->
<!-- /ko -->
</svg>
<!-- /ko -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
<script type='text/html' id='dxqb-relation'>
<!-- ko foreach: conditions -->
<!-- ko template: { name: isSelected() ? selectiontemplate : template } -->
<!-- /ko -->
<!-- /ko -->
</script><script type='text/html' id='dxqb-table-field'>
<div class="dx-border-inheritor dxd-border-accented">
<div class="dxqb-table-field dxd-qb-table-field-border-color dxd-qb-table-field-back-color dxd-back-highlighted dxd-qb-table-field-separator-color dxd-border-primary" data-bind="trackCursor: { recalculateBounds: true, underCursor: underCursor }, draggable: $root.columnDragHandler, css: cssClasses($root.surface(), $root.columnDragHandler, $parent), click: $root.selectItemProperties">
<div class="dxqb-table-field-background dxd-back-accented"></div>
<div class="dxqb-table-field-checkbox-wrapper">
<div class="dxqb-table-field-checkbox" data-bind="dxCheckBox: { value: selectedWrapper }, click: function(surface, e) { surface.toggleSelected(); e.stopPropagation(); return true; }"></div>
</div>
<div class="dxqb-table-field-content dxd-text-primary" data-bind="attr: { title: getControlModel().actualName }">
<div class="dxqb-table-field-state">
<!-- ko if: $data.isAscending() -->
<div class="dxqb-image-field-state dxqb-image-field-sorting-asc"><!-- ko template: 'dxrd-svg-queryBuilder-sorting_asc' --><!-- /ko --></div>
<!-- /ko -->
<!-- ko if: $data.isDescending() -->
<div class="dxqb-image-field-state dxqb-image-field-sorting-desc"><!-- ko template: 'dxrd-svg-queryBuilder-sorting_desc' --><!-- /ko --></div>
<!-- /ko -->
<!-- ko if: $data.getControlModel().groupBy -->
<div class="dxqb-image-field-state dxqb-image-field-group-by"><!-- ko template: 'dxrd-svg-queryBuilder-group_by' --><!-- /ko --></div>
<!-- /ko -->
<!-- ko if: $data.isAggregate() -->
<div class="dxqb-image-field-state dxqb-image-field-aggregate"><!-- ko template: 'dxrd-svg-queryBuilder-aggregate' --><!-- /ko --></div>
<!-- /ko -->
</div>
<div class="dxqb-table-field-caption">
<div class="dxqb-table-field-text dxd-qb-table-field-text-color" data-bind="text: getControlModel().actualName"></div>
</div>
</div>
</div>
</div>
</script>
<script type='text/html' id='dxqb-table-asterisk-field'>
<div class="dx-border-inheritor dxd-border-accented">
<div class="dxqb-table-field dxd-qb-table-field-border-color dxd-qb-table-field-back-color dxd-back-highlighted dxd-border-primary" data-bind="trackCursor: underCursor, css: cssClasses(), click: $root.selectItemProperties">
<div class="dxqb-table-field-background dxd-back-accented"></div>
<div class="dxqb-table-field-checkbox-wrapper">
<div class="dxqb-table-field-checkbox" data-bind="dxCheckBox: { value: selectedWrapper }, click: function(surface, e) { surface.toggleSelected(); e.stopPropagation(); return true; }"></div>
</div>
<div class="dxqb-table-field-content dxd-text-primary" data-bind="attr: { title: getControlModel().name }">
<div class="dxqb-table-field-caption">
<div class="dxqb-table-field-text dxd-qb-table-field-text-color" data-bind="text: getControlModel().name"></div>
</div>
</div>
</div>
</div>
</script><script type='text/html' id='dxqb-table-main'>
<!-- ko if: $data.isSelected() -->
<div class="dxqb-table-resize-ghost" data-bind="resizable: resizable($root.resizeHandler, $element), styleunit: position"></div>
<!-- /ko -->
<div class="dxrd-control" data-bind="css: {'dxrd-selected': selected, 'dxrd-focused': focused }, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor, click: $root.selectItemProperties">
<div class="dxrd-control-content-main dxd-qb-table-back-color dxd-back-primary2" data-bind="styleunit: { lineHeight: position.lineHeight }, style: css">
<div class="dxqb-table-background dxd-back-accented"></div>
<div class="dx-background-inheritor dxd-back-accented">
<div class="dxqb-table-border dxd-qb-table-border-color dxd-back-highlighted dxd-state-active dxd-state-no-hover"></div>
</div>
<div data-bind="template: contenttemplate, styleunit: { 'height': position.lineHeight, 'width': position.width }">
</div>
</div>
</div>
</script>
<script type='text/html' id='dxqb-table'>
<div class="dxqb-table dxd-qb-table-back-color dxd-back-primary2">
<div class="dx-border-inheritor dxd-border-accented">
<div class="dxqb-table-head-field dxd-qb-table-field-border-color dxd-qb-table-field-back-color dxd-back-highlighted dxd-border-primary">
<div class="dxqb-table-checkbox-all">
<div data-bind="dxCheckBox: { value: selectedWrapper }, click: function(surface, e) {
$root.undoEngine().start();
surface.toggleSelected();
$root.undoEngine().end();
e.stopPropagation(); return true;
}"></div>
</div>
<!-- ko template: titletemplate -->
<!-- /ko -->
</div>
</div>
<div class="dxqb-table-content">
<div class="dxqb-tableFields-wrapper">
<!-- ko ifnot: $data.isInitialized() -->
<div class="dxqb-table-loading">
<div class="dxqb-table-loading-text dxd-text-primary" data-bind="text: $root.columnsLoadingMsg()"></div>
</div>
<!-- /ko -->
<!-- ko if: $data.isInitialized() -->
<!-- ko template: { name: asterisk.template, data: asterisk } -->
<!-- /ko -->
<!-- ko foreach: columns -->
<!-- ko lazy: { template: $data.template }-->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</div>
</script>
<script type='text/html' id='dxqb-table-title'>
<div class="dxqb-table-title" data-bind="style: { cursor: selected() ? 'move' : 'default' }">
<div class="dxqb-table-title-content dxd-text-primary" data-bind="text: getControlModel().actualName"></div>
</div>
</script>
<script type='text/html' id='dxqb-federation-table-title'>
<div class="dxqb-table-title dxqb-federation-table-title" data-bind="event: { dblclick: $root.inlineTextEdit.show($element) }, style: { cursor: selected() ? 'move' : 'default' }">
<div class="dxqb-federation-table-title-container">
<!-- ko if: !$root.inlineTextEdit.visible() || !selected() -->
<div class="dxqb-table-title-content dxd-text-primary" data-bind="text: getControlModel().actualName"></div>
<!-- /ko -->
<!-- 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>
<div class="dxqb-table-subtitle dxd-text-info" data-bind="text: getControlModel().displaySourceName"></div>
</div>
</script><script type="text/html" id="dxrd-masterDetail-editor">
<!-- ko if: $data -->
<div>
<div data-bind="dxPopup: {
showTitle: true,
resizeEnabled: true,
width: 700,
height: 500,
maxHeight: '95%',
maxWidth: '95%',
minHeight: 300,
minWidth: 400,
title: title(),
visible: popupVisible,
wrapperAttr: { class: 'dx-filtereditor' },
toolbarItems: buttonItems, showCloseButton: true, container: $root.getPopupContainer($element), position: { of: $root.getPopupContainer($element) },
}">
<div class="dx-filtereditor-tree dxd-border-secondary dxrd-cursor-default" data-bind="dxScrollView: { showScrollbar: 'onHover', direction: 'both' }" >
<!-- ko foreach: masterQueries -->
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-text dxd-filter-editor-text-color criteria-operator-item-group dxd-filter-editor-group-back-color dxd-state-no-hover stylized" data-bind="text: queryName"></div>
<div data-bind="service: { name: 'createRelation' }"></div>
</div>
<div class="criteria-operator-content">
<!-- ko template: { name: 'dx-masterDetail-editor-relation', foreach: relations }-->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</div>
</div>
<div class="dx-selectbox-popup-wrapper dx-dropdownlist-popup-wrapper dx-filtereditor-criteriaoperator-popup dx-dropdowneditor-overlay"
data-bind="dxPopupWithAutoHeight: {
height: '300px',
focusStateEnabled: false,
wrapperAttr: { class: 'dx-selectbox-popup-wrapper dx-dropdownlist-popup-wrapper dx-filtereditor-criteriaoperator-popup dx-dropdowneditor-overlay' },
position: $root.rtl ? { my: 'right top', at: 'right bottom', of: popupService.target } : { my: 'left top', at: 'left bottom', of: popupService.target },
container: $root.getPopupContainer($element),
target: popupService.target,
showTitle: false,
showCloseButton: false,
animation: {},
hideOnOutsideClick: true,
shading: false,
minWidth:'170px',
maxWidth:'500px',
width: 'auto',
visible: popupService.visible }">
<!-- ko with: popupService-->
<!-- ko with: data -->
<!-- ko template: template-->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</script><script type="text/html" id="dx-masterDetail-editor-keyColumn">
<div class="criteria-operator-text dxd-filter-editor-text-color criteria-operator-item-field dxd-filter-editor-field-back-color dxd-state-no-hover stylized" data-bind="attr: { title: $data.getTitle() }, text: queryName"></div>
<div class="criteria-operator-text dxd-filter-editor-text-color">.</div>
<div class="criteria-operator-text dxd-filter-editor-text-color">
<div data-bind="service: { name: 'setColumn' }"></div>
</div>
</script><script type="text/html" id="dx-masterDetail-editor-relation">
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-action" data-bind="dxclick: function() { $parent.remove($data); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove"><!-- ko template: 'dxrd-svg-filtereditor-remove' --><!-- /ko --></div>
</div>
<div class="criteria-operator-item" data-bind="visible: isEditable">
<div class="criteria-operator-item-editor" data-bind="dxTextBox: { value: relationName, onFocusOut: function() { isEditable(false); } }, focus: { on: isEditable }"></div>
</div>
<div class="criteria-operator-text dxd-filter-editor-text-color criteria-operator-item-value dxd-filter-editor-value-back-color" data-bind="visible: !isEditable()">
<div class="criteria-operator-text dxd-filter-editor-text-color clickable" data-bind="text: relationName, click: function() { isEditable(true); }"></div>
</div>
<div class="criteria-operator-action" data-bind="dxclick: create">
<div class="criteria-operator-action-image dx-image-filtereditor-add"><!-- ko template: 'dxrd-svg-filtereditor-add' --><!-- /ko --></div>
</div>
</div>
<div class="criteria-operator-content">
<!-- ko foreach: keyColumns -->
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-action" data-bind="dxclick: function() { $parent.remove($data); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove"><!-- ko template: 'dxrd-svg-filtereditor-remove' --><!-- /ko --></div>
</div>
<!-- ko template: { name: 'dx-masterDetail-editor-keyColumn', data: master } -->
<!-- /ko -->
<div class="criteria-operator-text dxd-filter-editor-text-color"> = </div>
<!-- ko template: { name: 'dx-masterDetail-editor-keyColumn', data: detail } -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</div>
</div>
</script><script type="text/html" id="dx-masterdetail-editor-setColumn">
<div class="criteria-operator-text dxd-filter-editor-text-color clickable criteria-operator-item-field dxd-filter-editor-field-back-color" data-bind="text: target.column() || target.selectColumnText(), dxclick: showPopup, css: { 'dxd-state-selected': target.isSelected, 'default': !target.column() }"></div>
</script>
<script type="text/html" id="dxqb-data-preview">
<div class="dxrd-height-100" data-bind="dxdTableView: $data.value"></div>
</script>
<script type="text/html" id="dxqb-popup">
<div data-bind="dxPopup: {
animation: {
show: { type: 'fade', from: 0, to: 1, duration: 700 },
hide: { type: 'fade', from: 1, to: 0, duration: 700 }
},
wrapperAttr: { class: 'dxqb-preview' },
visible: isVisible,
title: title(),
showTitle: true,
resizeEnabled: true,
shading: true,
shadingColor: 'transparent',
fullScreen: false,
width: 800,
height: 544,
container: container($element),
position: { of: container($element) },
onHidden: function() { $data.data.value(null) },
focusStateEnabled: false
}">
<div class="dxqb-preview-popup-content">
<!-- ko if: data && !isLoading() -->
<!-- ko template: { name: template, data: data } -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: isLoading -->
<div class="dxrd-text-align-center dxrd-padding-top-25">
<div data-bind="dxLoadIndicator: { visible: true }"></div>
</div>
<!-- /ko -->
</div>
<div class="dxqb-preview-popup-buttons dxd-border-secondary">
<div class="dxqb-preview-popup-button" data-bind="dxButton: { text: okButtonText(), onClick: okButtonHandler, disabled: isLoading }"></div>
</div>
</div>
</script>
<script type="text/html" id="dxqb-selectstatment-preview">
<div class="dxqb-show-query-string-content dx-widget">
<!-- ko if: !aceAvailable -->
<div class="dxrd-show-query-string-editor" data-bind="dxTextArea: { value: value, valueChangeEvent: 'keyup', readOnly: true }"></div>
<!-- /ko -->
<!-- ko if: aceAvailable -->
<div class="dxrd-show-query-string-editor">
<div class="dxrd-show-query-string-editor-content">
<div class="dx-sql_editor dx-disabled-ace dxd-back-primary2" data-bind="dxAceEditor: { value: value, options: aceOptions, additionalOptions: additionalOptions }"></div>
</div>
</div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxd-tableview">
<div class="dxd-tableview">
<div class="dxd-tableview-titles">
<table>
<tbody>
<tr>
<!-- ko foreach: rtl ? data.schema.reverse() : data.schema -->
<td data-bind="attr: { class: 'dxd-tableview-title-cell dxd-border-secondary dxd-tableview-resizable' }">
<div class="dxd-tableview-cell-text dxd-qb-data-preview-cell-text-color dxd-text-info" data-bind="text: name"></div>
</td>
<!-- /ko -->
</tr>
</tbody>
</table>
</div>
<!-- ko if: data.values -->
<div class="dxd-tableview-data" data-bind="dxScrollView: { direction: 'both', scrollByContent: false, showScrollbar: 'always', scrollByThumb: true, bounceEnabled: false, useNative: false, onScroll: $data.onDataScroll, onInitialized: $data.onDataScrollInitialized }">
<table>
<tbody>
<!-- ko foreach: data.values -->
<tr>
<!-- ko foreach: $parent.rtl ? $data.reverse() : $data -->
<td class="dxd-tableview-cell dxd-border-secondary">
<!-- ko ifnot: $parents[1].isImage($index()) -->
<div data-bind="text: $data, attr: { class: 'dxd-tableview-cell-text dxd-text-primary dxd-tableview-resizable' + $index() }"></div>
<!-- /ko -->
<!-- ko if: $parents[1].isImage($index()) -->
<!-- ko if: $parents[1].isImageTooLarge($data) -->
<div data-bind="text: $parents[1].getImageTooLargeText($data), attr: { class: 'dxd-tableview-cell-text dxd-text-primary dxd-tableview-resizable' + $index() }"></div>
<!-- /ko -->
<!-- ko ifnot: $parents[1].isImageTooLarge($data) -->
<div data-bind="attr: { class: 'dxd-tableview-cell-text dxd-text-primary dxd-tableview-resizable' + $index() }">
<img data-bind="attr: { src: 'data:image/bmp;base64,' + $data }" />
</div>
<!-- /ko -->
<!-- /ko -->
</td>
<!-- /ko -->
</tr>
<!-- /ko -->
<tr class="dxd-tableview-data-fakerow">
<!-- ko foreach: data.values[0] -->
<td class="dxd-tableview-cell dxd-border-secondary">
<div data-bind="attr: { class: 'dxd-tableview-cell-text dxd-text-primary dxd-tableview-resizable' + $index() }"></div>
</td>
<!-- /ko -->
</tr>
</tbody>
</table>
</div>
<!-- /ko -->
<!-- ko ifnot: data.values -->
<div class="dxd-tableview-empty-message" data-bind="text: noDataText()"></div>
<!-- /ko -->
</div>
</script><script type="text/html" id="dxqb-fieldlist-wrapper">
<div id="tree" data-bind="treelist: treeListOptions" class="dxrd-width-100 dxrd-height-100"></div>
</script>
<script type='text/html' id='dxqb-properties-wrapper'>
<div class="dxrd-properties-wrapper" data-bind="visible: active && visible">
<div class="dxd-text-primary dxrd-properties-wrapper-full-height">
<!-- ko with: model -->
<div class="dxrd-properties-grid dxd-border-primary dxrd-top-0px" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true }" >
<div>
<!-- ko foreach: groups -->
<div class="dx-fieldset" data-bind="visible: visible">
<div class="dx-accordion" data-bind="dxdAccordion: { collapsed: collapsed }">
<div class="dxrd-group-header dx-accordion-header dxd-border-primary" data-bind="css: { 'dxrd-group-header-collapsed': collapsed() }">
<div class="dx-collapsing-image dxrd-display-inline-block" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed() }" ></div>
<span class="dxrd-group-header-text" data-bind="text: displayName()"></span>
</div>
<div class="dx-accordion-content dxd-back-primary dxd-border-primary">
<!-- ko ifnot: editorsCreated -->
<div class="dx-accordion-content-loading-panel">
<div data-bind="dxLoadIndicator: { visible: !editorsCreated() }"></div>
</div>
<!-- /ko -->
<!-- ko if: $data.editorsRendered() -->
<div data-bind="visible: editorsCreated">
<div class="dx-editors">
<!-- ko foreach: editors -->
<!-- ko template: editorTemplate -->
<!-- /ko -->
<!-- ko if: ($index() === $parent.editors().length - 1 && $parent.editorsCreated(true)) -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</div>
</div>
</div>
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dxqb-propertygrid">
<!-- ko with: value -->
<div class="dx-fieldset dxqb-selected-properties">
<!-- ko foreach: properties.getEditors() -->
<!-- ko template: editorTemplate -->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxqb-fieldspanel">
<!-- ko with: value -->
<div data-bind="treeListSearchPanel: { controllers: $data.fieldListModel.treeListOptions().treeListController }"></div>
<div class="dxqb-right-panel-fields" data-bind="dxScrollView: { showScrollbar: 'onHover', scrollByContent: false, scrollByThumb: true, bounceEnabled: false, useNative: false }">
<!-- ko template: { name: "dxqb-fieldlist-wrapper", data: fieldListModel } -->
<!-- /ko -->
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxqb-parameterspanel">
<!-- ko with: value -->
<div class="dxqb-right-panel-parameters" data-bind="dxScrollView: { showScrollbar: 'onHover', scrollByContent: false, scrollByThumb: true, bounceEnabled: false, useNative: false }">
<div class="dxrd-width-100" data-bind="dxCollectionEditor: $data"></div>
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxqb-collectioneditor-template">
<div class="dxrd-accordion-collection-item" data-bind="dxdAccordion: { collapsed: collapsed, setCollapsed: setCollapsed, getCollapsed: getCollapsed, setCollapsedChangedEvent: setCollapsedChangedEvent }">
<div class="dxrd-group-header dx-accordion-header">
<div>
<div class="dx-collapsing-image dxrd-display-inline-block" data-bind="css: { 'dx-image-expanded': !collapsed }, template: 'dxrd-svg-collapsed'"></div>
<div class="dx-group-header-font 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">
<div data-bind="template: { name: 'dx-propertieseditor', data: getProperties({ level: 1 }) }"></div>
</div>
</div>
</script>
<script type='text/html' id='dxqb-properties-wrapper-editorlist'>
<div class="dxrd-properties-wrapper" data-bind="visible: active && visible">
<div class="dxd-text-primary dxrd-height-100">
<!-- ko with: model -->
<div class="dxrd-properties-grid dxd-border-primary dxrd-top-0px" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true }" >
<div class="dx-fieldset dxqb-selected-properties">
<!-- ko foreach: getEditors() -->
<!-- ko template: editorTemplate -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</div>
</div>
</script><script type="text/html" id="dxqb-toolbar">
<div class="dxrd-toolbar-wrapper dxd-toolbar-back-color" data-bind="click: $root.findControl">
<div class="dxqb-toolbar-background dxd-back-primary-invariant"></div>
<div class="dxrd-toolbar" data-bind="template: {name: 'dxrd-toolbar-tmplt', data: actionLists.getViewModel().toolbarItems }"></div>
</div>
</script><script type="text/html" id="dxqb-property-editor">
<div class="dxrd-editor" data-bind="visible: visible">
<div class="dxrd-editor-header">
<div class="dx-field dxd-back-primary">
<div class="dx-field-label dxd-text-primary">
<div class="propertygrid-editor-displayName" data-bind="text: displayName, attr: { 'title': displayName }"></div>
</div>
<div class="dx-field-value">
<div data-bind="service: { name: 'createEditorAddOn' }"></div>
<!-- ko lazy: { template: templateName } -->
<!-- /ko -->
</div>
</div>
</div>
</div>
</script><script type="text/html" id="dxqb-expressionstring">
<!-- ko if: $data.value -->
<div data-bind="dxExpressionEditor: getOptions({ options: value, fieldListProvider: $root.parametersBindingsProvider, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() })"></div>
<!-- /ko -->
</script><script id="dxqb-filtereditor-changeparameter" type="text/html">
<div class="criteria-operator-item" data-bind="visible: target.isEditable">
<div class="criteria-operator-item" data-bind="dxTextBox: { value: target._parameterName, onFocusOut: function() { target.createParameter(); target.isEditable(false); } }"></div>
</div>
<div class="criteria-operator-text dxd-filter-editor-text-color clickable " data-bind="text: target.parameterName, dxclick: showPopup, css: { 'dxd-state-selected': target.isSelected, 'default': target.isDefaultTextDisplayed() }, visible: $data.target.isEditable() === false"></div>
</script>
<script type="text/html" id="dxqb-filtereditor-propertiespopup">
<div class="dx-widget" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<!-- ko foreach: data -->
<div data-bind="dxdAccordion: { collapsed: collapsed }">
<div class="dx-accordion-header">
<div class="dx-filtereditor-popup-item dxd-list-item-back-color dx-item dx-list-item dxd-back-highlighted">
<div class="dx-collapsing-image dxrd-display-inline-block dxrd-margin-left-5px" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed() }" ></div>
<span class="dx-item-content dx-list-item-content dxrd-padding-left-17px" data-bind="text: name"></span>
</div>
</div>
<div class="dx-accordion-content dxd-back-primary">
<!-- ko foreach: items -->
<div class="dx-filtereditor-popup-item dx-item dx-list-item dxd-list-item-back-color dxd-back-highlighted">
<span class="dx-item-content dx-list-item-content dxrd-padding-left-17px" data-bind="text: name, attr: { 'title': name }, click: function() { $parents[1].click($data); }"></span>
</div>
<!--/ko -->
</div>
</div>
<!--/ko -->
</div>
</script>
<script type="text/html" id="dxqb-filtereditor-parameterspopup">
<div class="dx-widget" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<!-- ko if: $parent.viewModel.canCreateParameters -->
<div class="dx-filtereditor-popup-item dx-item dx-list-item dxd-list-item-back-color dxd-back-highlighted">
<span class="dx-item-content dx-list-item-content" data-bind="text: $parent.viewModel.defaultDisplay(), click: function() { $parent.viewModel.isEditable(true); $parent.viewModel._parameterName(''); $parent.visible(false); }"></span>
</div>
<!-- /ko -->
<!-- ko foreach: data -->
<div class="dx-filtereditor-popup-item dx-item dx-list-item dxd-list-item-back-color dxd-back-highlighted">
<span class="dx-item-content dx-list-item-content" data-bind="text: name, click: function() { $parent.click($data); } "></span>
</div>
<!-- /ko -->
</div>
</script><script type="text/html" id="dxqb-treelist-item-with-search">
<div data-bind="visible: visible">
<!-- ko template: "dxqb-treelist-header-item-with-search" -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxqb-treelist-header-item-with-search">
<div class="dx-treelist-item dxd-list-item-back-color dxd-back-highlighted" data-bind="event: { dblclick: events.dblclick },
styleunit: padding,
css: { 'dx-treelist-item-selected dxd-state-selected': isSelected || isMultiSelected }">
<div class="dx-treelist-collapsedbutton"></div>
<div class="dx-treelist-caption">
<div class="dx-treelist-selectedcontent" data-bind="click: toggleSelected, draggable: isDraggable ? dragDropHandler : null">
<div class="dx-treelist-image" data-bind="css: imageClassName, template: { name: imageTemplateName, if: !!imageTemplateName }, attr: { title: text }"> </div>
<!-- ko template: { name: 'dx-treelist-item-text-content' } -->
<!-- /ko -->
</div>
</div>
</div>
</script><script type="text/html" id="dxrd-page-choose-datasource-type">
<div class="dxrd-wizard-type-page" data-bind="css: $data._extendCssClass('type-page')">
<!-- ko foreach: typeItems -->
<!-- ko template: 'dxrd-page-choose-type-item' -->
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-page-choose-type-item">
<div data-bind="event: { click: $parent._itemClick, dblclick: function() { $parent._goToNextPage() } }, attr: { class: 'dxd-back-highlighted dxd-state-normal dxrd-wizard-type-item dx-fontsize-reestablished dxrd-wizard-type-item-border-color dxd-list-item-back-color ' + $parent._extendCssClass('type-item')}, css: { 'dxd-border-secondary dxd-back-secondary': $parent._IsSelected($data) } ">
<div data-bind="attr: { class: 'dxrd-wizard-type-image ' + $parent._extendCssClass('type-image') }, css: imageClassName, template: { name: imageTemplateName }"> </div>
<!-- ko if: !!$parent._textToSearch -->
<div class="dxrd-wizard-type-text" data-bind="searchHighlighting: { text: text, textToSearch: $parent._textToSearch }, attr: { title: text }, css: $parent._extendCssClass('type-text')"></div>
<!-- /ko -->
<!-- ko ifnot: !!$parent._textToSearch -->
<div class="dxrd-wizard-type-text" data-bind="text: text, attr: { title: text }, css: $parent._extendCssClass('type-text')"></div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-wizard-add-federated-queries-page">
<div class="dxrd-wizard-page dxrd-wizard-add-federation-queries-page dxrd-wizard-page-treelist-accordion-style">
<div data-bind="treeListSearchPanel: {controllers: ko.unwrap(_fieldListModel).treeListController}"></div>
<div class="dxrd-wizard-dataMember dxd-border-secondary" data-bind="dxScrollView: { showScrollbar: 'onHover', height: _scrollViewHeight }">
<div class="dxrd-wizard-dataMember-treelist dxrd-width-100 dxrd-height-100" data-bind="treelist: _fieldListModel" ></div>
</div>
<!-- ko template: { name: $data._queriesPopupHelper.template, data: _queriesPopupHelper } -->
<!-- /ko -->
<div class="dxrd-wizard-load-panel dxd-text-primary" data-bind="dxLoadPanel: _loadPanelViewModel($element)">
</div>
</div>
</script>
<script type="text/html" id="dx-treelist-federation-action-with-popover">
<div class="dx-treelist-action-with-popover dxrd-display-inline-block" >
<div class="dx-treelist-action" data-bind="dxButtonWithTemplate: { onClick: function() { clickAction($parent); }, icon: $data.imageTemplateName, iconClass: $data.imageClassName , disabled: $data.disabled && $data.disabled() }, attr: { title: text }"></div>
<!-- ko template: { name: 'dx-popover-list-items', data: ko.utils.extend($parent.data, { className: 'dxrd-federation-addqueries-popover', position: $root.rtl ? 'right' : 'left', popupContainer: $root.getPopupContainer, width: 150 }) }-->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-querybuilder-select-popup-content">
<div class="dxrd-federation-result-grids dxrd-federation-data-container-column">
<div class="dxd-border-secondary dxrd-select-querybuilder-surface" data-bind="resizable: gridResizeHelper.resizable($root.resizeHandler, 's')">
<div class="dxrd-height-100" data-bind="dxQueryBuilderSurface: queryBuilderSurfaceCreator"></div>
</div>
<div class="dx-accordion dxd-border-secondary dxrd-select-result-alias-grid" data-bind="dxdAccordion: { collapsed: joinResultCollapsed }">
<div class="dxd-back-secondary dx-accordion-header dxd-text-primary">
<div class="dx-collapsing-image dxrd-display-inline-block" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !joinResultCollapsed() }" ></div>
<span class="dxrd-group-header-text" data-bind="text: $root.getLocalization('Join result', 'DataAccessUIStringId.FederationDataSourceQueryBuilder_SelectResult')"></span>
</div>
<div class="dx-accordion-content dxd-border-secondary" data-bind="style: { height: resultGridHeight }">
<div class="dxrd-federation-action-add dxrd-collectioneditor-action" data-bind="dxButton: { icon: 'add', disabled: addRowDisabled, onClick:addRow }"></div>
<div data-bind="dxDataGrid: columnsGrid"></div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-querybuilder-column-combobox-masked">
<div class="dxrd-querybuilder-column-container dxrd-querybuilder-column-container-masked">
<div class="dxrd-querybuilder-column-data">
<div class="dx-texteditor-input" data-bind="text: cellInfo.column"></div>
</div>
<div class="dxrd-querybuilder-column-editorswitch">
<!-- ko template: { name: 'dx-wizard-menu-box-editorswitch', data: $data } -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dxrd-querybuilder-column-combobox">
<div class="dxrd-querybuilder-column-container dxrd-querybuilder-column-container-full">
<div class="dxrd-querybuilder-column-data">
<div class="dx-texteditor-input dx-padding-none" data-bind="dxDropDownBox: {
dataSource: $data.allColumns,
dropDownOptions: { container: $root.getPopupContainer($element), width: $root.calculateWithZoomFactor(357) },
popupPosition: { boundary: $root.getPopupContainer($element) },
value: cellInfo.key,
valueExpr: 'key',
displayExpr: 'column'
}, visible: !$data.isExpression()">
<div data-bind="dxDataGrid: {
dataSource: $data.allColumns,
keyExpr: 'key',
remoteOperations: true,
height: $root.calculateWithZoomFactor(250),
columns: [{ dataField: 'column', sortOrder: 'asc' } , { dataField: 'table'}],
hoverStateEnabled: true,
selection: { mode: 'single' },
selectedRowKeys: [cellInfo.key],
focusedRowEnabled: true,
focusedRowKey: cellInfo.key,
onSelectionChanged: $data.changeColumn
}
"></div>
</div>
<div class="dx-texteditor-input dx-padding-none" data-bind="dxExpressionEditor: { options: expression, fieldListProvider: itemsProvider, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() }, visible: $data.isExpression"></div>
</div>
<div class="dxrd-querybuilder-column-editorswitch">
<!-- ko template: { name: 'dx-wizard-menu-box-editorswitch', data: $data } -->
<!-- /ko -->
</div>
</div>
</script><script type="text/html" id="dxrd-querybuilder-transform-popup-content">
<div class="dxrd-federation-result-grids dxrd-federation-data-container-column">
<div class="dx-accordion dxd-border-secondary dxrd-transform-source-grid dxrd-result-source-grid">
<div class="dxd-back-secondary dx-accordion-header dxd-text-primary">
<span class="dxrd-group-header-text" data-bind="text: $data.transformGridTitle"></span>
</div>
<div class="dx-accordion-content dxd-border-secondary">
<div class="dxd-border-primary dxrd-transform-source-grid dxrd-result-source-grid" data-bind="dxDataGrid: transformGrid"></div>
</div>
</div>
<div class="dx-accordion dxd-border-secondary dxrd-transform-result-grid" data-bind="dxdAccordion: { collapsed: transformResultCollapsed }">
<div class="dxd-back-secondary dx-accordion-header dxd-text-primary">
<div class="dx-collapsing-image dxrd-display-inline-block" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !transformResultCollapsed() }" ></div>
<span class="dxrd-group-header-text" data-bind="text: $data.transformResultGridTitle"></span>
</div>
<div class="dx-accordion-content dxd-border-secondary">
<div data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<div data-bind="treelist: resultFieldListModel" class="dxrd-width-100 dxrd-height-100"></div>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-querybuilder-transform-checkbox">
<div class="dxrd-querybuilder-transform-checkbox" data-bind="dxCheckBox: transform"></div>
</script>
<script type="text/html" id="dxrd-querybuilder-federation-popup">
<div data-bind="dxPopup: {
showTitle: true,
title: title(),
wrapperAttr: { class: cssClass },
visible: popupVisible,
toolbarItems: buttonItems,
showCloseButton: true,
fullScreen: false,
maxHeight: maxHeight,
height: height,
width: width,
onShowing: function(e) {
$data.loaded(true);
},
rtlEnabled: rtl,
onHiding: onHiding,
container: getPopupContainer($element),
position: { of: getPopupContainer($element)},
resizeEnabled: true,
minHeight: 450,
minWidth: 650
}">
<div class="dxrd-querybuilder-federation-popup">
<!-- ko if: popupVisible -->
<!-- ko if: loaded -->
<div class="dxrd-federation-treelist-wrapper dxd-border-secondary" data-bind="resizable: resizeHelper.resizable($root.resizeHandler, 'e')">
<div class="dxrd-federation-treelist" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<div data-bind="treelist: fieldListModel" class="dxrd-width-100 dxrd-height-100"></div>
</div>
</div>
<div class="dxrd-federation-data-container">
<!-- ko template: { name: popupContentTemplate } -->
<!-- /ko -->
</div>
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dxrd-querybuilder-union-popup-content">
<div class="dxrd-federation-result-grids dxrd-federation-data-container-column">
<div class="dxd-border-secondary dxrd-union-result-source-grid dxrd-result-source-grid" data-bind="dxDataGrid: sourcesGrid"></div>
<div class="dxd-border-secondary dxrd-union-result-alias-grid">
<div data-bind="dxDataGrid: aliasGrid"></div>
</div>
</div>
</script>
<script type="text/html" id="dx-wizard-fullscreen">
<!-- ko if: $data && $data.isVisible() -->
<div class="dx-fullscreen-wizard dx-editors" data-bind="css: { 'dx-rtl': $root.rtl, 'dx-ltr': !$root.rtl }">
<div class="dxrd-wizard dxrd-report-wizard dx-editors dxd-text-primary dxd-back-primary2" data-bind="css: _extendCssClass">
<div class="dxrd-wizard-steps-container dxd-back-primary" data-bind="visible: $data.navigationPanel().isVisible">
<div class="dxrd-wizard-title dxd-border-primary" data-bind="text: _description(), attr: {'title': _description() }"></div>
<!-- ko with: navigationPanel -->
<div class="dxrd-wizard-steps" data-bind="foreach: _steps">
<div class="dxrd-wizard-steps-relative dxrd-position-relative" data-bind="visible: $data.visible">
<div class="dxrd-wizard-steps-content" data-bind="click: $data.clickAction, text: $data.text, attr: {'title': $data.text }, css: { 'dxrd-disabled': $data.disabled, 'dxd-back-secondary': $data.isActive() }"></div>
<div class="dxrd-wizard-steps-marker dxd-back-primary2" data-bind="visible: $data.isActive"></div>
</div>
</div>
<!-- /ko -->
</div>
<div class="dxrd-wizard-content" data-bind="css: { 'withoutPanel': !$data.navigationPanel().isVisible() }">
<div class="dxrd-wizard-part-description dxd-back-contrast">
<div class="dxrd-wizard-part-description-text dxd-text-primary dxd-border-primary" data-bind="text: _pageDescription()"></div>
</div>
<!-- ko with: _currentPage -->
<div class="dxrd-wizard-work-content">
<div class="dxrd-wizard-work-content-relative">
<div data-bind="template: { name: template, data: page } "></div>
</div>
</div>
<!-- /ko -->
<div class="dxrd-wizard-load-panel dxd-text-primary" data-bind="dxLoadPanel: _loadPanelViewModel($element)">
</div>
<div class="dxrd-wizard-navigation">
<div data-bind="dxButton: cancelButton" class="dxrd-wizard-btn left"></div>
<div data-bind="dxButton: finishButton" class="dxrd-wizard-btn right"></div>
<div data-bind="dxButton: nextButton" class="dxrd-wizard-btn right"></div>
<div data-bind="dxButton: previousButton" class="dxrd-wizard-btn right"></div>
</div>
</div>
</div>
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dx-wizard-fullscreen-page">
<!-- ko if: $data._sections.length > 0 -->
<div class="dxrd-position-absolute" data-bind="foreach: _sections, css: _className, styleunit: { top: _parentMarginOffset, left: _parentMarginOffset, right: _parentMarginOffset, bottom: _parentMarginOffset }">
<div class="dx-border-inheritor dxd-border-accented">
<div class="dxrd-report-page-tile dxd-border-secondary" data-bind="css: { 'dxrd-disabled': !$data.page() }, style: $parent._pageCss[$data.pageId]">
<div class="dxrd-report-page-tile-title" data-bind="visible: $parent._showPageDescription($data), text: $parent._getPageDescription($index(), $data), attr: { title: $parent._getPageDescription($index(), $data) }"></div>
<!-- ko if: $data.page() !== null -->
<!-- ko with: page -->
<div class="dxrd-report-page-tile-content" data-bind="template: { name: $parent.metadata.template, data: page }, dxScrollView: { showScrollbar: 'onHover'}"></div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: $data.page() === null -->
<div class="dxrd-report-page-tile-content dx-default-border-style dxd-border-secondary">
<div class="dxrd-wizard-page dxrd-wizard-disabled-content" data-bind="text: metadata.disabledText"></div>
</div>
<!-- /ko -->
</div>
</div>
</div>
<!-- /ko -->
</script><script type="text/html" id="dxrd-jsondatasource-fields-page">
<div class="dxrd-wizard-page dx-jsonschema-page dx-frameless-style">
<div class="dx-default-border-style dxd-border-secondary dxrd-wizard-dataMember dx-fieldset dxrd-height-100" >
<div class="dx-field">
<div class="dx-field-label" data-bind="text: _rootElementTitle"></div>
<div class="dx-field-value" data-bind="dxSelectBox: { dataSource: _rootElementList, value: _selectedRootElement, displayExpr: 'fullPath', displayCustomValue: true, useItemTextAsTitle: true, dropDownOptions: { container: $root.getPopupContainer($element) } }"></div>
</div>
<div class="dxrd-wizard-add-queries-page dxrd-wizard-page-treelist-accordion-style dxd-border-secondary" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<div data-bind="treelist: _fieldListModel" class="dxrd-width-100 dxrd-height-100"></div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-page-jsonsource">
<div class="dxrd-wizard-page dx-jsonsource-page dx-frameless-style">
<div class="dx-default-border-style dxd-border-secondary dxrd-wizard-dataMember dx-fieldset dxrd-height-100" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true }, dxValidationGroup: $data._validationGroup || {}">
<div class="dx-field">
<div class="dx-property-required dx-field-label" data-bind="text: _jsonConnectionTitle, attr: { 'title': _jsonConnectionTitle }"></div>
<div class="dx-field-value" data-bind="dxTextBox: { value: _connectionName }, dxValidator: { validationRules: $data._connectionNameValidationRules || [] }"></div>
</div>
<div class="dx-field">
<div class="dx-field-label" data-bind="text: _jsonSourceTitle, attr: { 'title': _jsonSourceTitle }"></div>
<div class="dx-field-value" data-bind="dxLocalizedSelectBox: { dataSource: _sources, value: _selectedSource, valueExpr:'value', displayExpr: 'displayValue', displayCustomValue: true, dropDownOptions: { container: $root.getPopupContainer($element) } }"></div>
</div>
<!-- ko with: _selectedSource -->
<div data-bind="dxValidationGroup: $data.validationGroup || {}">
<div data-bind="css: $data.cssClass">
<!-- ko template: { name: 'dx-propertieseditor', data: grid } -->
<!-- /ko -->
</div>
<div class="dxrd-wizard-validationsummary" data-bind="dxValidationSummary: $data.validationSummary || {}, visible: $data.validationSummary && !isValid()"></div>
</div>
<!-- /ko -->
<div class="dxrd-wizard-validationsummary" data-bind="dxValidationSummary: $data._validationSummary || {}, visible: $data._validationSummary && _selectedSource().validationSummary && !canNext()"></div>
</div>
</div>
</script>
<script type="text/html" id="dx-property-json-string-editor">
<div class="dx-field" data-bind="visible: visible">
<!-- ko template: templateName -->
<!-- /ko -->
</div>
</script><script type='text/html' id='dxrd-page-dataSource'>
<div class="dxrd-wizard-page">
<!-- ko if: isDataSourceCreationAvailable -->
<div class="dxrd-wizard-datasourceoperation dxrd-radio-nowrap-ellipsis" data-bind="dxRadioGroup: { value: selectedDataSourceOperation, items: dataSourceOperations, layout: 'vertical' }">
<div data-options="dxTemplate : { name: 'item' }">
<div class="dxrd-radio-nowrap-ellipsis-text" data-bind="text: text, attr: { 'title': text }"></div>
</div>
</div>
<!-- /ko -->
<div class="dxrd-wizard-availabledatasources dx-default-border-style dxd-border-secondary">
<div class="dxrd-wizard-list" data-bind="dxList: { dataSource: availableDataSources, selectedItems: selectedDataSource, focusStateEnabled:false, editEnabled: true, height: dataSourcesListHeight, editConfig: { selectionEnabled: false }, selectionMode: 'single', activeStateEnabled: false, disabled: createNewDataSource, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true }">
<div data-options="dxTemplate : { name: 'item' }">
<div data-bind="text: name"></div>
</div>
</div>
</div>
</div></script>
<script type="text/html" id="dxrd-page-selectitems">
<div class="dxrd-wizard-page">
<!-- ko template: { name: 'dxrd-page-selectitems-radio-group', data: $data } -->
<!-- /ko -->
<!-- ko template: { name: 'dxrd-page-selectitems-list', data: $data } -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-page-selectitems-radio-group">
<!-- ko if: canCreateNew -->
<div class="dxrd-wizard-datasourceoperation dxrd-radio-nowrap-ellipsis" data-bind="dxRadioGroup: { value: selectedOperation, items: operations, layout: 'vertical' }">
<div data-options="dxTemplate : { name: 'item' }">
<div class="dxrd-radio-nowrap-ellipsis-text" data-bind="text: text, attr: { 'title': text }"></div>
</div>
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-page-selectitems-list">
<div class="dxrd-wizard-availabledatasources dx-default-border-style dxd-border-secondary" data-bind="styleunit: { top: $data.canCreateNew() ? 65 : 0 }">
<div class="dxrd-wizard-list dxd-border-primary" data-bind="dxList: { dataSource: items, onSelectionChanged: function(e) { selectedItems(e.addedItems) }, selectedItems: selectedItems.peek(), hoverStateEnabled:false, editEnabled: true, height: '100%', editConfig: { selectionEnabled: false }, searchExpr: 'name', searchEnabled: true, selectionMode: 'single', activeStateEnabled: false, disabled: _createNew, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, searchEditorOptions: { placeholder: $root.dx._static.searchPlaceholder() } }">
<div data-options="dxTemplate : { name: 'item' }" data-bind="event: { dblclick: function(e){ $parent.onDblClick() } }">
<div data-bind="text: $parent._displayExpr($data)"></div>
</div>
</div>
</div>
</script>
<script type='text/html' id='dxrd-page-specify-connection'>
<div class="dxrd-wizard-page">
<!-- ko template: { name: 'dxrd-page-selectitems-radio-group', data: $data } -->
<!-- /ko -->
<!-- ko if: !_createNew() -->
<!-- ko template: { name: 'dxrd-page-selectitems-list', data: $data } -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: _createNew -->
<div class="dxrd-page-specify-connection_createNew">
<!-- ko template: { name: 'dxrd-page-jsonsource', data: _specifySourceData } -->
<!-- /ko -->
</div>
<!-- /ko -->
</div></script>
<script type="text/html" id="dx-jsonwizard-parametercollection">
<div class="dx-field">
<!-- ko with: value -->
<div class="dx-jsonwizard-parameter-left-container">
<div class="dx-jsonwizard-parameter">
<div data-bind="dxLocalizedSelectBox: { dataSource: _parameterTypes, value: itemType, valueExpr:'value', displayExpr: 'displayValue', displayCustomValue: true, dropDownOptions: { container: $root.getPopupContainer($element) } }"></div>
</div>
</div>
<div class="dx-jsonwizard-parameter-middle-container">
<div data-bind="dxTextBox: { value: name, placeholder: $data.namePlaceholder() }, dxValidator: { validationRules: nameValidationRules || [] }"></div>
</div>
<div class="dx-jsonwizard-parameter-right-container">
<div class="dx-jsonwizard-parameter">
<div data-bind="dxTextBox: { value: _editingValue, placeholder: $data.valuePlaceholder() }, visible: !$data.isExpression()"></div>
<div data-bind="dxExpressionEditor: { options: _expression, fieldListProvider: itemsProvider, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() }, visible: $data.isExpression"></div>
</div>
</div>
<!-- ko template: { name: 'dx-wizard-menu-box-editorswitch', data: $data } -->
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-jsonwizard-loadfile-editor">
<div data-bind="dxFileImagePicker: { value: value, placeholderId: 'File', accept:'.json,.txt' }"></div>
</script>
<script type="text/html" id="dx-jsonwizard-jsonstring-editor">
<!-- ko if: !aceAvailable -->
<div class="dxrd-jsonwizard-jsonstring-editor dxd-border-secondary dxd-back-primary2" data-bind="dxTextArea: { value: value, spellcheck: false, isValid: isValid }, dxValidator: $data.validator || { validationRules: jsonStringValidationRules || [] }"></div>
<!-- /ko -->
<!-- ko if: aceAvailable -->
<div class="dx-texteditor dx-editor-outlined dxrd-jsonwizard-jsonstring-editor dxd-wizard-jsoneditor dxd-border-secondary dxd-back-primary2" data-bind="dxAceEditor: { value: value, editorContainer: editorContainer, options: aceOptions, additionalOptions: additionalOptions }, css: { 'dx-invalid' : !value() || !isValid() }"></div>
<!-- /ko -->
<div class="dxd-upload-file">
<div class="dxd-back-primary2"></div>
<div data-bind="dxButtonWithTemplate: { onClick: uploadFile, hint: $data.getUploadTitle(), icon: 'dxrd-svg-wizard-Download' }"></div>
</div>
</script><script type="text/html" id="dxrd-wizard-add-queries-page">
<div class="dxrd-wizard-page dxrd-wizard-add-queries-page dxrd-wizard-page-treelist-accordion-style">
<div data-bind="treeListSearchPanel: {controllers: ko.unwrap(_fieldListModel).treeListController}"></div>
<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>
<!-- ko ifnot: $data.disableCustomSql -->
<!-- ko template: { name: 'dxqb-popup-selectStatment', data: _popupSelectStatement } -->
<!-- /ko -->
<!-- /ko -->
<!-- ko template: { name: 'dxrd-querybuilder-popup', data: _popupQueryBuilder } -->
<!-- /ko -->
<div class="dxrd-wizard-load-panel dxd-text-primary" data-bind="dxLoadPanel: _loadPanelViewModel($element)">
</div>
</div>
</script>
<script type='text/html' id='dxd-custom-query-treelisitem'>
<div data-bind="visible: visible">
<div class="dx-background-inheritor dxd-back-highlighted dxd-state-selected">
<div class="dx-treelist-item dx-fontsize-reestablished dxd-list-item-back-color" data-bind="
styleunit: padding,
css: { 'dx-treelist-item-selected dxd-state-selected dxd-back-secondary': isSelected }">
<div class="dx-treelist-collapsedbutton" data-bind="css: nodeImageClass"></div>
<div class="dx-treelist-caption">
<!-- ko if: actions && actions.length > 0 -->
<div class="dx-treelist-action-container" data-bind="visible: isSelected || isHovered">
<!-- ko foreach: actions -->
<!-- ko if: templateName -->
<!-- ko template: templateName -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: !templateName -->
<div class="dx-treelist-action" data-bind="dxButtonWithTemplate: { onClick: function() { clickAction($parent); }, icon: imageTemplateName, iconClass: imageClassName, disabled: ko.unwrap(disabled) }, attr: { title: text }"></div>
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
<div class="dx-treelist-selectedcontent" data-bind="click: toggleSelected">
<div class="dx-treelist-text-wrapper">
<div class="dx-add-queries-page-checkbox" data-bind="dxCheckBox: { value: data.checked }, click: function(treeNode, e) {
treeNode.data.toggleChecked();
e.stopPropagation();
return true;
}"></div>
<div class="dx-treelist-text dx-treelist-text-with-checkbox">
<div class="dx-queryname-textbox" data-bind="dxTextBox: { value: queryName, onValueChanged: queryNameHasChanged }"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-configure-query-parameters-page">
<div class="dxrd-wizard-page dxrd-configure-query-parameters-page dxrd-wizard-page-treelist-accordion-style">
<div class="dxrd-wizard-dataMember dxd-border-secondary" data-bind="dxScrollView: { showScrollbar: 'onHover', height: _scrollViewHeight }">
<!-- ko if: !!$data._fieldListModel() -->
<div data-bind="treelist: _fieldListModel" class="dxrd-width-100 dxrd-height-100"></div>
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dxrd-wizard-configure-relations-page">
<div class="dxrd-wizard-page dxrd-wizard-configure-relations-page">
<!-- ko if: $data._relationsEditor() -->
<!-- ko template: { name: 'dxrd-masterDetail-editor-complete-wizard', data: $data._relationsEditor }-->
<!-- /ko -->
<!-- /ko -->
</div>
</script><script type="text/html" id="dxrd-masterDetail-editor-complete-wizard">
<div class="dx-filtereditor dxrd-masterDetail-editor-complete-wizard dxd-border-secondary">
<!-- ko if: $data -->
<div class="dx-filtereditor-tree dxd-border-secondary dxrd-cursor-default" data-bind="dxScrollView: { showScrollbar: 'onHover', direction: 'both' }" >
<!-- ko foreach: masterQueries -->
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-text dxd-filter-editor-text-color criteria-operator-item-group dxd-filter-editor-group-back-color stylized" data-bind="text: queryName"></div>
<div data-bind="service: { name: 'createRelation' }"></div>
</div>
<div class="criteria-operator-content">
<!-- ko template: { name: 'dx-masterDetail-editor-relation', foreach: relations }-->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</div>
<div class="dx-selectbox-popup-wrapper dx-dropdownlist-popup-wrapper dx-filtereditor-criteriaoperator-popup dx-dropdowneditor-overlay" data-bind="dxPopupWithAutoHeight: { height: '235px', focusStateEnabled: false,
position: $root.rtl ? { my: 'right top', at: 'right bottom', of: popupService.target, collision: 'flipfit' } : { my: 'left top', at: 'left bottom', of: popupService.target, collision: 'flipfit' },
wrapperAttr: { class: 'dx-selectbox-popup-wrapper dx-dropdownlist-popup-wrapper dx-filtereditor-criteriaoperator-popup dx-dropdowneditor-overlay' },
container: $root.getPopupContainer($element),
target: popupService.target,
showTitle: false,
showCloseButton: false,
animation: {},
hideOnOutsideClick: true,
shading: false,
minWidth:'170px',
maxWidth:'500px',
width: 'auto',
visible: popupService.visible }">
<!-- ko with: popupService-->
<!-- ko with: data -->
<!-- ko template: template-->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</script><script type="text/html" id="dxqb-popup-selectStatment">
<div data-bind="dxPopup: {
animation: {
show: { type: 'fade', from: 0, to: 1, duration: 700 },
hide: { type: 'fade', from: 1, to: 0, duration: 700 }
},
wrapperAttr: { class: 'dxqb-preview' },
visible: isVisible,
title: title(),
showTitle: true,
resizeEnabled: true,
shading: true,
shadingColor: 'transparent',
fullScreen: false,
width: 800,
height: 544,
container: closest($element, '.dxrd-wizard'),
position: { of: closest($element, '.dx-designer-viewport') },
onHidden: function() { $data.data(null) },
focusStateEnabled: false
}">
<div class="dxqb-preview-popup-content">
<div class="dxqb-show-query-string-content dx-widget">
<!-- ko if: !aceAvailable -->
<div class="dxrd-show-query-string-editor" data-bind="dxTextArea: { value: data, valueChangeEvent: 'keyup', disabled: false }"></div>
<!-- /ko -->
<!-- ko if: aceAvailable -->
<div class="dxrd-show-query-string-editor">
<div class="dxrd-show-query-string-editor-content">
<div class="dx-sql_editor dxd-back-primary2" data-bind="dxAceEditor: { value: data, additionalOptions: additionalOptions, options: aceOptions }"></div>
</div>
</div>
<!-- /ko -->
</div>
</div>
<div class="dxqb-preview-popup-buttons dxd-border-secondary">
<div data-bind="dxButton: { text: okButtonText(), onClick: okButtonHandler }" class="dxqb-preview-popup-button"></div>
</div>
</div>
</script>
<script type='text/html' id='dxrd-treelist-with-checkbox'>
<!-- ko if: visible -->
<!-- ko if: hasContent -->
<!-- ko template: "dx-treelist-accordion-item-with-checkbox" -->
<!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: hasContent -->
<!-- ko template: "dx-treelist-header-item-with-checkbox" -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</script>
<script type="text/html" id="dx-treelist-accordion-item-with-checkbox">
<div data-bind="dxdAccordionExt: { collapsed: collapsed, lazyContentRendering: true, setCollapsedChangedEvent: setCollapsedChangedEvent }">
<!-- ko template: "dx-treelist-header-item-with-checkbox" -->
<!-- /ko -->
<div class="dx-fieldset dx-accordion-content dxd-back-primary">
<!-- ko with: data -->
<!-- ko template: { name: contenttemplate } -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-treelist-header-item-with-checkbox">
<div class="dx-background-inheritor dxd-back-highlighted dxd-state-selected">
<div data-bind="event: events,
attr: { class: 'dx-treeview-item dx-treelist-item dx-fontsize-reestablished dxd-list-item-back-color ' + (hasItems ? 'dx-treelist-list-item-content ' : 'dx-treelist-field-item-content ') + (isSelected ? 'dx-treelist-item-selected dxd-state-selected dxd-back-secondary' : '') },
styleunit: padding, css: { 'dx-state-hover': isHovered }">
<!-- ko ifnot: hasItems-->
<!-- ko if: showIcon -->
<div class="dx-treelist-image" data-bind="css: imageClassName, template: { name: imageTemplateName, if: !!imageTemplateName }, attr: { title: text }"> </div>
<!-- /ko -->
<!-- ko ifnot: showIcon -->
<div class="dx-treelist-collapsedbutton" data-bind="css: nodeImageClass"></div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: hasItems -->
<div class="dx-treelist-collapsedbutton" data-bind="css: nodeImageClass, visible: hasItems, template: 'dxrd-svg-collapsed', click: toggleCollapsed"></div>
<!-- /ko -->
<div class="dx-treelist-caption">
<!-- ko if: actions && actions.length > 0 -->
<div class="dx-treelist-action-container" data-bind="visible: isSelected || isHovered">
<!-- ko foreach: actions -->
<!-- ko if: templateName -->
<!-- ko template: templateName -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: !templateName -->
<div class="dx-treelist-action" data-bind="dxButtonWithTemplate: { onClick: function() { clickAction($parent); }, icon: imageTemplateName, iconClass: imageClassName, disabled: ko.unwrap(disabled) }, attr: { title: text }"></div>
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
<div class="dx-treelist-selectedcontent" data-bind="click: toggleSelected, draggable: isDraggable ? dragDropHandler : null, css: { 'dxrd-disabled': data.disabled }">
<div class="dx-treelist-text-wrapper">
<div class="dx-add-queries-page-checkbox" data-bind="dxCheckBox: { value: data.checked, disabled: data.selectionDisabled }, click: function(treeNode, e) {
treeNode.data.toggleChecked();
e.stopPropagation();
return true;
}"></div>
<!--ko if: searchModel.searchEnabled -->
<div class="dx-treelist-text dx-highlighted-search-text dx-treelist-text-with-checkbox" data-bind="searchHighlighting: { text: text, textToSearch: searchModel.textToSearch, searchOptions: searchModel.searchOptions }, attr: { title: text }"></div>
<!-- /ko -->
<!--ko ifnot: searchModel.searchEnabled -->
<div class="dx-treelist-text dx-treelist-text-with-checkbox" data-bind="text: text, attr: { title: text }"></div>
<!-- /ko -->
</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-treelist-action-with-popover">
<div class="dx-treelist-action-with-popover dxrd-display-inline-block" >
<div class="dx-treelist-action" data-bind="dxButtonWithTemplate: { onClick: function() { clickAction($parent); }, icon: imageTemplateName, iconClass: imageClassName , disabled: ko.unwrap(disabled) }, attr: { title: text }"></div>
<!-- ko template: { name: 'dx-popover-list-items', data: ko.utils.extend($parent.data, { position: $root.rtl ? 'left' : 'right', popupContainer: $root.getPopupContainer }) }-->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-treelist-accordion-contenttemplate-custom-with-actions">
<div data-bind="dxPropertyGrid: { target: $parent.data.dataSourceParameter, level: $parent.data.editor.level + 1 }"></div>
</script><script type="text/html" id="dxrd-page-objectdatasource-datamembers">
<div class="dx-objectdatasource-datamembers-page">
<div data-bind="dxList: { dataSource: _chooseObjectDataMember.dataMembers, selectedItems: _chooseObjectDataMember.selectedDataMembers, selectionMode: 'single', activeStateEnabled: false, focusStateEnabled: false, searchExpr: 'displayName', searchEnabled: true, noDataText: $dx._static.noDataText(), encodeNoDataText: true, searchEditorOptions: { placeholder: $root.dx._static.searchPlaceholder() } }">
<div data-options="dxTemplate : { name: 'item' }">
<div data-bind="text: $data.displayName"></div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-page-objectdatasource-types">
<div class="dx-objectdatasource-types-page">
<div class="dxd-border-primary" data-bind="treeListSearchPanel: {controllers: _chooseObjectType.availableTypesTreelistModel.treeListController}"></div>
<div data-bind="dxScrollView: { showScrollbar: 'onHover', height: _chooseObjectType._scrollViewHeight}">
<div data-bind="treelist: _chooseObjectType.availableTypesTreelistModel"></div>
<!-- ko if: _chooseObjectType.types && !_chooseObjectType.types().length -->
<div class="dxa-no-data-message" data-bind="text: $root.dx._static.noDataText()"></div>
<!-- /ko-->
</div>
</div>
</script>
<script type="text/html" id="dxrd-page-objectsource">
<div class="dxrd-wizard-page dx-objectsource-page dx-frameless-style dxrd-position-absolute dxrd-top-45px dxrd-left-45px dxrd-right-45px dxrd-bottom-45px dxrd-margin-0" >
<!-- ko foreach: _sections-->
<div class="dx-border-inheritor dxd-border-accented">
<div class="dxrd-report-page-tile dxd-border-secondary" data-bind="style: position, css: { 'dxrd-disabled': $data.disabled() }">
<div class="dxrd-report-page-tile-title" data-bind="text: $parent.showDescription($index(), description), attr: { title: $parent.showDescription($index(), description) }"></div>
<div class="dxrd-report-page-tile-content dx-default-border-style dxd-border-secondary">
<!-- ko if: !$data.disabled() -->
<!-- ko template: { name: template, data: data } -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: $data.disabled() -->
<div class="dxrd-wizard-page dxrd-wizard-disabled-content" data-bind="text: disabledText"></div>
<!-- /ko -->
</div>
</div>
</div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-objectdatasource-types-section">
<div class="dx-objectdatasource-types-section">
<div data-bind="treeListSearchPanel: {controllers: availableTypesTreelistModel.treeListController}"></div>
<div data-bind="dxScrollView: { showScrollbar: 'onHover', height: _scrollViewHeight}">
<div data-bind="treelist: availableTypesTreelistModel"></div>
</div>
</div>
</script>
<script type="text/html" id="dx-objectdatasource-datamembers-section">
<div class="dx-objectdatasource-parameters-datamembers-section">
<div class="dxd-border-primary" data-bind="dxList: { dataSource: dataMembers, selectedItems: selectedDataMembers, selectionMode: 'single', activeStateEnabled: false, focusStateEnabled: false, searchExpr: 'displayName', searchEnabled: true, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, searchEditorOptions: { placeholder: $root.dx._static.searchPlaceholder() } }">
<div data-options="dxTemplate : { name: 'item' }">
<div data-bind="text: $data.displayName"></div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-objectdatasource-parameters-grid">
<!-- ko if: !!$data -->
<div class="dx-field dxd-back-primary">
<div class="dx-field-label" data-bind="text: $data.displayName, attr: { 'title': $data.displayName}"></div>
</div>
<div class="dxrd-properties-wrapper">
<!-- ko foreach: _grids -->
<!-- ko template: { name: 'dx-propertieseditor', data: $data }-->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dx-objectdatasource-expression-popup">
<!-- ko if: $data.value -->
<div data-bind="dxExpressionEditor: getOptions({ options: value, fieldListProvider: value().itemsProvider, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() })"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dx-objectdatasource-parameters-section">
<div class="dx-objectdatasource-parameters-section">
<div class="dx-fieldset" data-bind="dxScrollView: { showScrollbar: 'onHover'}">
<!-- ko template: { name: 'dx-objectdatasource-parameters-grid', data: _ctorParametersObject }-->
<!-- /ko -->
<!-- ko template: { name: 'dx-objectdatasource-parameters-grid', data: _dataMemberParametersObject }-->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-objectdatasource-configureparameters-page">
<div class="dxrd-report-page-tile-content dx-default-border-style dxd-border-secondary" data-bind="dxScrollView: { showScrollbar: 'onHover'}">
<!-- ko template: { name: 'dx-objectdatasource-parameters-section', data: _chooseObjectParameters } -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-page-configure-parameters">
<div class="dxrd-wizard-page">
<div class="dxrd-datasource-parameters" data-bind="dxCollectionEditor: parametersEditorOptions"></div>
</div>
</script>
<script type="text/html" id="dxrd-parameter-collection-item">
<div class="dx-accordion" data-bind="dxdAccordion: $data">
<div class="dxrd-group-header dx-accordion-header dxd-text-primary dxd-border-primary dxrd-border-bottom-0" data-bind="styleunit: { 'marginLeft' : padding }, css: { 'dxrd-group-header-collapsed': collapsed }">
<div class="dx-collapsing-image dxrd-display-inline-block" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed }" ></div>
<span class="dxrd-group-header-text dxd-text-primary" data-bind="text: value.name"></span>
</div>
<div class="dx-accordion-content dxd-border-primary">
<div data-bind="template: { name: 'dx-propertieseditor', data: getProperties() }"></div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-wizard-datasource-parameters">
<div class="dx-fieldset dxrd-height-100" >
<div class="dx-collectioneditor dxrd-height-100" >
<div class="dxrd-datasource-parameters-collection">
<div class="dxrd-datasource-parameters-container dxd-border-secondary" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true }">
<!-- ko if: values.length === 0 -->
<div class="dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info">
<span class="dxrd-datasource-parameters-empty-text" data-bind="text: emptyAreaText"></span>
</div>
<!-- /ko -->
<!-- ko if: values.length !== 0 -->
<div class="dx-collectioneditor-items" data-bind="foreach: values">
<div class="dx-background-inheritor dxd-back-highlighted dxd-state-selected">
<div class="dx-collectioneditor-item-container dx-fontsize-reestablished dxd-list-item-back-color" data-bind="dxclick: select, css: { 'dxd-state-selected dxd-back-secondary' : selected }">
<div class="dx-collection-item"></div>
</div>
</div>
</div>
<!-- /ko -->
</div>
</div>
<div class="dxrd-collectioneditor-wizard-buttons" data-bind="visible: showButtons">
<div class="dxrd-collectioneditor-action" data-bind="dxButton: { onClick: buttons.add.action, text: buttons.add.text }, attr: { title: buttons.add.text }"></div>
<div class="dxrd-collectioneditor-action" data-bind="dxButton: { onClick: buttons.delete.action, disabled: selectedIndex === null, text: $parent.removeButtonTitle }, attr: { title: $parent.removeButtonTitle }"></div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-page-connectionstring">
<div class="dxrd-wizard-page">
<div class="dx-wizard-connections dx-default-border-style dxd-border-secondary">
<div class="dxrd-wizard-list dxd-border-primary" data-bind="dxList: { dataSource: _connectionStrings, onSelectionChanged: function(e) { _selectedConnectionString(e.addedItems) }, selectedItems: _selectedConnectionString.peek(), focusStateEnabled: false, searchEnabled: true, searchExpr: 'description', editEnabled: true, editConfig: { selectionEnabled: true }, selectionMode: 'single', activeStateEnabled: false, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, searchEditorOptions: { placeholder: $root.dx._static.searchPlaceholder() } }">
<div data-options="dxTemplate : { name: 'item' }">
<div data-bind="text: $data['description'] || $data['name']"></div>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-select-control">
<div class="dxrd-create-query-page-query-header">
<div class="dx-editquery-editor" data-bind="text: caption()"></div>
<div class="dxd-hyperlink-color dxd-text-accented" data-bind="visible: !runQueryBuilderDisabled, text: $parent.runQueryBuilderBtnText, click: function() { $parent.runQueryBuilder() }"></div>
</div>
<!-- ko if: !aceAvailable -->
<div class="dxrd-wizard-list dxrd-create-query-page-editor dx-default-border-style dxd-border-secondary dx-editquery-editor" data-bind="dxTextArea: { value: sqlString, valueChangeEvent: 'keyup input blur', readOnly: disableCustomSql() }"></div>
<!-- /ko -->
<!-- ko if: aceAvailable -->
<div class="dxrd-create-query-page-editor dxrd-create-query-page-editor-border dxd-border-secondary dx-editquery-editor">
<div class="dxrd-create-query-page-editor-content">
<div class="dx-sql_editor dxd-back-primary2" data-bind="dxAceEditor: { value: sqlString, additionalOptions: additionalOptions, options: aceOptions }, css: { 'dx-disabled-ace': disableCustomSql() }"></div>
</div>
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-procedures-control">
<div class="dx-editquery-editor dxrd-margin-top-20px" data-bind="text: caption()"></div>
<div class="dx-editquery-editor dx-default-border-style dxd-border-secondary">
<div class="dxrd-wizard-list dxrd-create-query-page-editor" data-bind="dxList: { dataSource: storedProcedures, searchEnabled: true, searchExpr: 'name', onContentReady: scrollActiveItem, selectedItems: selectedProcedure, editEnabled: true, editConfig: { selectionEnabled: true }, selectionMode: 'single', activeStateEnabled: false, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true }">
<div data-options="dxTemplate : { name: 'item' }">
<div data-bind="text: $parent.generateStoredProcedureDisplayName($data)"></div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-wizard-create-query-page">
<div class="dxrd-wizard-page dxrd-wizard-create-query-page">
<div class="dxrd-create-query-page-content">
<div data-bind="text: queryNameCaption()"></div>
<div class="dx-editquery-editor" data-bind="dxTextBox: { value: queryName, placeholder: $data.placeholder() }"></div>
<div class="dxrd-radio-nowrap-ellipsis" data-bind="dxRadioGroup: { value: selectedQueryType, layout: 'horizontal', items: queryTypeItems }">
<div data-options="dxTemplate : { name: 'item' }">
<div class="dxrd-radio-nowrap-ellipsis-text" data-bind="text: $parent.localizeQueryType($data), attr: { 'title': $parent.localizeQueryType($data) }"></div>
</div>
</div>
<!-- ko template: { name: queryControl().template, data: queryControl() } -->
<!-- /ko -->
</div>
<!-- ko template: { name: 'dxrd-querybuilder-popup', data: popupQueryBuilder } -->
<!-- /ko -->
</div>
</script><script type="text/html" id="dxrd-querybuilder-popup">
<div data-bind="dxPopup: popupViewModel($element)">
<!-- ko if: qbOptions -->
<!-- ko if: isVisible -->
<div class="dxrd-querybuilder-popup-content">
<div class="dxrd-height-100" data-bind="dxQueryBuilder: qbOptions"></div>
</div>
<!-- /ko -->
<div class="dxrd-querybuilder-popup-buttons dxd-border-secondary">
<div data-bind="dxButton: { text: getDisplayText('previewResults'), onClick: previewHandler, disabled: okButtonDisabled }" class="dxrd-querybuilder-popup-button-left"></div>
<div data-bind="dxButton: { text: getDisplayText('cancel'), onClick: cancelHandler }" class="dxrd-querybuilder-popup-button"></div>
<div data-bind="dxButton: { text: getDisplayText('ok'), type: 'default', onClick: okHandler, disabled: okButtonDisabled }" class="dxrd-querybuilder-popup-button"></div>
</div>
<div class="dxrd-wizard-load-panel dxd-text-primary" data-bind="dxLoadPanel:{
animation: {
show: { type: 'fade', from: 0, to: 1, duration: 700 },
hide: { type: 'fade', from: 1, to: 0, duration: 700 }
},
deferRendering: false,
message: getDisplayText('loading'),
visible: showLoadIndicator,
shading: true,
shadingColor: 'transparent'}">
</div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-querybuilder">
<div class="dx-designer dx-querybuilder" data-bind="template: 'dxrd-designer'">
</div>
</script><script type="text/html" id="dx-wizard-menu-box-editorswitch">
<div class="dxrd-editormenu-box dxd-property-grid-menu-box-color dxd-back-highlighted" data-bind="css: { 'dxd-state-active': $data.isExpression() }, dxButtonWithTemplate: { onClick: switchEditors, icon: 'dxrd-svg-wizard-expressions', disabled: disabled }">
</div>
</script>
<script type="text/html" id="dx-popover-list-items">
<div data-bind="dxPopover: { wrapperAttr: { class: $data.className }, width: $data.width || 200, position: position, visible: popoverVisible, target: target, container: popupContainer($element)}">
<div data-bind="attr: { class: $data.className + '-list'}, dxList: { dataSource: popoverListItems(), onItemClick: itemClickAction }">
<div data-bind="attr: { class: $data.className + '-list-item'}" data-options="dxTemplate : { name: 'item' }">
<div class="dx-text-content" data-bind="text: name, attr: { title: name }"></div>
</div>
</div>
</div>
</script><script type="text/html" id="dx-wizard-headerNew">
<div class="dxrd-wizard-header-custom">
<!-- ko with: _currentPage -->
<div class="dxrd-span-title" data-bind="text: $data.title || $parent.title"></div>
<div class="dxrd-span-description" data-bind="text: description, attr: { title: description }"></div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-wizard-newlayout">
<div class="dxrd-wizard dx-editors dxd-text-primary" data-bind="dxPopup: {
animation: {
show: { type: 'fadeIn', duration: 700 },
hide: { type: 'fadeOut', duration: 700 }
},
visible: isVisible,
wrapperAttr: { class: 'dxrd-wizard dx-editors dxd-text-primary' },
title: isVisible() ? title : '',
showTitle: true,
fullScreen: false,
width: width,
height: height,
container: $element,
visualContainer: _container($element),
titleTemplate: _titleTemplate,
position: _wizardPopupPosition($element)
}, cssArray: [ $data._extendCssClass, { 'dx-rtl': $root.rtl, 'dx-ltr': !$root.rtl }]">
<div class="dxrd-wizard-content">
<!-- ko with: _currentPage -->
<div class="dxrd-height-100" data-bind="template: { name: template, data: page } "></div>
<!-- /ko -->
<div class="dxrd-wizard-load-panel dxd-text-primary" data-bind="dxLoadPanel: _loadPanelViewModel($element)"></div>
</div>
<div class="dxrd-wizard-navigation">
<div data-bind="dxButton: cancelButton" class="dxrd-wizard-btn left"></div>
<div data-bind="dxButton: finishButton" class="dxrd-wizard-btn right"></div>
<div data-bind="dxButton: nextButton" class="dxrd-wizard-btn right"></div>
<div data-bind="dxButton: previousButton" class="dxrd-wizard-btn right"></div>
</div>
</div>
</script>
<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="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, 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, keyup: keypressAction }"></textarea>
<!--/ko-->
</div>
</script>
<script type="text/html" id="dxrd-export-tool-content">
<div class="dxrd-visually-hidden">
<form data-bind="attr: { 'action': exportActionUri }, foreach: exportFormData" method="post">
<input data-bind="attr: {'name': name, 'value': value}"/>
</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 role="img" class="dxrd-report-preview-content dxrd-position-relative dxrd-width-100 dxrd-height-100" data-bind="attr: {'aria-label': currentPageAriaLabelImgAlt }, dxclick: clickToBrick, 'brick-selection-prog': brickSelectionProg">
<div class="dxrd-report-preview-content-loading-wrapper dxrd-background-white" data-bind="styleunit: { 'width': width + 2, 'height': height + 2 }, visible: pageLoading">
<div class="dxrd-report-preview-content-loading-panel dxrd-text-align-center" data-bind="styleunit: { 'paddingTop': height / 2.3 }">
<div class="dxrd-report-preview-content-loading-panel-text" data-bind="text: loadingText"></div>
</div>
</div>
<div 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 && activeBricks.length > 0 -->
<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 -->
</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>
<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 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 }" class="dxrd-report-preview-placeholder">
<div aria-live="assertive" aria-atomic="true" class="dxd-empty-area-placeholder-text-color dxd-text-info" data-bind="text: emptyDocumentCaption"></div>
</div>
</div>
</div>
<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, 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: predefinedRanges.attr, dxScrollView: predefinedRanges.scrollViewOptions, dxMutationObserver: predefinedRanges.accessibilityKeyboardHelper">
<div class="dx-accessibility-container-background dxd-back-accented"></div>
<!-- ko foreach: predefinedRanges.items -->
<div role="option" class="dxrv-daterange-editor-list-item dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented" data-bind="attr: { 'aria-selected': selected }, css: { 'dxd-state-selected': selected }, dxAction: { action: click }">
<div class="dx-accessibility-field-background dxd-back-accented"></div>
<!-- ko text: displayName -->
<!-- /ko -->
</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-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" data-options="dxTemplate:{ name:'select_cell' }">
<div class="dxrv-daterange-cell-text" data-bind="text: text"></div>
<div data-bind="css: { 'dxd-back-accented': $parent.inRange(date) }"></div>
</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-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="styleunit: { 'height': height, 'width': rect().width, top: absolutePosition.y },
css: { 'dxrd-band-content-selected dxrd-context-menu-container dxd-border-accented dx-border-inheritor': selected() },
resizable: {
starting: function(_, 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="event: { dblclick: function() { $root.inlineTextEdit.show($element) } }, style: { visibility: (selected() || focused()) ? 'inherit' : 'hidden'}, css: {'dxrd-selected dxrd-context-menu-container': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
<div class="dxd-border-accented dxrd-control-border-box"></div>
<!-- ko if: $root.inlineTextEdit.visible() && selected() -->
<!-- ko with: $root.inlineTextEdit-->
<div class="inline-text-edit" data-bind="dxTextArea: { value: text, onKeyUp: keypressAction, valueChangeEvent: 'keyup' }"></div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: $data.controls-->
<!-- ko foreach: controls -->
<!-- ko template: { name: $data.selectiontemplate } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
<div class="dxrd-control dxrd-context-menu-container" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? 'visible' : 'hidden'}">
<div class="dxrd-control-content-select-main" data-bind="styleunit: { 'top': contentSizes().top + (isIntersect() ? 1 : 0), 'left': contentSizes().left + (isIntersect()? 1 : 0), lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width}">
<!-- ko if: $data.controls-->
<!-- ko foreach: controls -->
<!-- ko template: { name: $data.selectiontemplate } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</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="style: { visibility: (selected() || focused()) ? 'inherit' : 'hidden'}, css: {'dxrd-selected dxrd-context-menu-container': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $data.getResizableOptions($root.resizeHandler), draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
<div class="dxd-border-accented dxrd-control-border-box"></div>
</div>
<div class="dxrd-control dxrd-context-menu-container" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? 'visible' : 'hidden'}">
<div class="dxrd-control-content-select-main" data-bind="styleunit: { 'top': contentSizes().top + (isIntersect() ? 1 : 0), 'left': contentSizes().left + (isIntersect()? 1 : 0), lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width}">
</div>
</div>
</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="visible: selected() || focused(), css: {'dxrd-selected dxrd-context-menu-container': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $data.getResizeOptions($root.resizeHandler), draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
<div class="dxd-border-accented dxrd-control-border-box"></div>
</div>
<div class="dxrd-control dxrd-context-menu-container" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? 'visible' : 'hidden'}">
<div class="dxrd-control-content-select-main" data-bind="styleunit: { 'top': contentSizes().top + (isIntersect() ? 1 : 0), 'left': contentSizes().left + (isIntersect()? 1 : 0), lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width}">
</div>
</div>
</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 }"></div>
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</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)">
<!-- 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" data-bind="text: $root.getLocalization('Field List', 'ReportStringId.UD_Title_FieldList')"></div>
<!-- ko if: $data.allowAddDataSource -->
<div id="btn-add-dataSource" data-bind="dxButtonWithTemplate: { onClick: startWizard, visible: visible(), text: addDataSourceButtonText, icon: 'dxrd-svg-operations-add', iconClass: 'dx-image-add' }, attr: { title: addDataSourceButtonText }">
</div>
<!-- /ko -->
</div>
<div data-bind="treeListSearchPanel: {controllers:treeListOptions.treeListController}"></div>
<div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: 'onHover', scrollByContent: false, bounceEnabled: false, useNative: false, scrollByThumb: true }">
<div class="dx-editors">
<div id="tree" data-bind="treelist: treeListOptions" class="dxrd-width-100 dxrd-height-100"></div>
</div>
</div>
<!-- ko if: useContextMenu -->
<div data-bind="dxContextMenu: fieldListContextMenu"></div>
<!-- /ko -->
<!-- /ko -->
</div></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: getRegisteredService() -->
<div class="dxrd-localization-panel-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxd-back-primary2 dx-button-has-text" data-bind="dxButtonWithTemplate: { onClick: function() { $data.applyLocalization($data.getRegisteredService()) },
disabled: isDefaultLanguage(),
icon: 'dxrd-svg-actions-apply_localization_service',
iconClass: 'apply-localization-service' },
attr: { title: $root.getLocalization('Translate', 'ASPxReportsStringId.ReportDesigner_LocalizationEditorTranslate') }"></div>
<!-- /ko -->
<div class="dxrd-localization-panel-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxd-back-primary2 dx-button-has-text" data-bind="dxButtonWithTemplate: { onClick: clearLocalization,
icon: 'dxrd-svg-actions-reset',
iconClass: 'reset-localization',
disabled: isDefaultLanguage() },
attr: { title: $root.getLocalization('Reset', 'ASPxReportsStringId.ParametersPanel_Reset') }"></div>
</div>
<!-- ko template: 'dx-propertygrid-searchbox'-->
<!-- /ko -->
</div>
</div>
</div>
<div class="dxrd-localization-panel-content">
<div class="dxrd-localization-panel-content-header">
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">
<div class="dxrd-localization-language dxrd-localization-panel-default dxd-text-secondary" data-bind="text: $data.propertiesHeaderText()"></div>
</div>
<div class="dx-field-value">
<div class="dxrd-localization-language dxrd-localization-panel-default dxd-text-secondary" data-bind="text: $data.defaultLanguageText()"></div>
<div class="dxrd-localization-language dxrd-localization-panel-current dxd-text-secondary" data-bind="text: $data.currentLanguageText(), visible: !$data.isDefaultLanguage()"></div>
</div>
</div>
</div>
</div>
<div data-bind="dxList: { dataSource: localizationItems, selectionMode: 'single', height: 'calc(100% - 59px)', onSelectionChanged: onSelectionChanged, focusStateEnabled: false, activeStateEnabled: false, pageLoadMode: 'scrollBottom', noDataText: $root.dx._static.noDataText(), encodeNoDataText: true }">
<!-- ko lazy: { template: 'dxrd-localization-editor-item' } -->
<!-- /ko -->
</div>
</div>
<div data-bind="dxLoadPanel:{
visible: showLoadIndicator,
shading: true,
position: { of: getLoadPanelPosition($element) },
showIndicator: true,
showPane: true,
shadingColor: 'rgba(0,0,0,0.4)'}"></div>
</div>
</div>
<!-- /ko -->
</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.getIconTemplateName($data.value) }, attr: { title: $data.value }">
</div>
</div>
<div data-options="dxTemplate: { name:'dxrd-code-column' }">
<!-- ko if: $data.data.showLink-->
<a class="dx-link" target="_blank" rel="noreferer noopener"
data-bind="text: $data.data.code, attr: { href: $data.data.link }"></a>
<!-- /ko -->
<!-- ko if: !$data.data.showLink-->
<div data-bind="text: $data.value"></div>
<!-- /ko -->
</div>
<div data-options="dxTemplate:{ name:'dxrd-source-column' }">
<a class="dx-link" href="javascript:void(0)"
data-bind="text: value, click: function() { $parent.navigateToItem($data.value); }"></a>
</div>
<div data-options="dxTemplate: { name: 'detail' }">
<div class="dxrd-error-panel-description" data-bind="text: data.description"></div>
</div>
<div data-options="dxTemplate: { name: 'dxrd-error-source-filter' }">
<div data-bind="dxTagBox: {
maxDisplayedTags: 0, showSelectionControls: true, valueExpr: 'value', displayExpr: 'displayValue',
value: data.value, dataSource: data.dataSource, useItemTextAsTitle: true,
dropDownOptions: { container: data.getContainer($element), minWidth: 200 },
}"></div>
</div>
<div data-options="dxTemplate: { name: 'dxrd-error-type-filter' }">
<div data-bind="dxButtonGroup: $data.data">
<div data-options="dxTemplate: { name: 'dxrd-error-type-filter-item' }">
<div class="dxrd-errorType-column" data-bind="template: { name: $parents[1].getIconTemplateName(icon) } ">
</div>
<div class="dxrd-errorType-text" data-bind="text: $data.text()"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-bind="style: { display: !$data.collapsed() ? 'none' : 'block' }">
<div class="dxrd-error-panel-notification" data-bind="click: function() { $data.toggleCollapsed() }, template: { name: $data.getNotificationTemplate() }, attr: { title: $data.getTitleMessage() }"></div>
</div>
</div>
</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: width,
height: height,
title: $root.getLocalization(title),
visible: visible,
toolbarItems: buttons,
showCloseButton: true,
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 class="dxrd-parameter-edit-content">
<div data-bind="dxScrollView: { showScrollbar: 'onHover', height: 510 }">
<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': (templateName === 'dx-boolean'), 'dx-field-block': (templateName !== 'dx-boolean') }">
<!-- ko if: templateName !== 'dx-boolean'-->
<label class="dxa-smarttag-editor-displayName"
data-bind="text: displayName, attr: { 'title': fullDisplayName, 'for': editorInputId }, css: { 'dx-property-required': isRequired }"></label>
<!-- /ko -->
<div class="dx-field-value" data-bind="css: { 'dxd-border-accented': $data.isPropertyHighlighted }">
<!-- ko if: templateName !== 'dx-emptyHeader' -->
<!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- ko if: templateName === 'dx-boolean'-->
<label class="dxa-smarttag-editor-displayName"
data-bind="text: displayName, attr: { 'title': fullDisplayName, 'for': editorInputId }, css: { 'dx-property-required': isRequired }"></label>
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</script><script type='text/html' id='dxrd-smart-tag'>
<div class="dxrd-z-index-0 dxrd-position-absolute" data-bind="dxPopover: {
width: '216px',
height: 'auto',
position: { my: 'left center', at: 'right center', boundary: '.dxrd-designer-wrapper', of: '.dxrd-control-smart-tag', collision: 'flip fit', offset: '-10 0' },
container: getPopupContainer($element),
hideOnOutsideClick: true,
showTitle: false,
showCloseButton: false,
shading: false,
visible: popoverVisible,
animation: {} }">
<div class="dxa-tasks-smart-tag-content" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<div data-bind="css: { 'dx-rtl' : rtl }">
<div class="dx-editors">
<div class="dx-fieldset">
<!-- ko foreach: getEditors(false) -->
<!-- ko if: visible -->
<!-- ko template: 'dxrd-smart-tag-editor' -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<div class="dxa-smart-tag-separator" data-bind="visible: separatorVisible"></div>
<!-- ko foreach: getEditors(true) -->
<!-- ko if: visible -->
<!-- ko template: 'dxrd-smart-tag-editor' -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</div>
</div>
</div></script>
<script type="text/html" id="dxrd-smart-tags">
<div class="dxrd-control-smart-tags" data-bind="styleunit: { left: $data.position.x, top: $data.position.y, 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" class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" data-bind="visible: $data.visible, attr: { 'aria-label': $data.displayText && $data.displayText() || $data.text, 'aria-disabled': ko.unwrap($data.disabled) ? 'true' : 'false', 'aria-pressed': $data.selected ? ($data.selected() ? 'true' : 'false') : null }" >
<div data-bind="text: $data.displayText && $data.displayText() || $data.text, attr: { title: $data.displayText && $data.displayText() || $data.text, class: 'dxd-text-primary dxd-back-highlighted ' + (ko.unwrap($data.imageClassName) || '') }, dxclick: function() { if((typeof $data.disabled === 'function') && !$data.disabled() || !$data.disabled) { $data.clickAction($root.model && $root.model()); } }, css: {'dxrd-disabled-button': $data.disabled }"></div>
</div>
</script>
<script type="text/html" id="dxrd-context-menu">
<div data-bind="dxContextMenu: $data.contextMenu"></div>
</script><script type="text/html" id="dxrd-expression-action">
<div data-bind="dxclick: function() { $root.activateExpressionEditor($data); }">
<span class="dxd-text-primary dx-menu-item-text" data-bind="attr: { title: title }, text: title"></span>
<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-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>
</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, css: { 'dx-treelist-item-selected dxd-state-selected': isSelected }">
<div class="dx-treelist-caption">
<div class="dx-treelist-selectedcontent" data-bind="click: toggleSelected">
<div class="dx-treelist-image" data-bind="css: $data.imageClassName, template: {name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}, attr: { title: text }"> </div>
<div class="dx-treelist-text-wrapper">
<div class="dx-treelist-text" data-bind="text: text, attr: { title: data.title }"></div>
</div>
</div>
</div>
</div>
</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 }"></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-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: value"></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-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-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>
</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-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>
</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.unit, valueExpr: 'value', displayExpr: 'displayName', value: unit, 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="event: { dblclick: function() { $root.richInlineControl.show($element) } }, visible: selected() || focused(), css: {'dxrd-selected dxrd-context-menu-container': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
<!-- ko if: selected() -->
<div class="dxd-border-accented dxrd-control-border-box" data-bind="style: { 'backgroundColor': $root.richInlineControl.visible() && selected() ? '#FFF' : 'transparent' }"></div>
<!-- /ko -->
</div>
<div class="dxrd-control dxrd-context-menu-container" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? 'visible' : 'hidden'}">
<div class="dxrd-control-content-select-main" data-bind="styleunit: { 'top': contentSizes().top + (isIntersect() ? 1 : 0), 'left': contentSizes().left + (isIntersect()? 1 : 0), lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width}">
</div>
</div>
<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>