devexpress-reporting
Version:
DevExpress Reporting provides the capability to develop a reporting application to create and customize reports.
1,841 lines • 103 kB
HTML
<!--
/**
* DevExpress HTML/JS Analytics Core (dx-designer.html)
* Version: 18.1.10
* Build date: 2019-03-10
* Copyright (c) 2012 - 2019 Developer Express Inc. ALL RIGHTS RESERVED
* License: https://www.devexpress.com/Support/EULAs/NetComponents.xml
*/
-->
<script type="text/html" id="dx-editor-addons">
<!-- ko if: visible -->
<div class="dxrd-editormenu-button" data-bind="dxAction: showPopup, css: editorMenuButtonCss"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dx-boolean">
<div class="propertygrid-editor-checkbox" data-bind="dxCheckBox: getOptions({ value: value, disabled: disabled }), dxValidator: { validationRules: validationRules || [] }"></div>
</script>
<script type="text/html" id="dx-boolean-select">
<div data-bind="dxLocalizedSelectBox: { dataSource: [ { val: true, text: $root.getLocalization('Yes', 'ASPxReportsStringId.ParametersPanel_True') }, { val: false, text: $root.getLocalization('No', 'ASPxReportsStringId.ParametersPanel_False') }], valueExpr: 'val', displayExpr: 'text', value: value, disabled: disabled }, 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="dxPropertyGrid: { target: value, level: editor.level + 1, parentDisabled: editor.disabled }"></div>
</script>
<script type="text/html" id="dx-color">
<div data-bind="dxColorBox: { value: value, editAlphaChannel: true, popupPosition: { collision: 'flipfit flipfit' }, disabled: disabled }"></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 }, dxValidator: { validationRules: $data.validationRules || [] }"></div>
</script>
<script type="text/html" id="dx-combobox-editable">
<div data-bind="dxSelectBox: getOptions({ items: values, value: value, valueExpr: 'value', displayExpr: 'displayValue', editEnabled: true, disabled: disabled, placeholder: $root.dx.Analytics.Localization.selectPlaceholder() })"></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 }, dxValidator: { validationRules: $data.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 }">
<div class="dx-editor-header">
<div class="dx-field">
<div class="dx-field-label dx-accordion-header" data-bind="styleunit: padding, css: { 'dx-accordion-empty': templateName === 'dx-emptyHeader' }">
<!-- ko if: isComplexEditor -->
<div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="css: { 'dx-image-expanded': !collapsed() }"></div>
<!-- ko if: !!$data.textToSearch -->
<div class="dx-group-header-font" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName }"></div>
<!-- /ko -->
<!-- ko ifnot: !!$data.textToSearch -->
<div class="dx-group-header-font" data-bind="text: displayName, attr: { 'title': displayName }"></div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: !isComplexEditor -->
<!-- ko if: !!$data.textToSearch -->
<div class="propertygrid-editor-displayName" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName }, style: { fontWeight: isPropertyModified() ? 'Bold' : ''}"></div>
<!-- /ko -->
<!-- ko ifnot: !!$data.textToSearch -->
<div class="propertygrid-editor-displayName" data-bind="text: displayName, attr: { 'title': displayName }, style: { fontWeight: isPropertyModified() ? 'Bold' : ''}"></div>
<!-- /ko -->
<!-- /ko -->
</div>
<div class="dx-field-value">
<div data-bind="service: { name: 'createEditorAddOn' }"></div>
<!-- ko if: templateName !== 'dx-emptyHeader' -->
<!-- ko lazy: { template: templateName } -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</div>
<!-- ko if: isComplexEditor -->
<div class="dx-editor-content dx-accordion-content">
<!-- ko if: (!$data.editorCreated || 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-date">
<div data-bind="dxDateBox: getOptions({ value: value, closeOnValueChange: true, type: 'datetime', disabled: disabled }), dxValidator: { validationRules: validationRules || [] }"></div>
</script>
<script type="text/html" id="dx-file">
<div data-bind="dxFileImagePicker: { value: value, placeHolder: '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" 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 dx-image-fontstyle-bold" data-bind="css: { selected: bold(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!$parent.disabled()) { bold(!bold()); } }"></div>
<div class="dx-font-style-button dx-image-fontstyle-italic" data-bind="css: { selected: italic(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!$parent.disabled()) { italic(!italic()); } }"></div>
<div class="dx-font-style-button dx-image-fontstyle-underline" data-bind="css: { selected: underline(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!$parent.disabled()) { underline(!underline()); } }"></div>
<div class="dx-font-style-button dx-image-fontstyle-strikeout" data-bind="css: { selected: strikeout(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!$parent.disabled()) { strikeout(!strikeout()); } }"></div>
</div>
</div>
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-image">
<div data-bind="dxFileImagePicker: { value: value, placeHolder: '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 }), dxValidator: { validationRules: validationRules || [] }"></div>
</script>
<script type="text/html" id="dx-number-editor">
<div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled }), dxValidator: { validationRules: validationRules || [] }"></div>
</script>
<script type="text/html" id="dx-text">
<div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled }), dxValidator: { validationRules: validationRules || [] }"></div>
</script>
<script type="text/html" id="dx-string-array">
<div class="dx-field">
<div class="dx-string-array-container dx-texteditor 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: getEditors() -->
<!-- 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="dx-collectioneditor">
<div class="dx-collectioneditor">
<div data-bind="dxdAccordion: { collapsed: collapsed, alwaysShow: alwaysShow }">
<div class="dx-collectioneditor-header dx-accordion-header">
<div class="dx-editor-header">
<div class="dx-field">
<!-- ko if: showButtons-->
<div class="dx-collectioneditor-actions-wrapper">
<!-- ko if: isVisibleButton('delete') -->
<div class="dx-collectioneditor-action" data-bind="attr: { title: getDisplayTextButton('delete') }, dxButton: { onClick: remove, disabled: isDisabledButton('delete'), icon: 'dx-image-remove' }"></div>
<!-- /ko -->
<!-- ko if: isVisibleButton('add') -->
<div class="dx-collectioneditor-action" data-bind="attr: { title: getDisplayTextButton('add') }, dxButton: { onClick: add, disabled: isDisabledButton('add'), icon: 'dx-image-add' }"></div>
<!-- /ko -->
<div class="dx-collectioneditor-action-separator"></div>
<!-- ko if: isVisibleButton('down') -->
<div class="dx-collectioneditor-action" data-bind="attr: { title: getDisplayTextButton('down') }, dxButton: { onClick: down, disabled: isDisabledButton('down'), icon: 'dx-image-movedown' }"></div>
<!-- /ko -->
<!-- ko if: isVisibleButton('up') -->
<div class="dx-collectioneditor-action" data-bind="attr: { title: getDisplayTextButton('up') }, dxButton: { onClick: up, disabled: isDisabledButton('up'), icon: 'dx-image-moveup' }"></div>
<!-- /ko -->
</div>
<!-- /ko -->
<!-- ko if: displayName -->
<div class="dx-collectioneditor-header-text" data-bind="styleunit: { 'paddingLeft': padding }">
<div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="css: { 'dx-image-expanded': !collapsed() }"></div>
<div class="dx-group-header-font" data-bind="text: displayName, attr: { title: displayName }"></div>
</div>
<!-- /ko -->
</div>
</div>
</div>
<div class="dx-accordion-content">
<!-- ko if: values().length === 0 && showButtons -->
<div class="dx-collectioneditor-empty">
<span class="dx-collectioneditor-empty-text" data-bind="text: getDisplayTextEmptyArray()"></span>
</div>
<!-- /ko -->
<!-- ko if: values().length !== 0 -->
<div class="dx-collectioneditor-items" data-bind="foreach: values">
<div data-bind="with: $parent.createCollectionItemWrapper($parents[1], $index)">
<div class="dx-collectioneditor-item-container" data-bind="dxAction: $parents[1].select, css: { 'dx-collectioneditor-item-container-selected' : $parents[1].selectedIndex() === $index() }">
<div class="dx-collection-item"></div>
</div>
</div>
</div>
<!-- /ko -->
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-expressioneditor-main">
<div class="dx-expression-tree">
<!-- ko if: !aceAvailable -->
<div class="dx-expressioneditor-textarea" data-bind="dxTextArea: { value: textAreaValue, isValid: isValid, spellcheck: false, onKeyUp: function() { isValid(true); } }"></div>
<!-- /ko -->
<!-- ko if: aceAvailable -->
<div class="dx-expressioneditor-textarea" data-bind="dxAceEditor: { value: textAreaValue, editorContainer: editorContainer, theme: theme, options: aceOptions, additionalOptions: additionalOptions, callbacks: callbacks }"></div>
<!-- /ko -->
<div class="dx-expressioneditor-tools">
<!-- ko with: tools-->
<div class="dx-expressioneditor-tools-tabs">
<!-- ko foreach: toolBox-->
<div class="dx-expressioneditor-tools-tab" data-bind="style: { width: width }, visible: visible">
<!-- 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 }"></div>
<div class="dx-expressioneditor dx-popup-general" data-bind="dxPopup: {
showTitle: true,
title: title(),
visible: popupVisible,
toolbarItems: buttonItems,
showCloseButton: true,
fullScreen: false,
height: '600px',
width: '645px',
container: getPopupContainer($element),
position: { of: getPopupContainer($element)},
onShown: onShown
}">
<!-- ko if: popupVisible -->
<!-- ko template: "dx-expressioneditor-main" -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-expressioneditor-categories">
<div class="dx-expressioneditor-tools-tab-content-wrapper" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<!-- ko foreach: content -->
<!-- ko if: $data.templateName -->
<!-- ko template: $data.templateName-->
<!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $data.templateName -->
<div class="dx-expressioneditor-tools-tab-category" data-bind="css: {'dx-expressioneditor-state-selected': content.isSelected }, text: displayName, dxAction: function() { $parent.click($data.content) }">
</div>
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-expressioneditor-category-accordion">
<div class="dx-fieldset" style="margin: 0;">
<div data-bind="dxdAccordion: { collapsed: collapsed }">
<div class="dx-accordion-header dx-expressioneditor-tools-tab-accordion-header" data-bind="css: {'dx-expressioneditor-state-selected': $data.isSelected }, dxAction: function() { $data.updateContent($data.allItems(), $data.isSelected); $parent.click($data.content) }">
<div class=" dx-collapsing-image" data-bind="css: { 'dx-image-expanded': !collapsed() }" style="display:inline-block;"></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" data-bind="css: {'dx-expressioneditor-state-selected': isSelected }, text: $data.display, dxAction: 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" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<div class="dx-expressioneditor-description" data-bind="text: content"></div>
</div>
</script>
<script type="text/html" id="dx-expressioneditor-fields">
<div class="dx-expressioneditor-tools-tab-content-wrapper" 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>
</script>
<script type="text/html" id="dx-ee-treelist-item">
<div class="dx-treelist-item" data-bind="visible: visible, event: { dblclick: function() { actions[0].clickAction($element); }}, styleunit: padding, css: { 'dx-treelist-item-selected': isSelected }">
<div class="dx-treelist-item-images">
<div class="dx-treelist-collapsedbutton" data-bind="css: nodeImageClass, click: toggleCollapsed"></div>
<div class="dx-treelist-image" data-bind="css: imageClassName, attr: { title: text }"></div>
</div>
<div class="dx-treelist-caption">
<div class="dx-treelist-selectedcontent" data-bind="click: toggleSelected">
<div class="dx-treelist-text-wrapper">
<div class="dx-treelist-text" data-bind="text: text, attr: { title: text }"></div>
</div>
</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" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<!-- ko foreach: $data -->
<div class="dx-expressioneditor-tools-tab-item" data-bind="text: $data.displayName || $data.text, dxAction: function() { $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" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<!-- ko foreach: availableItems -->
<div class="dx-expressioneditor-tools-tab-item" data-bind="dxAction: function() { $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-content-plain">
<div class="dx-filtereditor-plain-advanced" data-bind="dxCheckBox: { value: advancedMode, text: advancedModeText }"></div>
<div class="dx-filtereditor-plain-content" data-bind="style: { height: plainContentHeightPerc }">
<div class="dx-filtereditor-text-container" data-bind="css: { 'advanced': advancedMode }, style: { height: textContentHeightPerc }">
<!-- ko template: 'dx-filtereditor-content-text'-->
<!-- /ko -->
</div>
<div class="dx-filtereditor-tree-container" data-bind="css: { 'advanced': advancedMode }, style: { height: treeContentHeightPerc }">
<!-- ko template: 'dx-filtereditor-content-tree' -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-filtereditor-content-text">
<!-- ko if: !aceAvailable -->
<div class="dx-filtereditor-text" 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-texteditor dx-textarea" data-bind="css: {'dx-invalid': !$data.isValid(), 'dx-state-focused': textFocused }">
<div class="dx-texteditor-container">
<div class="dx-filtereditor-ace" 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" data-bind="dxScrollView: { showScrollbar: 'onHover', direction: 'both' }">
<!-- ko with: operandSurface -->
<!-- ko template: { name: $data.templateName, data: $data}-->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- ko ifnot: isSurfaceValid -->
<div class="dx-filtereditor-tree-lockscreen" data-bind="dxAction: 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: options().disabled, buttonAction: function() { popupVisible(true); } }"></div>
<!-- ko template: 'dx-filtereditor-popup' -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-filtereditor-advanced">
<div class="dx-filtereditor" style="width: 100%; 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" style="width: 100%; height: 100%;" data-bind="style: { pointerEvents: $data.options().disabled() ? 'none' : '' }">
<!-- 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">(</div>
<!-- ko with: aggregatedExpression-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
<div class="criteria-operator-text">)</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="dxAction: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"></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="dxAction: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"></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">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="dxAction: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"></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" data-bind="css: css">
<div class="criteria-operator-text" 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="dxAction: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"></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="dxAction: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"></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="dxAction: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"></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">(</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">,</div>
<!-- /ko -->
</div>
<div class="criteria-operator-item criteria-operator-text">)</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="dxAction: addValue">
<div class="criteria-operator-action-image dx-image-filtereditor-add"></div>
</div>
</div>
</div>
</script>
<script id="dx-filtereditor-parameter" type="text/html">
<div class="criteria-operator-text" 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" 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="dxAction: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"></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: { value: _value, onFocusOut: function() { isEditable(false); } }, focus: { on: isEditable }"></div> <!-- /ko -->
<!-- ko if: $data.specifics() === "bool" -->
<div class="criteria-operator-item-editor" data-bind="focus: isEditable, dxLocalizedSelectBox: { dataSource: [ { val: 'True', text: 'Yes', localizationId: 'ASPxReportsStringId.ParametersPanel_True' }, { val: 'False', text: 'No', localizationId: 'ASPxReportsStringId.ParametersPanel_False' }], valueExpr: 'val', displayExpr: 'text', value: _value, onFocusOut: function() { isEditable(false); } }"></div>
<!-- /ko -->
<!-- ko if: $data.specifics() === "date" -->
<div class="criteria-operator-item-editor" data-bind="focus: isEditable, dxDateBox: { value: _value, closeOnValueChange: true, type: 'date', onFocusOut: function() { isEditable(false); } }"></div>
<!-- /ko -->
<!-- ko if: $data.specifics() !== "string" && $data.specifics() !== "bool" && $data.specifics() !== "date" && $data.specifics() !== "guid" -->
<div class="criteria-operator-item-editor" data-bind="dxTextBox: getNumberEditorOptions(), focus: { on: isEditable }"></div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: $data.items.length > 0 && typeof $data.items[0] === "object" -->
<div class="criteria-operator-item-editor" data-bind="focus: isEditable, dxSelectBox: { value: _value, dataSource: items, valueExpr: 'value', displayExpr: 'display', searchEnabled: true, onFocusOut: function() { isEditable(false); }}"></div>
<!-- /ko -->
<!-- ko if: $data.items.length > 0 && typeof $data.items[0] !== "object" -->
<div class="criteria-operator-item-editor" data-bind="focus: isEditable, dxSelectBox: { value: _value, dataSource: items, acceptCustomValue: true, searchEnabled: true, onFocusOut: function() { isEditable(false); }}"></div>
<!-- /ko -->
</div>
<div class="criteria-operator-text criteria-operator-item-value" data-bind="visible: !isEditable()">
<div class="criteria-operator-text 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 class="dx-filtereditor dx-popup-general" data-bind="dxPopup: {
showTitle: true,
width: '95%',
height: '95%',
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="dxAction: showPopup">
<div class="criteria-operator-action-image dx-image-filtereditor-add"></div>
</div>
</script>
<script type="text/html" id="dx-filtereditor-change">
<div class="criteria-operator-text clickable" data-bind="text: target.displayType, dxAction: showPopup, css: target.css"></div>
</script>
<script type="text/html" id="dx-filtereditor-changeParameter">
<div class="criteria-operator-text clickable " data-bind="text: target.parameterName(), dxAction: showPopup, css: { 'selected': target.isSelected }"></div>
</script>
<script type="text/html" id="dx-filtereditor-changeProperty">
<div class="criteria-operator-text clickable" data-bind="text: target.displayName, dxAction: showPopup, css: { 'selected': target.isSelected }"></div>
</script>
<script id="dx-filtereditor-changeValueType" type="text/html">
<div class="criteria-operator-action" data-bind="dxAction: showPopup">
<div class="criteria-operator-action-image-edit dx-image-filtereditor-edit"></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: { width: '170px', height: '300px', focusStateEnabled: false,
position: $data.rtl ? { my: 'right top', at: 'right bottom', of: popupService.target} : { my: 'left top', at: 'left bottom', of: popupService.target },
container: options().popupContainer,
target: popupService.target,
showTitle: false,
showCloseButton: false,
animation: {},
closeOnOutsideClick: 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-popup-common">
<div class="dx-widget" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<!-- ko foreach: data -->
<!-- ko if: !$data.hidden -->
<div class="dx-filtereditor-popup-item dx-item dx-list-item">
<span class="dx-item-content dx-list-item-content" data-bind="text: $data.displayText || $data.name, click: function() { $parent.click($data); } "></span>
</div>
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-filtereditor-popup-treelist">
<div class="dx-widget" 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">
<div data-bind="dxList: { items: $data.items, selectedItems: $data.selectedItems, onItemClick: $data.action, selectionMode: 'single', activeStateEnabled: false }">
<div data-options="dxTemplate: { name: 'item' }">
<div class="dx-image-filtereditor-remove" data-bind="click: $parent.removeItem, visible: $data.canRemove"></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" 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" 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" 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" 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 class="dx-format-string dx-popup-general" data-bind="dxPopup: {
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" 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" data-bind="text: getDisplayText('preview')"></div>
<div class="dx-format-string-preview-value">
<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 template: templateName -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: !$data.templateName -->
<div class="dx-treelist-action" data-bind="dxButton: { onClick: function() { clickAction($parent); }, icon: 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="dxButton: { icon: 'dx-image-edit', onClick: function() { $parent.collapsed(!$parent.collapsed()); } }, visible: $parent.hasContent, attr: { title: $data.displayText() }"></div>
</script>
<script type="text/html" id="dx-treelist-item-actions-with-edit">
<!-- ko template: 'dx-treelist-item-actions' -->
<!-- /ko -->
<!-- ko template: { name: 'dx-treelist-edit-action', data: treeListEditAction() } -->
<!-- /ko -->
</script>
<script type="text/html" id="dx-treelist-item">
<div data-bind="visible: visible">
<!-- ko if: hasContent -->
<!-- ko template: "dx-treelist-accordion-item" -->
<!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: hasContent -->
<!-- ko template: "dx-treelist-header-item" -->
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-treelist-accordion-item">
<div data-bind="dxdAccordionExt: { collapsed: collapsed, lazyContentRendering: true }">
<!-- ko template: "dx-treelist-header-item" -->
<!-- /ko -->
<div class="dx-fieldset dx-accordion-content">
<!-- ko with: data -->
<!-- ko template: { name: contenttemplate } -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-treelist-header-item">
<div class="dx-treelist-item" data-bind="event: { dblclick: function() { $data.dblClickHandler ? $data.dblClickHandler($data) : $data.toggleCollapsed() } }, styleunit: padding, css: { 'dx-treelist-item-selected': isSelected() || isMultiSelected() }">
<!--<div class="dx-treelist-item-images">-->
<div class="dx-treelist-collapsedbutton" data-bind="css: nodeImageClass, click: toggleCollapsed"></div>
<!--</div>-->
<div class="dx-treelist-caption">
<!-- ko if: actions && actions.length > 0 -->
<div class="dx-treelist-action-container" data-bind="visible: isSelected">
<!-- 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, 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>
</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 }">
<!-- ko template: "dx-treelist-header-item-with-hover" -->
<!-- /ko -->
<div class="dx-fieldset dx-accordion-content">
<!-- 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-treelist-item" data-bind="event: {
dblclick: function() { $data.dblClickHandler ? $data.dblClickHandler($data) : $data.toggleCollapsed() },
mouseenter: mouseenter,
mouseleave: mouseleave
}, styleunit: padding, css: { 'dx-treelist-item-selected': isSelected() || isMultiSelected() }">
<!--<div class="dx-treelist-item-images">-->
<div class="dx-treelist-collapsedbutton" data-bind="css: nodeImageClass, click: toggleCollapsed"></div>
<!--</div>-->
<div class="dx-treelist-caption">
<!-- ko if: actions && actions.length > 0 -->
<div class="dx-treelist-action-container" data-bind="visible: $data.isSelected() || $data.isHovered()">
<!-- ko template: actionsTemplate() -->
<!-- /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, 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>
</script>
<script type="text/html" id="dx-treelist">
<div class="dx-treelist">
<!-- ko foreach: items -->
<!-- ko lazy: { resolver: resolver, innerBindings: { template: templateName } } -->
<!-- /ko -->
<div data-bind="visible: !collapsed()">
<!-- ko template: { name: 'dx-treelist', data: $data } -->
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-borders">
<div class="dxrd-bordereditor" data-bind="dxBorderEditor: { value: value }"></div>
</script>
<script type="text/html" id="dxrd-colorpicker">
<div data-bind="dxColorBox: { value: displayValue, editAlphaChannel: true, popupPosition: { collision: 'flipfit flipfit' }, disabled: disabled }"></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 } -->
<div data-bind="dxFieldListPicker: { path: path, value: value, displayValue: $displayName, itemsProvider: $root.dataBindingsProvider, treeListController: treeListController, disabled: disabled }"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-filterstring">
<div data-bind="dxFilterEditor: { options: value, fieldListProvider: $root.dataBindingsProvider, getDisplayNameByPath: $root.getDisplayNameByPath, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() }"></div>
</script>
<script type="text/html" id="dxrd-filterstringgroup">
<div data-bind="dxFilterEditor: { options: value, fieldListProvider: $root.dataBindingsGroupProvider, getDisplayNameByPath: $root.getDisplayNameByPath, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() }"></div>
</script>
<script type="text/html" id="dxrd-formatstring">
<div data-bind="dxFormatEditor: { value: value, disabled: disabled }"></div>
</script>
<script type="text/html" id="dxrd-guid">
<div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled }), dxValidator: { validationRules: (validationRules || []) }"></div>
</script>
<script type="text/html" id="dxrd-emptyHeader">
</script>
<script type="text/html" id="dxrd-objectEditorContent">
<!-- ko if: $data.visible() && $data.editorCreated() -->
<div data-bind="template: { name: 'dx-propertieseditor', data: viewmodel }"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-objectEditor">
<div data-bind="dxPropertyGrid: { target: ko.observable($data), level: $parent.level, textToSearch: $parent.textToSearch }"></div>
</script>
<script type="text/html" id="dxrd-commonCollectionItem">
<div data-bind="dxPropertyGrid: { target: value, level: editor.level + 1, parentDisabled: editor.disabled }"></div>
</script>
<script type="text/html" id="dxrd-controls">
<div data-bind="dxLocalizedSelectBox: { items: $root.controls, value: value, displayExpr: 'displayName', valueExpr: 'value', disabled: disabled }"></div>
</script>
<script type="text/html" id="dxrd-treelistContent">
<!-- ko if: visible -->
<!-- ko if: value -->
<!-- ko with: value -->
<div data-bind="treelist: { itemsProvider: itemsProvider, selectedPath: selectedPath, treeListController: treeListController }"></div>
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-objectVisitor">
<!-- ko if: options -->
<div data-bind="treelist: options"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-shadow">
<div class="dxrd-group-shadow-top dxrd-group-shadow-lighter">
<div class="dxrd-group-shadow-top dxrd-group-shadow-darker"></div>
</div>
<div class="dxrd-group-shadow-bottom dxrd-group-shadow-lighter">
<div class="dxrd-group-shadow-bottom dxrd-group-shadow-darker"></div>
</div>
</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="template: templateName, click: function(_, e) { $root.selection.clickHandler($data, e); e.stopPropagation(); }">
</div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: isLoading -->
<div class="dxrd-surface-wrapper">
<div style="text-align: center; padding-top: 25%;">
<div data-bind="dxLoadIndicator: { visible: isLoading() }"></div>
</div>
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-designer">
<div class="dx-viewport dx-theme-desktop dx-theme-desktop-typography">
<div class="dxrd-designer-wrapper dx-editors" data-bind="visible: (!$data.designMode || designMode()), cssArray: [ $data.rootStyle , { 'dx-rtl' : $data.rtl, 'dx-ltr': !$data.rtl } ]">
<!-- ko foreach: parts -->
<!-- ko template: { name: templateName, data: model }-->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- ko if: ($data.addOns) -->
<!-- ko foreach: addOns -->
<!-- ko template: { name: templateName, data: model } -->
<!-- /ko -->
<!-- /ko -->
<!-- /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="dxButton: { onClick: togglePopoverVisible, disabled: disabled, icon: ko.unwrap(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: {},
closeOnOutsideClick: true,
container: '.dxrd-action-items-container',
shading: false,
visible: popoverVisible }">
<!-- ko foreach: actions -->
<div class="dxrd-action-item" data-bind="dxAction: clickAction, css: { 'dxrd-disabled-button': disabled }">
<div class="dxrd-action-item-image" data-bind="css: ko.unwrap(imageClassName), attr: { title: $data.displayText && $data.displayText() || text }"></div>
</div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-menubutton-template-base">
<div class="dxrd-menu-container" style="position:relative; width:0; height:100%"></div>
<div class="dxrd-menu-button">
<div class="dxrd-menu-place" style="width:54px;"></div>
<div class="dxrd-menu-button-image" data-bind="dxAction: toggleAppMenu"></div>
<div data-bind="dxPopup: {
width: 250,
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: {},
closeOnOutsideClick: true,
shading: false,
focusStateEnabled: false,
visible: appMenuVisible }">
<div class="dxrd-menu-break"></div>
<!-- ko foreach: actionLists.menuItems -->
<div class="dxrd-menu-item" data-bind="dxAction: 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(imageClassName), attr: { title: $data.displayText && $data.displayText() || text }"></div>
<div class="dxrd-menu-item-text" data-bind="text: $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 data-bind="dxdAccordion: { collapsed: collapsed }">
<div class="dxrd-group-header dx-accordion-header" data-bind="css: { 'dxrd-group-header-collapsed': collapsed() }">
<div class="dx-collapsing-image" data-bind="css: { 'dx-image-expanded': !collapsed() }" style="display:inline-block;"></div>
<span class="dxrd-group-header-text" data-bind="text: $root.actionsGroupTitle()"></span>
</div>
<div class="dx-accordion-content">
<!-- ko template: 'dxrd-shadow' -->
<!-- /ko -->
<!-- ko foreach: (contextActions || []) -->
<!-- ko if: $data.templateName -->
<!-- ko template: templateName -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: !$data.templateName -->
<div class="dxrd-properties-grid-action" data-bind="dxAction: 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" data-bind="css: imageClassName, attr: { title: $data.displayText && $data.displayText() || text }"></div>
</div>
<!-- /ko -->
<!-- /ko -->
<!-- ko with: popularProperties -->
<div style="position: relative" data-bind="template: { name: 'dx-propertieseditor', data: $data }"></div>
<!-- /ko -->
</div>
</div>
</div>
<!-- /ko -->
</script>
<script type='text/html' id='dxrd-propertiestab'>
<div class="dxrd-properties-wrapper" data-bind="visible: active() && visible()">
<div style="height:100%">
<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-gread-search-collapsed': isSearching }">
<div class="dxrd-properties-focused-item" data-bind="dxSelectBox: { dataSource: $root.controlsStore.dataSource, value: focusedItem, displayExpr: displayExpr }"></div>
<div class="dx-property-grid-sorting-actions-container">
<div class="dx-property-grid-sorting-action" data-bind="css: { selected: !isSortingByGroups() }, dxButton: { onClick: function() { $data.isSortingByGroups(false); }, icon: 'image-sortingbyalphabet' }"></div>
<div class="dx-property-grid-sorting-action" data-bind="css: { selected: isSortingByGroups }, dxButton: { onClick: function() { $data.isSortingByGroups(true); }, icon: 'image-sortingbygroups' }"></div>
</div>
</div>
<div class="dx-property-grid-search-group dx-property-gread-search-collapsed" data-bind="css: { 'dx-property-gread-search-collapsed': !isSearching() }">
<div class="dx-property-grid-sorting-action" data-bind="css: { selected: isSearching }, dxButton: { onClick: switchSearchBox, icon: 'image-search' }"></div>
<div class="dx-property-grid-search-box" data-bind="dxTextBox: { value: textToSearch, valueChangeEvent: 'keyup', placeholder: searchPlaceholder(), showClearButton: true }, cacheElement: { action: function(element) { searchBox(element); } }"></div>
</div>
</div>
</div>
<!-- /ko -->
<div class="dxrd-properties-grid" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true }, styleunit: { top: $root.controlsStore.visible() ? 80 : 40 }">
<!-- 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 data-bind="dxdAccordion: { collapsed: collapsed }">
<div class="dxrd-group-header dx-accordion-header" data-bind="css: { 'dxrd-group-header-collapsed': collapsed() }">
<div class="dx-collapsing-image" data-bind="css: { 'dx-image-expanded': !collapsed() }" style="display:inline-block;"></div>
<span class="dxrd-group-header-text" data-bind="text: displayName()"></span>
</div>
<div class="dx-accordion-content">
<!-- ko template: 'dxrd-shadow' -->
<!-- /ko -->
<!-- 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" 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>
<div data-bind="dxPopup: { width: 148, height: 'auto',
position: $data.rtl ? { my: 'left top', at: 'right top', of: popupService.target } : { my: 'right top', at: 'left top', of: popupService.target },
container: '.dx-viewport',
target: popupService.target,
showTitle: false,
showCloseButton: false,
animation: {},
closeOnOutsideClick: true,
shading: false,
visible: popupService.visible }">
<div data-options="dxTemplate: { name: 'content' }">
<!-- ko if: popupService.title -->
<div class="dxrd-editor-menu-caption" data-bind="text: popupService.title"></div>
<!-- /ko -->
<!-- ko foreach: popupService.actions -->
<!-- ko if: (!visible || visible && visible()) -->
<div class="dxrd-editor-menu-item" data-bind="dxAction: action">
<div class="dxrd-menuitem-box"></div>
<span class="dxrd-editor-menu-title" data-bind="text: title"></span>
</div>
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</div>
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-right-panel-lightweight">
<div class="dxrd-right-panel" data-bind="styleunit: { width: tabPanel.width }, resizable: tabPanel.getResizableOptions($element, '1px', 325)">
<!-- ko foreach: tabPanel.tabs -->
<!-- ko lazy: { template: $data.template } -->
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-right-panel-template-base">
<div class="dxrd-right-panel-collapse" data-bind="styleunit: { width: tabPanel.headerWidth }, dxAction: function() { tabPanel.collapsed(!tabPanel.collapsed()); }, attr: { title: tabPanel.toggleCollapsedText }">
<div class="dxrd-right-panel-collapse-image" data-bind="css: tabPanel.toggleCollapsedImageClassName"></div>
</div>
<div class="dxrd-right-panel" data-bind="styleunit: { width: tabPanel.width }, resizable: tabPanel.getResizableOptions($element, '50px', 340)">
<!-- ko foreach: tabPanel.tabs -->
<!-- ko lazy: { template: $data.template } -->
<!-- /ko -->
<!-- /ko -->
</div>
<div class="dxrd-right-tabs">
<!-- ko foreach: tabPanel.tabs -->
<div class="dxrd-tab-item" data-bind="dxAction: $parent.tabPanel.selectTab, css: { 'dxrd-tab-item-active': active, 'dxrd-tab-item-disabled': disabled }, attr: { title: text }, visible: visible">
<div class="dxrd-image-padding" data-bind="css: imageClassName"></div>
</div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-toolbar-template-base">
<div class="dxrd-toolbar-wrapper">
<div class="dxrd-toolbar" data-bind="template: {name: 'dxrd-toolbar-tmplt', data: actionLists.toolbarItems }"></div>
</div>
</script>
<script type="text/html" id="dxrd-toolbar-tmplt">
<!-- ko foreach: $data -->
<!-- ko if: $data.templateName -->
<!-- ko template: templateName -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: !$data.templateName -->
<div class="dxrd-toolbar-item" data-bind="visible: visible">
<div data-bind="attr: { class: 'dxrd-toolbar-item-image ' + ko.unwrap(imageClassName), title: $data.displayText && $data.displayText() || text }, dxAction: function() { if((typeof $data.disabled === 'function') && !disabled() || !disabled) { clickAction($root.model && $root.model()); } }, css: {'dxrd-disabled-button': disabled, 'dxrd-toolbar-item-image-selected': $data.selected }"></div>
<div class="dxrd-toolbar-item-separator" data-bind="visible: $data.hasSeparator"></div>
</div>
<!-- /ko -->
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-toolbox-template-base">
<div class="dxrd-toolbox-wrapper" data-bind="dxScrollView: { showScrollbar: 'onHover', scrollByContent: false, bounceEnabled: false, useNative: false, scrollByThumb: true }">
<!-- ko foreach: toolboxItems -->
<div class="dxrd-toolbox-item" data-bind="attr: { title: type }">
<div class="dxrd-image-padding" data-bind="css: imageClassName, draggable: $root.toolboxDragHandler"></div>
</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: zoomLevels, value: $data.zoom, displayExpr: function(val) { return Math.round((val || this.option('value')) * 100) + '%'; }, displayCustomValue: true, disabled: disabled }"></div>
</div>
</script>
<script type='text/html' id='dxrd-bordereditor'>
<div class="bordereditor-content">
<!-- ko with: value-->
<div class="bordereditor-button dxrd-image-borders-none" data-bind="css: { selected: (!bottom() && !left() && !top() && !right()), 'dxrd-disabled-button': disabled }, click: function() { setNone() }"></div>
<div class="bordereditor-button dxrd-image-borders-all right-margin" data-bind="css: { selected: (bottom() && left() && top() && right()), 'dxrd-disabled-button': disabled }, click: function() { setAll() }"></div>
<div class="bordereditor-button dxrd-image-borders-left" data-bind="css: { selected: left(), 'dxrd-disabled-button': disabled }, click: function() { setValue('left') }"></div>
<div class="bordereditor-button dxrd-image-borders-top" data-bind="css: { selected: top(), 'dxrd-disabled-button': disabled }, click: function() { setValue('top') }"></div>
<div class="bordereditor-button dxrd-image-borders-right" data-bind="css: { selected: right(), 'dxrd-disabled-button': disabled }, click: function() { setValue('right') }"></div>
<div class="bordereditor-button dxrd-image-borders-bottom" data-bind="css: { selected: bottom(), 'dxrd-disabled-button': disabled }, click: function() { setValue('bottom') }"></div>
<!-- /ko -->
</div></script>
<!--
/**
* DevExpress HTML/JS Reporting (web-document-viewer.html)
* Version: 18.1.10
* Build date: 2019-03-13
* Copyright (c) 2012 - 2019 Developer Express Inc. ALL RIGHTS RESERVED
* License: https://www.devexpress.com/Support/EULAs/NetComponents.xml
*/
-->
<script type="text/html" id="dxrp-editing-field-container">
<div class="dxrp-editing-field-container" data-bind="style: containerStyle(), zoom: zoom, css: { active: active(), readonly: field.readOnly() }">
<div class="dxrp-editing-field-borders" data-bind="style: borderStyle()"></div>
<div class="dxrp-editing-field-content" data-bind="dxclick: activateEditor">
<!-- ko if: !active() || field.readOnly() -->
<div class="dxrp-editing-field-readonly-text" data-bind="style: textStyle(), css: {'dxrp-editing-field-text-wordwrap': !wordWrap}">
<!-- ko if: htmlValue() -->
<div class="dxrp-editing-field-text-html" data-bind="style: breakOffsetStyle(), html: htmlValue()"></div>
<!--/ko-->
<!-- ko ifnot: htmlValue() -->
<div class="dxrp-editing-field-text-html" data-bind="style: breakOffsetStyle(), text: field.editValue()"></div>
<!--/ko-->
</div>
<!--/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 style="width: 100%" class="dxrp-editing-field-datetime" data-bind="dxDateBox: options, childStyle: { style: textStyle(), selector: '.dx-texteditor-input'}"></div>
</script>
<script type="text/html" id="dxrp-editing-field-checkbox">
<div class="dxrp-editing-field-check-container" 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 650 650" preserveAspectRatio="xMidYMid meet">
<path d="M0 25 H625 V625 H25 V50" class="highlight" style="stroke: #808080; stroke-width: 50;"></path>
<path d="M222 437 l-72 -72 0 -70 0 -69 70 69 70 70 110 -110 110 -110 0 75 0 75 -108 108 -107 107 -73 -73z" data-bind="style: { fill: checked() ? 'black' : 'transparent' }" />
</svg>
</div>
</div>
</script>
<script type="text/html" id="dxrp-editing-field-radio">
<div class="dxrp-editing-field-check-container" 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" style="stroke-width: 50;stroke: rgb(0, 0, 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" 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 style="background:white" class="dxrp-editing-field-text" data-bind="value: field._editorValue, valueUpdate: 'keypress', style: textStyle(), event: { blur: hideEditor, keyup: keypressAction }"></textarea>
<!--/ko-->
</div>
</script>
<script type="text/html" id="dxrdp-search-mobile">
<!-- ko if: $data.enabled -->
<div class="dxrdp-search-wrapper" data-bind="styleunit:{ height: height }, dxrdSearchBar: $data">
<div class="dxrd-mobile-search">
<div class="dxrdp-taptosearch" data-bind="visible: !$data.editorVisible(), dxAction: function(s) { $data.focusEditor(s); }">
<div class="dxrdp-taptosearch-text" data-bind="text: $root.getLocalization('Tap here to Search', 'ASPxReportsStringId.WebDocumentViewer_Mobile_TapHereToSearch')"></div>
</div>
<div class="dxrdp-search-panel" data-bind="visible: $data.editorVisible()">
<div class="dxrdp-search-editor" data-bind="dxTextBox: { value: searchText, onEnterKey: function() { $data.startSearch(); } }"></div>
</div>
</div>
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrdp-surface-mobile">
<div class="dxrd-preview-wrapper dxrdp-fullscreen" data-bind="style: { pointerEvents: $data.documentId === null ? 'none' : '', touchEvents: $data.documentId === null ? 'none' : '' }, styleunit: { top: topOffset, height: previewWrapperSize().height, width: previewWrapperSize().width }, slide: $root.slideOptions, mobileZoom: { zoom: mobileZoom, zoomUpdating: zoomUpdating }, dxclick: function(s,e) { if(!$root.brickEventsDisabled()) { $data.showActions(s,e); } }">
<!-- ko template: {name: 'dxrd-preview-progress-bar', data: progressBar }-->
<!-- /ko -->
<div class="dxrd-mobile-content">
<div class="dxrd-mobile-gallery" data-bind="style: { pointerEvents: $data.zoomUpdating() ? 'none' : '', touchEvents: $data.zoomUpdating() ? 'none' : '' }, dxGalleryReportPreview: { dataSource: $root.gallery.items, gallery: $root.gallery, animationEnabled: $root.gallery.animationEnabled, selectedIndex: $root.gallery.selectedIndex, width:'100%', height: '100%', showIndicator: false, loop: true, onSelectionChanged: onSlide, swipeEnabled: $root.slideOptions.swipeEnabled }">
<div data-options="dxTemplate: { name: 'item' }">
<div class="dxrd-scrollView-mobile" data-bind="dxScrollView: $root.reportPreview.getScrollViewOptions()">
<div class="dxrd-gallery-blocks" data-bind="style: $root.gallery.contentSize()">
<!-- ko foreach: $data.blocks() -->
<!-- ko if: $data.page -->
<div class="dxrd-gallery-block" data-bind="styleunit: position, css: $data.classSet">
<div class="dxrd-gallery-block-content" data-bind="styleunit: { width: Math.max(page.width(), position().width), height: Math.max(page.height(), position().height) }, style: { 'background-color': page.color }">
<div class="dxrdp-active-border" data-bind="css: { 'dxrdp-active': page.active() && $parents[0].blocks().length > 1, 'dxrdp-page-padding': $parents[0].blocks().length > 1 }, visible: $root.slideOptions.readerMode"></div>
<div class="dxrd-mobile-page" data-bind="styleunit: { width: page.width, height: page.height }, style: { pointerEvents: $root.brickEventsDisabled() ? 'none' : '', touchEvents: $root.brickEventsDisabled() ? 'none' : '' }">
<!-- ko template: { name :'dxrd-preview-page-mobile', data: page } -->
<!-- /ko -->
</div>
</div>
</div>
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</div>
</div>
</div>
</div>
<input type="text" style="display:none" />
</script>
<script type="text/html" id="dxrd-preview-page-mobile">
<div class="dxrdp-content" data-bind="dxclick: clickToBrick, styleunit: { width: width, height: height }, autoFit: { autoFitBy: $root.reportPreview.autoFitBy, zoom: zoom, width: originalWidth, height: originalHeight, alwaysRecalculate: true, previewSize: $root.reportPreview.previewSize, brickLoading: brickLoading, skipIfInvisible: true }">
<div class="dxrdp-loading-wrapper" data-bind="styleunit: { width: width, height: height, lineHeight: height }, style: { 'background-color': color }, visible: pageLoading, text: loadingText">
</div>
<img style="width:100%; height:100%;" data-bind="attr: { src: displayImageSrc }, style:{ 'background-color': color }" />
<div class="dxrdp-active-border" data-bind="css: { 'dxrdp-active': active() && $parents[1].blocks().length > 1 }, visible: !$root.slideOptions.readerMode"></div>
<!-- ko foreach: activeBricks -->
<!-- ko template: { name: "dxrd-page-brick-mobile", data: $data } -->
<!--/ko-->
<!--/ko-->
<!-- ko if: !brickLoading() && $data.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: $data.leftP, right: $data.rightP, height: heightP, width: widthP }, css: { 'dxrd-report-preview-brick-selected': $data.active }">
</div>
</script>
<script type="text/html" id="dxrd-preview-export-to-mobile">
<div class="dxrd-preview-export-to" data-bind="dxMenu: { items: items, onItemClick: clickAction }, attr: { title: $root.getLocalization(text, $data.textId) }">
<div class="dxrd-preview-export-menu-item" 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)"></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-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="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: imageClassName, dxAction: clickAction">
</div>
<!-- ko if: $data.content -->
<!-- ko template: $data.content -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dxrd-menu-export-content">
<div class="dxrd-menu-export-popover" data-bind="dxPopover: { width: '266px', height: '266px', visible: visible, target: '.dxrdp-mobile-action.dxrd-image-export-to' }">
<!-- ko foreach: items -->
<div class="dxrd-menu-export-item" data-bind="dxAction: action, text: text">
</div>
<!-- /ko-->
</div>
</script>
<script type="text/html" id="dxrd-menu-parameters-content">
<div class="dxrd-menu-parameters-popup" data-bind="dxPopup: { showTitle: false, width: '100%', height: '100%', visible: visible }">
<!--TODO: use container: '.dxrd-preview-wrapper' and fix styles-->
<!-- ko template: { name: 'dxrd-preview-parameters-mobile', data: $data }-->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-preview-parameters-mobile">
<div class="dxrdp-parameters-mobile" data-bind="dxValidationGroup: {}">
<div class="dxrdp-parameters-title" data-bind="text: $root.getLocalization('Parameters', 'DevExpress.XtraReports.UI.XtraReport.Parameters')"> </div>
<div class="dxrdp-parameters-scroll" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true, bounceEnabled: false }">
<div class="dx-fieldset">
<div data-bind="dxPropertyGrid: { target: ko.observable(model) }"></div>
</div>
</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($parent.parametersModel, params) }, disabled: disabled }, 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($parent.parametersModel, params)}, disabled: disabled }, css: className"></div>
</div>
</div>
</script>
<script type="text/html" id="dx-circle-menu">
<div class="dx-circle-menu">
<div class="dx-circle-menu-container" data-bind="visible: collectionVisible">
<!-- ko foreach: items-->
<div class="dx-circle-menu-item" data-bind="visible: visible">
<div class="dx-circle-menu-item-content">
<div class="dx-circle-menu-item-image" data-bind="css: image, dxAction: action"></div>
<div class="dx-circle-menu-item-text" data-bind="text: text"></div>
</div>
</div>
<!-- /ko -->
</div>
<div class="dx-circle-menu-mainbutton" data-bind="dxAction: function() { $data.changeMenuItemVisible() }, css: { expanded: collectionVisible() }"></div>
</div>
</script>
<script type='text/html' id='dxrd-preview-document-map'>
<div class="dxrd-preview-document-map" data-bind="visible: active() && visible()" style="height: 100%; overflow:hidden">
<div class="dxrd-right-panel-header">
<div style="display: inline-block;" data-bind="text: $root.getLocalization('Document Map', 'ASPxReportsStringId.DocumentViewer_RibbonCommandText_DocumentMap')"></div>
</div>
<!-- ko if: model -->
<!-- ko with: model -->
<div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true }">
<div id="documentMapTree" data-bind="treelist: documentMapOptions" style="width:100%; height: 100%;"></div>
</div>
<!-- /ko -->
<!-- /ko -->
</div></script>
<script type='text/html' id='dxrd-preview-export-options'>
<div class="dxrd-preview-export-options-wrapper" data-bind="visible: active() && visible()">
<div class="dxrd-right-panel-header">
<span data-bind="text: $root.getLocalization('Export Options', 'DevExpress.XtraReports.UI.XtraReport.ExportOptions')"></span>
</div>
<!-- ko if: model-->
<div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true }">
<div class="dx-fieldset">
<div data-bind="dxPropertyGrid: { target: model }"></div>
</div>
</div>
<!-- /ko -->
</div></script>
<script type="text/html" id="dxrd-page-brick-clickable">
<div class="dxrd-report-preview-brick" data-bind="dxAction: function(a){ onClick(a && a.event); }, 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 }"></div>
<!--/ko-->
</div>
</script>
<script type="text/html" id="dxrd-preview-page">
<div class="dxrd-report-preview-content" style="position: relative; width: 100%; height: 100%" data-bind="dxclick: clickToBrick, 'brick-selection-prog': { page: $data, preview: $parent, click: function(pageIndex) { $parent.goToPage(pageIndex) } }">
<div class="dxrd-report-preview-content-loading-wrapper" style="background: white;" data-bind="styleunit: { 'width': width() + 2, 'height': height() + 2 }, visible: pageLoading">
<div class="dxrd-report-preview-content-loading-panel" style="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>
<img style="pointer-events: none; width: 100%; height: 100%;" data-bind="attr: { src: displayImageSrc }" />
<!-- 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-->
<!-- ko foreach: editingFields -->
<!-- ko template: template -->
<!--/ko-->
<!--/ko-->
<!--/ko-->
</div>
</script>
<script type='text/html' id='dxrd-preview-parameters'>
<div class="dxrd-preview-parameters-wrapper" data-bind="visible: active() && visible()">
<div class="dxrd-right-panel-header">
<span data-bind="text: $root.getLocalization('Preview Parameters', 'ASPxReportsStringId.ReportDesigner_Preview_ParametersTitle')"></span>
<!-- ko if: (model && !model.isEmpty()) -->
<!-- /ko -->
</div>
<!-- ko if: (!model || model.isEmpty()) -->
<div class="dxrd-group-header-parameters-empty" data-bind="text: $root.getLocalization('The report does not contain any parameters.', 'ASPxReportsStringId.WebDocumentViewer_NoParameters')"></div>
<!-- /ko -->
<!-- ko if: (model && !model.isEmpty()) -->
<div class="dxrd-right-panel-body" id="propertiesPanel" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true }, dxValidationGroup: {}">
<div class="dx-fieldset">
<div data-bind="dxPropertyGrid: { target: ko.observable(model), recreateEditors: true }"></div>
</div>
<div class="dxrd-preview-parameter-action dxrdp-parameters-submit" data-bind="dxButton: { text: $root.getLocalization('Submit', 'ASPxReportsStringId.ParametersPanel_Submit'), onClick: function(params) { model.validateAndSubmit(params); } }"></div>
<div class="dxrd-preview-parameter-action dxrdp-parameters-reset" data-bind="dxButton: { text: $root.getLocalization('Reset', 'ASPxReportsStringId.ParametersPanel_Reset'), onClick: function() { model.restore(); } }"></div>
<div class="dxrd-preview-parameter-action dxrd-preview-loading" data-bind="dxLoadIndicator: { visible: model.parametersLoading }"></div>
</div>
<!-- /ko -->
</div></script>
<script type='text/html' id='dxrd-preview-search'>
<div class="dxrd-preview-search-wrapper" data-bind="visible: active() && visible()">
<!-- ko with: model -->
<div class="dxrd-preview-search-tab-header">
<span class="dxrd-preview-search-tab-header-text" data-bind="text: $root.getLocalization('Search', 'ASPxReportsStringId.SearchDialog_Header')"></span>
<div class="dxrd-preview-search-editor" data-bind="dxSearchEditor: { searchModel: $data } "></div>
<div class="dxrd-preview-search-checkbox" data-bind="dxCheckBox: { value: matchCase, text: $root.getLocalization('Match case', 'ASPxReportsStringId.SearchDialog_Case')}"></div>
<div class="dxrd-preview-search-checkbox" data-bind="dxCheckBox: { value: matchWholeWord, text: $root.getLocalization('Match whole word only', 'ASPxReportsStringId.SearchDialog_WholeWord')}"></div>
</div>
<div class="dxrd-preview-search-result-header">
<div class="dxrd-preview-search-result-header-text" data-bind="text: $root.getLocalization('Search result', 'ASPxReportsStringId.WebDocumentViewer_SearchResultText')"></div><!--TODO: correctors-->
</div>
<div class="dxrd-preview-search-result" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<!-- ko foreach: searchResult -->
<div class="dxrd-preview-search-result-item" data-bind="dxAction: function() { $parent.goToResult($data); }">
<div class="dxrd-preview-search-tab-item-text propertygrid-editor-displayName" data-bind="text: text"></div>
<div class="dxrd-preview-search-tab-item-info" data-bind="text: $root.dx.Report.Preview.formatSearchResult($data)"></div>
</div>
<!-- /ko -->
<div class="dxrd-preview-search-result dxrdp-search-loading">
<div data-bind="dxLoadIndicator: { visible: loading, height: '30px', width: '30px' }"></div>
</div>
</div>
<!-- /ko -->
</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="dxrd-preview-export-to" data-bind="dxMenu: { disabled: $data.disabled(), items: items, cssClass: 'dxrdp-export-to-menu', onItemClick: clickAction }, attr: { title: $root.getLocalization(text, $data.textId) }">
<div class="dxrd-preview-export-menu-item" 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)"></div>
</div>
<div class="dx-menu-item-popout-container">
<div class="dx-menu-item-popout"></div>
</div>
<!-- /ko -->
</div>
</div>
<div class="dxrd-toolbar-item-separator" data-bind="visible: $data.hasSeparator"></div>
</div>
</script>
<script type="text/html" id="dxrd-preview-progress-bar">
<div class="dxrd-preview-progress" data-bind="visible: visible">
<div class="dxrd-preview-progress-text" data-bind="text : text"></div>
<div class="dxrd-preview-progress-bar">
<div class="dxrd-preview-progress-value" data-bind="style : { width: progress() + '%' }"></div>
</div>
<div class="dxrd-preview-progress-cancel" data-bind="text: cancelText, dxAction: function() { $data.stop && stop(); }"></div>
</div>
</script>
<script type="text/html" id="dxrd-preview-pager">
<div class="dxrd-preview-pager dxrd-toolbar-item" data-bind="visible: visible">
<div class="dxrd-preview-pager-selectbox" data-bind="dxSelectBox: { dataSource: pageItems, value: selectedItem, opened: opened, displayExpr: displayExpr, onFocusOut: focusOut, onKeyUp: keyUp, itemTemplate: itemTemplate, searchMode: searchMode, searchEnabled: searchEnabled, searchTimeout: searchTimeout, disabled: disabled }"></div>
<div class="dxrd-toolbar-item-separator" data-bind="visible: $data.hasSeparator"></div>
</div>
</script>
<script type="text/html" id="dxrd-page-brick">
<div class="dxrd-report-preview-brick" data-bind="dxAction: function(a){ onClick(a && a.event); }, 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 }"></div>
<!--/ko-->
<!-- ko foreach: ($data.bricks || []) -->
<!-- ko lazy: { template: { name: "dxrd-page-brick" } } -->
<!--/ko-->
<!--/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 }), dxValidator: { validationRules: $data.validationRules || [] }"></div>
</script>
<script type="text/html" id="dxrd-zoom-autofit-select-template">
<div class="dxrd-toolbar-item-zoom" data-bind="visible: visible">
<div class="dxrd-toolbar-item-zoom-editor" data-bind="dxSelectBox: { items: zoomItems, value: $data.zoom, displayExpr: displayExpr, displayCustomValue: true }"></div>
</div>
</script>
<script type="text/html" id="dxrd-multivalue">
<!-- ko with: value -->
<div data-bind="dxTagBox: $parent.getOptions({ dataSource: dataSource, searchEnabled: true, searchExpr: ['displayValue'], value: value, displayExpr: 'displayValue', valueExpr: 'value', multiline: false, showSelectionControls: true, showDropDownButton: !!$data.showDropDownButton, selectAllMode: 'allPages', selectedItems: $data.selectedItems, placeholder: $root.dx.Analytics.Localization.selectPlaceholder() })">
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-multivalue-selectbox">
<!-- ko if: options -->
<!-- ko with: options -->
<div data-bind="dxSelectBox: $parent.getOptions({ dataSource: dataSource, itemTemplate: 'valueItem', onOptionChanged: onOptionChanged, value: editorValue, displayExpr: function() { return selectedValuesString(); } })">
<div class="dxrd-multivalue-editor-item" data-options="dxTemplate: { name: 'valueItem' }" data-bind="dxAction: function(args) { toggleSelected(); args.event.stopPropagation(); }">
<div class="dxrd-multivalue-editor-item-checkState" data-bind="dxCheckBox: { value: selected, readOnly: true }"></div>
<div class="dxrd-multivalue-editor-item-text" data-bind="text: displayValue"></div>
</div>
</div>
<!-- /ko -->
<!-- /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="dxPropertyGrid: { target: value, level: editor.level + 1 }"></div>
</div>
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-report-preview">
<div class="dxrd-preview dxrd-designer-wrapper" data-bind="visible: reportPreview.previewVisible, cssArray: [ $data.rootStyle , { 'dx-rtl' : $data.rtl, 'dx-ltr': !$data.rtl } ]">
<!-- ko foreach: parts -->
<!-- ko template: { name: templateName, data: model }-->
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-preview-toolbar-scrollable">
<div class="dxrd-toolbar-wrapper dxrdp-toolbar-scrollable" data-bind="dxScrollView: { showScrollbar: 'onHover', direction: 'horizontal', useNative: false, scrollByThumb: true }">
<div class="dxrd-toolbar" data-bind="template: {name: 'dxrd-toolbar-tmplt', data: actionLists.toolbarItems }, keyDownActions: actionLists"></div>
</div>
</script>
<script type="text/html" id="dxrdp-surface">
<div class="dxrd-preview-wrapper" data-bind="textCopier, css: { 'dx-rtl': $data.rtlReport, 'dxrp-editing-fields-hightlighted': editingFieldsHighlighted } ">
<!-- ko with: progressBar-->
<!-- ko template: 'dxrd-preview-progress-bar'-->
<!-- /ko -->
<!-- /ko -->
<div class="dxrd-preview-surface" data-bind="styleunit: { width: previewSize() }">
<!-- ko if: !showMultipagePreview() -->
<div class="dxrd-report-preview-holder">
<!-- ko with: currentPage-->
<!-- ko if: pageLoading() || (!pageLoading() && displayImageSrc()) -->
<div class="dxrd-report-preview" data-bind="styleunit: { width: width, height: height }, autoFit: { autoFitBy: $parent.autoFitBy, zoom: zoom, width: originalWidth, height: originalHeight, rightPanelWidth: $root.tabPanel.width, previewSize: $parent.previewSize, brickLoading: brickLoading } ">
<!-- ko template: 'dxrd-preview-page'-->
<!-- /ko -->
</div>
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
<!-- ko if: showMultipagePreview() && !!currentPage() -->
<div class="dxrd-report-preview-holder" data-bind="lazyImages: { enabled: showMultipagePreview, updateCallback: onSizeChanged }">
<!-- ko foreach: pages -->
<!-- ko lazy: { if: pageLoading() || (!pageLoading() && displayImageSrc()) } -->
<div class="dxrd-report-preview dxrd-report-preview-multipage" data-bind="styleunit: { 'width': width(), 'height': height() }, toView: { active: active }, css : { 'dxrd-report-preview-active': active }">
<!-- ko template: 'dxrd-preview-page'-->
<!-- /ko -->
</div>
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
<!-- ko if: !currentPage() -->
<div class="dxrd-report-preview-placeholder">
<div data-bind="text: emptyDocumentCaption()"></div>
</div>
<!-- /ko -->
</div>
</div>
<div id="clipboard-container" style="position:absolute;top:-100px;"><textarea id="clipboard"></textarea></div>
</script>