devexpress-reporting
Version:
DevExpress Reporting provides the capability to develop a reporting application to create and customize reports.
4,846 lines • 281 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 Query Builder (dx-querybuilder.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='dxdd-connection-line'>
<svg class="dxdd-connection-line" style="width:100%; height: 100%">
<line 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 style="width:100%; 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, dxAction: 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">
<!-- ko if: showArrow -->
<defs>
<marker data-bind="attr: { id: 'dxqb-arrow_' + connectorID() }" viewBox="0 0 5 10" refX="5" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="14" markerHeight="14">
<polyline points="0,0 5,5 0,10" />
</marker>
</defs>
<!-- /ko -->
<polyline fill="none" data-bind="attr: { points: routePointsSet, 'marker-end': showArrow() ? 'url(#dxqb-arrow_' + connectorID() + ')' : '' }, updateConnectorArrow: $data" />
</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" style="position: absolute;">
<!-- ko with: $parent -->
<div class="dxd-selectable" data-bind="trackCursor: underCursor" style="position: relative; width: 100%; height: 100%;"></div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</script>
<script type='text/html' id='dxdd-routed-connector-selection'>
<div class="dxdd-connector dxdd-connector-selected" data-bind="styleunit: position, dxAction: 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 }" style="position: absolute;">
</div>
<!-- /ko -->
<!-- ko if: isLocked -->
<div data-bind="styleunit: position" style="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: { 'top': margin(), 'left': margin(), lineHeight: position.lineHeight() - 2 * margin() }, style: css">
<div data-bind="template: contenttemplate, styleunit: { 'height': (position.lineHeight() - margin() * 2), 'width': (position.width() - margin() * 2) }">
</div>
</div>
</div>
</script>
<script type='text/html' id='dx-diagram-element-selection'>
<div class="dxrd-control" data-bind="event: { dblclick: $root.inlineTextEdit.show }, 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: { 'top': margin(), 'left': margin(), lineHeight: position.lineHeight() - 2 * margin() }, style: css">
<div data-bind="template: contenttemplate, styleunit: { 'height': (position.lineHeight() - margin() * 2), 'width': (position.width() - margin() * 2) }">
</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 style="width: 100%; height: 100%; 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 style="width: 100%; height: 100%; overflow: hidden">
<svg style="top:0; left: 0; width: 100%; height: 100%; stroke: black; fill: transparent; 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" style="text-anchor: middle; 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" style="height: 100%; 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">
<div class="dxrd-viewport" style="overflow:auto;width:inherit;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" style="background: white;position: relative;" data-bind="styleunit: { 'width': pageWidth(), 'height': pageHeight() }, trackCursor: underCursor">
<!-- ko foreach: controls -->
<!-- ko template: { name: isSelected() ? selectiontemplate : template } -->
<!-- /ko -->
<!-- /ko -->
<div class="dxrd-drag-helper-source" data-bind="styleunit: { top: $root.dragHelperContent.top, left: $root.dragHelperContent.left, width: $root.dragHelperContent.width, height: $root.dragHelperContent.height }" style="display:none">
<!-- ko foreach: $root.dragHelperContent.controls -->
<div class="dxrd-drag-helper-item" data-bind="styleunit: $data"></div>
<!-- /ko -->
</div>
</div>
</div>
</div>
</div>
</div>
</script>
<script type='text/html' id='dxqb-joincondition'>
<div class="dxdd-connector" data-bind="styleunit: position, trackCursor: underCursor">
<svg style="width:100%; 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" style="display:inline-block;" data-bind="styleunit: { 'width': $root.surfaceSize }, click: function(_, e) { $root.selection.clickHandler(null, e); e.stopPropagation(); }, keyDownActions: $root.actionLists">
<div class="dxrd-viewport" style="width:inherit;height:inherit;">
<div data-bind="dxScrollView: { direction: 'both', showScrollbar: 'onHover', scrollByContent: false, scrollByThumb: true, bounceEnabled: false, useNative: false, height: '100%' }">
<div style="height:100%;">
<div class="dxrd-ghost-containment" style="height:100%;">
<div class="dxrd-ghost-container dxqb-ghost-container" data-bind="styleunit: { 'minWidth': pageWidth, 'minHeight': pageHeight }, trackCursor: underCursor">
<div class="dxqb-main" data-bind="trackCursor: underCursor, style: { 'z-index' : $parent.dragDropStarted() ? 2 : null }">
<!-- ko if: tables().length === 0-->
<div class="dxqb-placeholder" 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 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 class="dxrd-drag-helper-source" data-bind="styleunit: { top: $root.dragHelperContent.top, left: $root.dragHelperContent.left, width: $root.dragHelperContent.width, height: $root.dragHelperContent.height }" style="display:none">
<!-- ko foreach: $root.dragHelperContent.controls -->
<div class="dxrd-drag-helper-item" data-bind="styleunit: { left: $data.left, top: $data.top, width: $data.width, height: $data.height }"></div>
<!-- /ko -->
</div>
</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="dxqb-table-field" data-bind="trackCursor: underCursor, draggable: $root.columnDragHandler, css: cssClasses($root.surface(), $root.columnDragHandler, $parent)">
<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" 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"></div>
<!-- /ko -->
<!-- ko if: $data.isDescending() -->
<div class="dxqb-image-field-state dxqb-image-field-sorting-desc"></div>
<!-- /ko -->
<!-- ko if: $data.getControlModel().groupBy -->
<div class="dxqb-image-field-state dxqb-image-field-group-by"></div>
<!-- /ko -->
<!-- ko if: $data.isAggregate() -->
<div class="dxqb-image-field-state dxqb-image-field-aggregate"></div>
<!-- /ko -->
</div>
<div class="dxqb-table-field-caption">
<div class="dxqb-table-field-text" data-bind="text: getControlModel().actualName"></div>
</div>
</div>
</div>
</script>
<script type='text/html' id='dxqb-table-asterisk-field'>
<div class="dxqb-table-field" data-bind="trackCursor: underCursor, css: { 'dxqb-table-field-selected': selected, 'dxqb-table-field-undercursor': isOverAsterisk()}">
<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" data-bind="attr: { title: getControlModel().name }">
<div class="dxqb-table-field-caption">
<div class="dxqb-table-field-text" data-bind="text: getControlModel().name"></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">
<div class="dxrd-control-content-main" data-bind="styleunit: { 'top': margin(), 'left': margin(), lineHeight: position.lineHeight() - 2 * margin() }, style: css">
<div data-bind="template: contenttemplate, styleunit: { 'height': (position.lineHeight() - margin() * 2), 'width': (position.width() - margin() * 2) }">
</div>
</div>
</div>
</script>
<script type='text/html' id='dxqb-table'>
<div class="dxqb-table">
<div class="dxqb-table-head-field">
<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>
<div class="dxqb-table-title" data-bind="text: getControlModel().actualName, style: { cursor: selected() ? 'move' : 'default' }"></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" 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="dxrd-masterDetail-editor">
<!-- ko if: $data -->
<div>
<div class="dx-filtereditor" data-bind="dxPopup: { showTitle: true, width: '95%', height: '95%', title: title(), visible: popupVisible,
toolbarItems: buttonItems, showCloseButton: true, container: getPopupContainer($element), position: { of: getPopupContainer($element) },
}">
<div class="dx-filtereditor-tree" data-bind="dxScrollView: { showScrollbar: 'onHover', direction: 'both' }" style="cursor: default">
<!-- ko foreach: masterQueries -->
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-text criteria-operator-item-group 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: { width: '170px', height: '300px', focusStateEnabled: false,
position: $root.rtl ? { my: 'right top', at: 'right bottom', of: popupService.target } : { my: 'left top', at: 'left bottom', of: popupService.target },
container: '.dx-viewport',
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>
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dx-masterDetail-editor-keyColumn">
<div class="criteria-operator-text criteria-operator-item-field stylized" data-bind="text: queryName"></div>
<div class="criteria-operator-text">.</div>
<div class="criteria-operator-text">
<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="dxAction: function() { $parent.remove($data); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove"></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 criteria-operator-item-value" data-bind="visible: !isEditable()">
<div class="criteria-operator-text clickable" data-bind="text: relationName, click: function() { isEditable(true); }"></div>
</div>
<div class="criteria-operator-action" data-bind="dxAction: create">
<div class="criteria-operator-action-image dx-image-filtereditor-add"></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="dxAction: function() { $parent.remove($data); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove"></div>
</div>
<!-- ko template: { name: 'dx-masterDetail-editor-keyColumn', data: master } -->
<!-- /ko -->
<div class="criteria-operator-text"> = </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 clickable criteria-operator-item-field" data-bind="text: target.column() || target.selectColumnText(), dxAction: showPopup, css: { 'selected': target.isSelected, 'default': !target.column() }"></div>
</script>
<script type="text/html" id="dxqb-data-preview">
<div style="height: 100%" data-bind="dxdTableView: $data.value"></div>
</script>
<script type="text/html" id="dxqb-popup">
<div class="dxqb-preview" data-bind="dxPopup: {
animation: {
show: { type: 'fade', from: 0, to: 1, duration: 700 },
hide: { type: 'fade', from: 1, to: 0, duration: 700 }
},
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 style="text-align: center; padding-top: 25%;">
<div data-bind="dxLoadIndicator: { visible: true }"></div>
</div>
<!-- /ko -->
</div>
<div class="dxqb-preview-popup-buttons">
<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" 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-tableview-resizable' }">
<div class="dxd-tableview-cell-text" 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 }">
<table>
<tbody>
<!-- ko foreach: data.values -->
<tr>
<!-- ko foreach: $parent.rtl ? $data.reverse() : $data -->
<td class="dxd-tableview-cell">
<!-- ko ifnot: $parents[1].isImage($index()) -->
<div data-bind="text: $data, attr: { class: 'dxd-tableview-cell-text 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-tableview-resizable' + $index() }"></div>
<!-- /ko -->
<!-- ko ifnot: $parents[1].isImageTooLarge($data) -->
<div data-bind="attr: { class: 'dxd-tableview-cell-text 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">
<div data-bind="attr: { class: 'dxd-tableview-cell-text 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()" />
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxqb-fieldlist-wrapper">
<div id="tree" data-bind="treelist: treeListOptions" style="width:100%; height: 100%;"></div>
</script>
<script type='text/html' id='dxqb-properties-wrapper'>
<div class="dxrd-properties-wrapper" style="height: 100%; overflow:hidden">
<div data-bind="with: model" style="height:100%">
<div class="dxrd-right-panel-header">
<div style="display: inline-block;" data-bind="text: $data.caption"></div>
</div>
<div class="dx-fieldset dxqb-selected-properties">
<!-- ko foreach: properties.getEditors() -->
<!-- ko template: editorTemplate -->
<!-- /ko -->
<!-- /ko -->
</div>
<div class="dxrd-right-panel-header">
<div style="display: inline-block;" data-bind="text: dbObjectsListTitle()"></div>
</div>
<div class="dxqb-right-panel-search-box" data-bind="dxTextBox: { value: searchName, valueChangeEvent: 'keyup', placeholder: searchPlaceholder(), showClearButton: true }"></div>
<div style="position:absolute; width: 100%; bottom: 0; height: auto; top: 0; padding-top: 13px;" data-bind="dxScrollView: { showScrollbar: 'onHover', scrollByContent: false, scrollByThumb: true, bounceEnabled: false, useNative: false }, updateTop: tablesTop">
<!-- ko template: { name: "dxqb-fieldlist-wrapper", data: fieldListModel } -->
<!-- /ko -->
</div>
</div>
</div>
</script>
<script type="text/html" id="dxqb-right-panel">
<div class="dxrd-right-panel" data-bind="styleunit: { width: tabPanel.width }, resizable: tabPanel.resizable($element)">
<!-- ko foreach: tabPanel.tabs -->
<!-- ko lazy: { template: $data.template } -->
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxqb-toolbar">
<div class="dxrd-toolbar-wrapper" data-bind="click: $root.findControl">
<div class="dxrd-toolbar" data-bind="template: {name: 'dxrd-toolbar-tmplt', data: actionLists.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">
<div class="dx-field-label">
<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 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 clickable " data-bind="text: target.parameterName, dxAction: showPopup, css: { '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 dx-item dx-list-item">
<div class="dx-collapsing-image" data-bind="css: { 'dx-image-expanded': !collapsed() }" style="display:inline-block; margin-left: 5px;"></div>
<span class="dx-item-content dx-list-item-content" style="padding-left: 17px" data-bind="text: name"></span>
</div>
</div>
<div class="dx-accordion-content">
<!-- ko foreach: items -->
<div class="dx-filtereditor-popup-item dx-item dx-list-item">
<span class="dx-item-content dx-list-item-content" style="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' }">
<div class="dx-filtereditor-popup-item dx-item dx-list-item">
<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 foreach: data -->
<div class="dx-filtereditor-popup-item dx-item dx-list-item">
<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" 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-collapsedbutton" data-bind="css: nodeImageClass, click: toggleCollapsed"></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">
<!-- ko if: treeListController && !!$data.treeListController.searchName -->
<div class="dx-treelist-text dxdr-highlighted-search-text" data-bind="searchHighlighting: { text: text, textToSearch: treeListController.searchName }, attr: { title: text }"></div>
<!-- /ko -->
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-wizard-add-queries-page">
<div class="dxrd-wizard-page dxrd-wizard-add-queries-page">
<div class="dxrd-wizard-dataMember" data-bind="dxScrollView: { showScrollbar: 'onHover', height: scrollViewHeight }">
<div data-bind="treelist: fieldListModel" style="width:100%; height: 100%;"></div>
</div>
<!-- ko ifnot: $data.disableCustomSql -->
<!-- ko template: { name: 'dxqb-popup-selectStatment', data: popupSelectStatment } -->
<!-- /ko -->
<!-- /ko -->
<!-- ko template: { name: 'dxrd-querybuilder-popup', data: popupQueryBuilder } -->
<!-- /ko -->
<div class="dxrd-wizard-load-panel" data-bind="dxLoadPanel: loadPanelViewModel($element)">
</div>
</div>
</script>
<script type="text/html" id="dxrd-configure-query-parameters-page">
<div class="dxrd-wizard-page dxrd-configure-query-parameters-page">
<div class="dxrd-wizard-dataMember" data-bind="dxScrollView: { showScrollbar: 'onHover', height: scrollViewHeight }">
<div data-bind="treelist: fieldListModel" style="width:100%; height: 100%;"></div>
</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">
<!-- ko if: $data -->
<div class="dx-filtereditor-tree" data-bind="dxScrollView: { showScrollbar: 'onHover', direction: 'both' }" style="cursor: default">
<!-- ko foreach: masterQueries -->
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-text criteria-operator-item-group 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: { width: '170px', height: '235px', focusStateEnabled: false,
position: $root.rtl ? { my: 'right top', at: 'right bottom', of: popupService.target } : { my: 'left top', at: 'left bottom', of: popupService.target },
container: '.dx-viewport',
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>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxqb-popup-selectStatment">
<div class="dxqb-preview" data-bind="dxPopup: {
animation: {
show: { type: 'fade', from: 0, to: 1, duration: 700 },
hide: { type: 'fade', from: 1, to: 0, duration: 700 }
},
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-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" data-bind="dxAceEditor: { value: data, additionalOptions: additionalOptions, options: aceOptions }"></div>
</div>
</div>
<!-- /ko -->
</div>
</div>
<div class="dxqb-preview-popup-buttons">
<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'>
<div data-bind="visible: 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 -->
</div>
</script>
<script type="text/html" id="dx-treelist-accordion-item-with-checkbox">
<div data-bind="dxdAccordionExt: { collapsed: collapsed, lazyContentRendering: true }">
<!-- ko template: "dx-treelist-header-item-with-checkbox" -->
<!-- /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-checkbox">
<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 }">
<!--<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() || isHovered()">
<!-- 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, disabled: $data.disabled && $data.disabled() }, attr: { title: text }"></div>
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
<div class="dx-treelist-selectedcontent" data-bind="event: { dblclick: function() { $data.dblClickHandler && $data.dblClickHandler($data); } }, click: toggleSelected, draggable: isDraggable ? dragDropHandler : null">
<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" data-bind="text: text, attr: { title: text }"></div>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-treelist-action-with-popover">
<div class="dx-treelist-action-with-popover" style="display: inline-block">
<div class="dx-treelist-action" data-bind="dxButton: { onClick: function() { clickAction($parent); }, icon: imageClassName, disabled: $data.disabled && $data.disabled() }, attr: { title: text }"></div>
<div data-bind="dxPopover:{ width: 200, position: !$root.rtl ? 'left' : 'right', visible: $parent.data.popoverVisible, target: '.dx-treelist-action-with-popover'}">
<div data-bind="dxList: { dataSource: $parent.data.popoverListItems(), onItemClick: $parent.data.itemClickAction }">
<div data-options="dxTemplate : { name: 'item' }">
<div class="dx-text-content" data-bind="text: name, attr: { title: name }"></div>
</div>
</div>
</div>
</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-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 data-bind="dxdAccordion: { collapsed: collapsed }">
<div class="dxrd-group-header dx-accordion-header" style="border-bottom: 0" data-bind="styleunit: { 'marginLeft' : editor.padding }, 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: value().name"></span>
</div>
<div class="dx-accordion-content">
<div data-bind="dxPropertyGrid: { target: value, level: editor.level + 1 }"></div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-wizard-datasource-parameters">
<div class="dx-fieldset" style="height:100%">
<div class="dx-collectioneditor" style="height:100%">
<div class="dxrd-datasource-parameters-collection">
<div class="dxrd-datasource-parameters-container" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<!-- ko if: values().length === 0 -->
<div class="dxrd-collectioneditor-empty">
<span class="dxrd-datasource-parameters-empty-text" data-bind="text: getDisplayTextEmptyArray()"></span>
</div>
<!-- /ko -->
<!-- ko if: values().length !== 0 -->
<div class="dxrd-collectioneditor-items" data-bind="foreach: values">
<div data-bind="with: $parent.createCollectionItemWrapper($parents[1], $index)">
<div class="dxrd-collectioneditor-item-container" data-bind="dxAction: $parents[1].select, css: { 'dxrd-collectioneditor-item-container-selected' : $parents[1].selectedIndex() === $index() }">
<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="attr: { title: getDisplayTextButton('add') }, dxButton: { onClick: add, text: getDisplayTextButton('add') }"></div>
<div class="dxrd-collectioneditor-action" data-bind="attr: { title: $parent.removeButtonTitle }, dxButton: { onClick: remove, disabled: selectedIndex() === null, text: $parent.removeButtonTitle }"></div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-page-connectionstring">
<div class="dxrd-wizard-page">
<div class="dxrd-wizard-list" data-bind="dxList: { items: connectionStrings, selectedItems: selectedConnectionString, editEnabled: true, editConfig: { selectionEnabled: true }, selectionMode: 'single', activeStateEnabled: false, noDataText: $root.dx.Analytics.Localization.noDataText() }">
<div data-options="dxTemplate : { name: 'item' }">
<div data-bind="text: $data['description'] || $data['name']"></div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-select-control">
<div data-bind="text: caption()"></div>
<!-- ko if: !aceAvailable -->
<div class="dxrd-wizard-list dxrd-create-query-page-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">
<div class="dxrd-create-query-page-editor-content">
<div class="dx-sql_editor" 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 data-bind="text: caption()"></div>
<div class="dxrd-wizard-list dxrd-create-query-page-editor" data-bind="dxList: { items: storedProcedures, onContentReady: scrollActiveItem, selectedItems: selectedProcedure, editEnabled: true, editConfig: { selectionEnabled: true }, selectionMode: 'single', activeStateEnabled: false, noDataText: $root.dx.Analytics.Localization.noDataText() }">
<div data-options="dxTemplate : { name: 'item' }">
<div data-bind="text: $parent.generateStoredProcedureDisplayName($data)"></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 data-bind="dxRadioGroup: { value: selectedQueryType, items: queryTypeItems }">
<div data-options="dxTemplate : { name: 'item' }">
<div data-bind="text: $parent.localizeQueryType($data)"></div>
</div>
</div>
<div class="dxrd-create-query-page-content">
<!-- ko template: { name: queryControl().template, data: queryControl() } -->
<!-- /ko -->
</div>
<div data-bind="dxButton: { text: runQueryBuilderBtnText, onClick: runQueryBuilder, disabled: queryControl().runQueryBuilderDisabled }" class="dxrd-wizard-btn"></div>
<!-- ko template: { name: 'dxrd-querybuilder-popup', data: popupQueryBuilder } -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-querybuilder-popup">
<div class="dxrd-querybuilder-popup" data-bind="dxPopup: popupViewModel($element)">
<!-- ko if: qbOptions -->
<div class="dxrd-querybuilder-popup-content">
<div style="height:100%;" data-bind="dxQueryBuilder: { options: qbOptions, designerModel: designer }"></div>
</div>
<div class="dxrd-querybuilder-popup-buttons">
<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'), onClick: okHandler, disabled: okButtonDisabled }" class="dxrd-querybuilder-popup-button"></div>
</div>
<div class="dxrd-wizard-load-panel" 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="dxrd-wizard-header-custom">
<div class="dxrd-wizard-header-custom">
<div class="dxrd-span-title" data-bind="text: currentStep.title || title"></div>
<div class="dxrd-span-description" data-bind="text: currentStep.description, attr: { title: currentStep.description }"></div>
</div>
</script>
<script type="text/html" id="dxrd-wizard">
<!-- ko if: $data -->
<div class="dxrd-wizard dx-editors" data-bind="dxPopup: {
visible: isVisible,
title: isVisible() ? title : '',
showTitle: true,
fullScreen: false,
width: width,
height: height,
container: container($element),
titleTemplate: document.getElementById('dxrd-wizard-header-custom'),
position: wizardPopupPosition($element)
}, css: extendCssClass">
<div class="dxrd-wizard-content">
<!-- ko foreach: renderedSteps -->
<div style="width: 100%; height: 100%" data-bind="visible: $parent.currentStep === $data">
<!-- ko template: { name: $data.template, data: $data } -->
<!-- /ko -->
</div>
<!-- /ko -->
<div class="dxrd-wizard-load-panel" data-bind="dxLoadPanel: loadPanelViewModel($element)">
</div>
</div>
<div class="dxrd-wizard-navigation">
<!-- ko with: currentStep.actionCancel -->
<div data-bind="dxButton: { text: text, onClick: handler, disabled: isDisabled, visible: isVisible }" class="dxrd-wizard-btn left"></div>
<!-- /ko -->
<!-- ko with: currentStep.actionFinish -->
<div data-bind="dxButton: { text: text, onClick: handler, disabled: isDisabled, visible: isVisible }" class="dxrd-wizard-btn right"></div>
<!-- /ko -->
<!-- ko with: currentStep.actionNext -->
<div data-bind="dxButton: { text: text, onClick: handler, disabled: isDisabled, visible: isVisible }" class="dxrd-wizard-btn right"></div>
<!-- /ko -->
<!-- ko with: currentStep.actionPrevious -->
<div data-bind="dxButton: { text: text, onClick: handler, disabled: $parent.isPreviousButtonDisabled, visible: isVisible }" class="dxrd-wizard-btn right"></div>
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</script>
<!--
/**
* DevExpress HTML/JS Chart Designer (chart-designer.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="dx-chart-leftPanel">
<div class="dx-chart-left-panel">
<div class="dxrd-right-panel">
<div class="dxrd-right-panel-header">
<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" data-bind="treelist: chartStructure"></div>
</div>
<!-- /ko -->
</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.toolbarItems }"></div>
</div>
</script>
<script type="text/html" id="dx-chart-middlePart">
<!-- ko ifnot: isLoading -->
<!-- ko with: surface -->
<div class="dxrd-surface-wrapper" style="top: 0" data-bind="template: templateName">
</div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: isLoading -->
<div class="dxrd-surface-wrapper">
<div style="text-align: center; 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" style="border:none; 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.Analytics.Localization.selectPlaceholder(), noDataText: $root.dx.Analytics.Localization.noDataText() }"></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">
<div data-bind="dxFieldListPicker: { path: path, value: value, itemsProvider: $root.dataBindingsProvider(), treeListController: treeListController, disabled: disabled }"></div>
</script>
<script type="text/html" id="dxrd-propertygridtab">
<div class="dxrd-right-panel-header">
<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: { dataSource: $root.panes, value: value, disabled: disabled }"></div>
</script>
<script type="text/html" id="dxcd-legends-editor">
<div data-bind="dxSelectBox: { dataSource: $root.legends, value: value, disabled: disabled }"></div>
</script>
<script type="text/html" id="dxcd-axisX-editor">
<div data-bind="dxSelectBox: { dataSource: $root.axisX, value: value, disabled: disabled }"></div>
</script>
<script type="text/html" id="dxcd-axisY-editor">
<div data-bind="dxSelectBox: { dataSource: $root.axisY, value: value, disabled: disabled }"></div>
</script>
<script type="text/html" id="dxcd-datasource">
<!-- ko with: generateOptions($root.chartDataSources) -->
<div data-bind="dxSelectBox: $data"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dxcd-viewHeader">
<div data-bind="dxSelectBox: { dataSource: values, itemTemplate: 'stateItem', valueExpr: 'value', value: generateHeaderValue($root.undoEngine), displayExpr: 'displayValue', disabled: disabled }">
<div class="lookupItem" data-options="dxTemplate:{ name:'stateItem' }">
<div style="display:inline-block; width: 24px; height: 24px;" data-bind="css: $parent.generateViewClassName(value)"></div>
<div style="display:inline-block; vertical-align: super;" 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">
<div class="dx-field-label" data-bind="styleunit: $parent.memberPadding">
<div class="propertygrid-editor-displayName" data-bind="text: $parent.getLocalization('Function', 'DevExpress.XtraReports.UI.XRGroupSortingSummary.Function'), attr: { 'title': $parent.getLocalization('Function', 'DevExpress.XtraReports.UI.XRGroupSortingSummary.Function') }"></div>
</div>
<div class="dx-field-value">
<div data-bind="dxSelectBox: { value: functionName, dataSource: $parent.availableItems() ,acceptCustomValue: true, disabled: $parent.disabled(), placeholder: $root.dx.Analytics.Localization.selectPlaceholder() }"></div>
</div>
</div>
<!-- ko foreach: args -->
<div class="dx-field" data-bind="css: $parents[1].actionsAreAvailable() ? 'dxcd-summaryfunction-arg' : ''">
<div class="dx-field-label" 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"></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 } } -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
<!-- ko if: $parent.actionsAreAvailable() -->
<div class="dx-field">
<div class="dx-field-label" style="width:auto" data-bind="styleunit: $parent.memberPadding">
<div class="propertygrid-editor-displayName dxrcd-summaryfunction-addnew" 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(_model()['owner'] || _model()); }
}">
<div data-bind="dxPropertyGrid: { target: value, level: editor.level + 1 }"></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: { dataSource: $root.groups, value: value, acceptCustomValue:true, onFocusOut: function() { $root.applyGroup($data.value()); }, disabled: disabled }"></div>
</script>
<script type="text/html" id="dxcd-color-undo">
<div data-bind="dxColorBox: { value: generateValue($root.undoEngine), editAlphaChannel: true, popupPosition: { collision: 'flipfit flipfit' }, disabled: disabled }"></div>
</script>
<script type="text/html" id="dx-selectbox-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>
<!--
/**
* 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>
<!--
/**
* DevExpress HTML/JS Reporting (report-designer.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='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': 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" style="position:absolute">
</div>
<!-- ko ifnot: collapsed -->
<!-- ko foreach: subBands -->
<!-- ko template: { name: 'dxrd-band-coordinate-grid-selection', data: { surface: $data, width: $parents[1].width } } -->
<!-- /ko -->
<!-- /ko -->
<!-- ko foreach: bands -->
<!-- ko template: { name: 'dxrd-band-coordinate-grid-selection', data: { surface: $data, width: $parents[1].width } } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</script>
<script type='text/html' id='dxrd-band-coordinate-grid'>
<!-- ko with: surface -->
<!-- ko ifnot: collapsed -->
<!-- ko if: (bands().length === 0) -->
<div class="dxrd-band-content dxd-selectable" data-bind="styleunit: { 'height': height() }">
<div data-bind="coordinateGrid: coordinateGridOptionsVruler" style="position:absolute"></div>
<div class="dxrd-band-subbands-wrapper" data-bind="styleunit: { 'top': height() - subBandsHeight() } ">
<!-- ko foreach: subBands -->
<!-- ko template: { name: 'dxrd-band-coordinate-grid', data: { surface: $data, width: $parents[1].width, 'snapGridSize': $parents[1].snapGridSize } } -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
<!-- ko foreach: bands -->
<!-- ko template: { name: 'dxrd-band-coordinate-grid', data: { surface: $data, width: $parents[1].width, 'snapGridSize': $parents[1].snapGridSize } } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: collapsed -->
<div data-bind="styleunit: { 'height': height }" class="dxrd-band-collapsed">
<div data-bind="css: { 'dxrd-band-content-selected': selected() }, styleunit: { 'height': height }" style="position:absolute; 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': 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" style="position:absolute">
<!-- ko ifnot: collapsed -->
<!-- ko foreach: controls -->
<!-- ko template: { name: $data.selectiontemplate } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- ko ifnot: collapsed -->
<!-- ko foreach: subBands -->
<!-- ko template: { name: 'dxrd-band-selection' } -->
<!-- /ko -->
<!-- /ko -->
<!-- ko foreach: bands -->
<!-- ko template: { name: 'dxrd-band-selection' } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko --></script>
<script type='text/html' id='dxrd-band-vruler'>
<!-- ko with: surface -->
<div class="dxrd-band-marker-wrapper" data-bind="attr: { title: name }, styleunit: { 'width': $root.surface().maxMarkerWidth() }">
<!-- ko if: hasOwnRuler -->
<div class="dxrd-band-vruler" data-bind="styleunit: { 'height': rulerHeight },
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: heightFromControls() || 1 }">
<div data-bind="ruler: { 'zoom': zoom, 'length': height, 'units': $parent.measureUnit, 'direction': 'vertical', flip: $root.dx['config']()['rtlEnabled'] }"></div>
</div>
<!-- /ko -->
<div class="dxrd-band-marker" data-bind="css: markerClass, styleunit: { 'height': height(), 'width': markerWidth }, click: function(_, e) { markerClick($root.selection); e.stopPropagation(); }, resizable: { starting: function() { $root.resizeHandler.started = true; $root.resizeHandler.starting(); $root.selection.initialize($data); }, stopped: function() { $data.stopResize(); $root.resizeHandler.stopped(); $root.resizeHandler.started = false; }, handles: 's', disabled: collapsed() || !hasOwnRuler() || locked, forceResize: resize, zoom: $root.surface().zoom, minimumHeight: minHeight() }">
<div style="width: 1px; height: 1px; 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>
<!-- ko ifnot: collapsed -->
<!-- ko foreach: subBands -->
<!-- ko template: { name: 'dxrd-band-vruler', data: { surface: $data, measureUnit: $parents[1].measureUnit } } -->
<!-- /ko -->
<!-- /ko -->
<!-- ko foreach: bands -->
<!-- ko template: { name: 'dxrd-band-vruler', data: { surface: $data, measureUnit: $parents[1].measureUnit } } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
</script>
<script type='text/html' id='dxrd-band'>
<!-- ko ifnot: collapsed -->
<!-- ko if: (bands().length === 0) -->
<div class="dxrd-band-content dxd-selectable" data-bind="styleunit: { 'height': height() - subBandsHeight(), 'width': _width() }">
<div data-bind="coordinateGrid: coordinateGridOptions" class="dxrd-band-content-grid"></div>
<!-- ko if: $data.columnWidth -->
<div data-bind="styleunit: { 'left': !$root.surface().rtl() ? columnWidth : _width() - columnWidth() - columnSpacing(),'width': columnSpacing }" class="dxrd-band-content-spasing"></div>
<div data-bind="styleunit: { 'left': !$root.surface().rtl() ? columnWidth() + columnSpacing() : 0,'width': grayAreaWidth }" class="dxrd-band-content-greyarea">
<p data-bind="styleunit: {'padding-top': (height() / 2) - 23}">
<span data-bind="text: $root.getLocalization('Space for repeating columns.', 'ReportStringId.MultiColumnDesignMsg1')"></span><br>
<span data-bind="text: $root.getLocalization('Controls placed here will be printed incorrectly.', 'ReportStringId.MultiColumnDesignMsg2')"></span>
</p>
</div>
<!-- /ko -->
<!-- ko foreach: controls -->
<!-- ko template: { name: $data.template } -->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- ko foreach: subBands -->
<!-- ko template: { name: 'dxrd-band' } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<!-- ko foreach: bands -->
<!-- ko template: { name: 'dxrd-band' } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: collapsed -->
<div class="dxrd-band-collapsed dxd-selectable" data-bind="styleunit: { 'height': height, 'line-height': height }">
<!-- ko if: $root.surface().rtl() -->
<div style="position: absolute" data-bind="text: (name() || '').toUpperCase(), styleunit: { 'right': leftMargin }"></div>
<!-- /ko -->
<!-- ko if: !$root.surface().rtl() -->
<div style="position: absolute" data-bind="text: (name() || '').toUpperCase(), styleunit: { 'left': leftMargin }"></div>
<!-- /ko -->
</div>
<!-- /ko --></script>
<script type='text/html' id='dxrd-barcode-content'>
<div style="margin:auto; width: 150px; height: 37px;" class="dxrd-image-surface-barcode"></div>
<div data-bind="styleunit: { 'lineHeight': (contentSizes().height - 37) / _context.zoom() }">
<div class="dxrd-control-content" data-bind="text: displayName, style: contentCss"></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-charactercomb-content'>
<!-- ko foreach: cells -->
<div class="dxrd-charactercomb-cell" style="position:absolute" data-bind="styleunit: { width: size.width, height: size.height, top: top, left: left }">
<div style="position:absolute">
<div data-bind="style: $parent.css, text: text, styleunit: { lineHeight: size.height(), width: size.width, height: size.height }" style="position:absolute; letter-spacing:1px;"></div>
<div data-bind="style: $parent.borderCss, styleunit: { width: size.width, height: size.height }" style="position:absolute; 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" style="border: 1px solid silver;left:0; top: 0;" data-bind="styleunit: { lineHeight: rect().height, height: rect().height, width: rect().width }">
<div style="position:relative; overflow:hidden; margin-top:-1px; 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 class="dxrd-chartdesigner-popup" data-bind="dxPopup: {
showTitle: true,
width: '95%',
height: '95%',
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 style="width:100%; 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': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
<div class="dxrd-chart-panel">
<div class="dxrd-chart-panel-text" data-bind="dxAction: function() { $root.runChartDesigner($data); }, text: runDesignerButtonText(), attr: { title: runDesignerButtonText() }"></div>
</div>
</div>
<div class="dxrd-control" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? 'visible' : 'hidden'}">
</div>
</script>
<script type='text/html' id='dxrd-checkbox-content'>
<div data-bind="style: { cssFloat: isGlyphAlignmentNear() ? 'left': 'right', width: checkStateWidth() }, styleunit: { lineHeight: contentSizes().height / _context.zoom() }" style="text-align:center ">
<div class="dxrd-checkbox-checkstate" data-bind="css: checkStateClass"></div>
</div>
<div style="display: inline-block; box-sizing: border-box; letter-spacing: normal; padding-left:3px" data-bind="styleunit: { width: textWidth, lineHeight: contentSizes().height / _context.zoom() }, 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 style="box-sizing: border-box; letter-spacing: normal; width:100%" data-bind="styleunit: { lineHeight: contentSizes().height / _context.zoom() }">
<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) } }, visible: selected() || focused(), css: {'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
<!-- ko if: $root.inlineTextEdit.visible() && selected() -->
<!-- ko with: $root.inlineTextEdit-->
<div class="inline-text-edit" data-bind="dxTextArea: { value: text, onKeyUp: keypressAction, valueChangeEvent: 'keyup' }"></div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: $data.controls-->
<!-- ko foreach: controls -->
<!-- ko template: { name: $data.selectiontemplate } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
<div class="dxrd-control" data-bind="visible: !(selected() && focused()), styleunit: position, trackCursor: underCursor, style:{ overflow: isSelected() ? 'visible' : 'hidden'}">
<div class="dxrd-control-content-select-main" data-bind="styleunit: { 'top': contentSizes().top + (isIntersect() ? 1 : 0), 'left': contentSizes().left + (isIntersect()? 1 : 0), lineHeight: contentSizes().height, height: contentSizes().height, width: contentSizes().width}">
<!-- ko if: $data.controls-->
<!-- ko foreach: controls -->
<!-- ko template: { name: $data.selectiontemplate } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</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': contentSizes().height / _context.zoom(), 'width': contentSizes().width / _context.zoom() }">
</div>
<!-- ko if: $data.controls -->
<!-- ko foreach: controls -->
<!-- ko template: { name: $data.template } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
<div data-bind="style: borderCss" style="width:100%; height: 100%; position:absolute; box-sizing:border-box"></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-crossband-line'>
<svg class="dxrd-cross-band dxrd-control dxd-selectable" data-bind="styleunit: position" >
<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>
</script>
<script type='text/html' id='dxrd-crossband'>
<div class="dxrd-cross-band" data-bind="styleunit: position, css: {'dxrd-intersect': isIntersect, 'dxrd-locked': locked }">
<div class="dxrd-control dxd-selectable" style="width: 100%; height: 5px; position: absolute;top:0" data-bind="trackCursor: edgeUnderCursor"></div>
<div class="dxrd-control dxd-selectable" style="width: 5px; height: 100%; position: absolute;left:0" data-bind="trackCursor: edgeUnderCursor"></div>
<div class="dxrd-control dxd-selectable" style="width: 5px; height: 100%; position: absolute;right:0" data-bind="trackCursor: edgeUnderCursor"></div>
<div class="dxrd-control dxd-selectable" style="width: 100%; height: 5px; position: absolute;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-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">
<!-- ko with: value -->
<div class="dx-field-label" data-bind="text: tableName"></div>
<!-- ko if: $data.filterString() !== null -->
<div class="dx-field-value" style="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-expressions-tab">
<div class="dxrd-properties-wrapper dxrd-expressions-tab" 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-selected-component">
<div class="dxrd-properties-focused-item" style="margin:0" data-bind="dxSelectBox: {
dataSource: $root.controlsStore.dataSource,
value: $root.editableObject,
displayExpr: function(value) {
var showValue = value || $root.editableObject();
return $root.dx.Designer.getControlFullName(showValue)
}
}">
</div>
</div>
</div>
</div>
<!-- /ko -->
<div class="dxrd-properties-grid" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true }" style="top: 80px">
<!-- ko template: 'dx-propertieseditor' -->
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</div>
</script>
<script type='text/html' id='dxrd-fieldlistwrapper'>
<div class="dxrd-fieldslist-wrapper" data-bind="visible: active() && visible()" style="height: 100%; overflow:hidden">
<!-- ko with: model -->
<div class="dxrd-right-panel-header">
<div class="dxrd-fieldslist-wrapper-header" data-bind="text: $root.getLocalization('Field List', 'ReportStringId.UD_Title_FieldList')"></div>
<div id="btn-add-dataSouce" class="dxrd-collectioneditor-action" style="line-height: 20px; margin-top: 8px" data-bind="dxButton: { onClick: showPopover, icon: 'dxrd-image-add-datasource', visible: addDataSourceBtnVisible }, attr: { title: $root.getLocalization('Add Data Source', 'ReportStringId.UD_Title_FieldList_AddNewDataSourceText') }">
</div>
<div class="dxrd-add-dataSource-popup-content" data-bind="dxPopover:{ width: 200, visible: popoverVisible, target: '#btn-add-dataSouce', title:$root.getLocalization('Add Data Source', 'ReportStringId.UD_Title_FieldList_AddNewDataSourceText') + ':' }">
<div data-bind="dxList: { dataSource: dataSourceListItems(), onItemClick: itemClickAction }">
<div data-options="dxTemplate : { name: 'item' }">
<div class="dxrd-list-item-ellipsis-text" data-bind="text: name, attr: { title: name }"></div>
</div>
</div>
</div>
</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" style="width:100%; height: 100%;"></div>
</div>
</div>
<!-- /ko -->
</div>
</script>
<script type='text/html' id='dxrd-line-content'>
<svg style="position:absolute; left:0; width:100%; 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-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() + 'px' : 'auto' }">
<div data-bind="dxTabs: { dataSource: tabs, selectedIndex: selectedIndex, showNavButtons: false }">
<div data-options="dxTemplate: { name: 'item' }">
<!-- ko if: icon -->
<div class="dx-icon" data-bind="css: icon, event: { mousedown: function(e) { $parent.removeTab(e); } }"></div>
<!-- /ko -->
<div class="dx-tab-title-wrapper">
<div class="dx-tab-title" data-bind="text: isDirty() ? displayName() + '*' : displayName(), title: displayName, style: { 'font-weight': isDirty() ? 'bold' : 'normal' }"></div>
</div>
</div>
</div>
</div>
</script>
<script type='text/html' id='dxrd-pagebreak-selection'>
<div class="dxrd-control dxrd-pagebreak" data-bind="visible: isSelected(), trackCursor: underCursor, css: {'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-locked': locked }, draggable: $root.dragHandler, styleunit: { 'width': position.width(), 'height': 3, 'top': position.top() - 1, left: position.left() }">
</div>
<div class="dxrd-control dxrd-pagebreak" data-bind="visible: !isSelected(), trackCursor: underCursor, styleunit: { 'width': position.width(), 'height': 3, 'top': position.top() - 1, left: position.left() }">
</div>
</script>
<script type='text/html' id='dxrd-pagebreak'>
<div class="dxrd-control dxd-selectable" style="border:none; 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-pivotgrid-field-selection'>
<div class="dxrd-pivot-field" data-bind="styleunit: { 'width': Math.max(position.width() / _context.zoom(), 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">
</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.Designer.Pivot.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.Designer.Pivot.SortBySummaryInfoCondition.createNew($parents[1].value()) }
}">
</div>
</div>
</script>
<script type='text/html' id='dxrd-pivotgrid-content'>
<div style="box-sizing: border-box; letter-spacing: normal; width:100%; height:100%" data-bind="styleunit: { lineHeight: contentSizes().height / _context.zoom() }">
<div class="dxrd-control-content" data-bind="style: contentCss" style="width: 100%; height: 100%">
<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': position.width() / _context.zoom() }">
<!-- 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': position.width() / _context.zoom() }">
<!-- 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': position.width() / _context.zoom() }">
<!-- 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': position.width() / _context.zoom() }">
<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" style="width: 100%; height: 100%; line-height:normal; overflow:hidden">
<div class="dxrd-pivot-content" style="width:100%; height:100%; 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': position.width() / _context.zoom() }">
<!-- 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': position.width() / _context.zoom() }">
<!-- 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': position.width() / _context.zoom() }">
<!-- 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': position.width() / _context.zoom() }">
<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" data-bind=" visible: !($data.selected() || $data.focused()), css: { 'dxrd-intersect': isIntersect, 'dxrd-locked': locked, 'dxrd-control-rtl': getControlModel().rtl() }, styleunit: position, trackCursor: underCursor">
<!-- ko template: 'dxrd-pivotgrid-selection-context' -->
<!-- /ko -->
</div>
<div class="dxrd-control" data-bind="visible: $data.selected() || $data.focused(), css: {'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked, 'dxrd-control-rtl': getControlModel().rtl() }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
<!-- ko template: 'dxrd-pivotgrid-selection-context' -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-report-dialog-template">
<div class="dxrd-reportdialog dx-editors dx-widget" data-bind="dxPopup: {
showTitle: true,
width: width,
height: height,
title: $root.getLocalization(title),
visible: visible,
toolbarItems: buttons,
showCloseButton: true,
container: container($element),
position: { of: container($element) }
}">
<!-- ko template: { name: template, data: model } -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-report-dialog-converter-template">
<div class="dxrd-reportdialog dxrd-reportdialog-converter dx-editors dx-widget" data-bind="dxPopup: {
showTitle: true,
minWidth: 530,
height: 250,
width: 'auto',
title: popupOptions.title,
visible: popupOptions.visible,
toolbarItems: popupOptions.buttons,
showCloseButton: true,
container: popupOptions.container($element),
position: { of: popupOptions.container($element) }
}">
<div class="dxrd-reportdialog-converter-content">
<div class="dxrd-image-exlamation-icons"></div>
<div class="dxrd-reportdialog-content-text">
<div class="dxrd-reportdialog-content-confirm-message" data-bind="text: popupOptions.confirmMessage"></div>
<a class="dxrd-reportdialog-toggle-link dxd-hyperlink-color dxd-text-accented" data-bind="text: popupOptions.linkText, attr: {href: popupOptions.linkUrl, target: '_blank' }"></a>
</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">
<div class="dx-field-label" data-bind="text: $root.getLocalization('Report', 'ASPxReportsStringId.DocumentViewer_RibbonReportGroupText') + ':'"></div>
<div class="dx-field-value" data-bind="dxTextBox: { value: $data.reportName }"></div>
</div>
</div>
<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, nextButtonText: $root.getLocalization('More', 'ASPxReportsStringId.List_More') }">
<div data-options="dxTemplate : { name: 'item' }">
<div data-bind="text: $data.Value"></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="dxrd-reportdialog-urls" data-bind="dxList: { dataSource: urls, selectedItems: [], editEnabled: true, height: 240, 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 }">
<div data-options="dxTemplate : { name: 'item' }">
<div data-bind="text: $data.Value"></div>
</div>
</div>
</div>
</script>
<script type='text/html' id='dxrd-report'>
<div class="dxrd-surface" data-bind="styleunit: { 'width': Math.min(pageWidth() + maxMarkerWidth(), $root.surfaceSize()) }, css: { 'dxrd-surface-rtl': rtl() }, click: function(surface, e) { $root.selection.clickHandler($root.selection.dropTarget ? null : surface, e); e.stopPropagation(); }, keyDownActions: $root.actionLists">
<div class="dxrd-content-panel-wrapper">
<div class="dxrd-content-panel" data-bind="styleunit: $root.dx['config']()['rtlEnabled'] ? {marginRight: maxMarkerWidth()} : { marginLeft: maxMarkerWidth() } ">
<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': pageWidthWithoutLeftMargin, left: ghostContainerOffset }">
<div class="dxrd-margin-resizable" data-bind="styleunit: { 'width': pageWidthWithoutLeftMargin }, resizable: leftMarginResizeOptions($root.undoEngine, $element)"></div>
<div data-bind="ruler: { 'zoom': zoom, 'length': pageWidthWithoutLeftMargin, '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(pageWidth(), $root.surfaceSize()) - maxMarkerWidth(), maxWidth: pageWidth(), maxHeight: effectiveHeight }, event: { scroll: function() { $root.onViewPortScroll($element) } }">
<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" style="position:absolute">
<!-- ko foreach: bands -->
<!-- ko template: { name: 'dxrd-band-coordinate-grid-selection', data: { surface: $data, width: $parent.margins.left } } -->
<!-- /ko -->
<!-- /ko -->
</div>
<div class="dxrd-flip">
<!-- ko foreach: bands -->
<!-- ko template: { name: 'dxrd-band-coordinate-grid', data: { surface: $data, width: $parent.margins.left, 'snapGridSize': $parent.snapGridSize } } -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
<div class="dxrd-ghost-containment" data-bind="styleunit: { left: ghostContainerOffset }">
<div class="dxrd-ghost-container" data-bind="styleunit: { 'width': pageWidthWithoutLeftMargin } ">
<div class="dxrd-bands-content dxrd-selection" data-bind="styleunit: { 'width': pageWidthWithoutLeftMargin }">
<div class="dxrd-bands-content-offset">
<div class="dxrd-leftMargin-resizable" data-bind="styleunit: { 'width': pageWidthWithoutLeftMargin }, resizable: leftMarginResizeOptions($root.undoEngine, $element)"></div>
<!-- ko foreach: bands -->
<!-- ko template: { name: 'dxrd-band-selection' } -->
<!-- /ko -->
<!-- /ko -->
<!-- ko foreach: crossBandControls -->
<!-- ko if: visible -->
<div class="dxrd-cross-band" data-bind="visible: isSelected() && !$root.dx.Designer.DragDropHandler.started(), css: {'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
</div>
<!-- /ko -->
<!-- /ko -->
<div class="dxrd-rightMargin-resizable" data-bind="styleunit: { left: rightMarginResizableOffset }, resizable: rightMarginResizeOptions($root.undoEngine, $element)"></div>
</div>
</div>
<div class="dxrd-bands-content dxrd-main">
<!-- ko foreach: bands -->
<!-- ko template: { name: 'dxrd-band' } -->
<!-- /ko -->
<!-- /ko -->
<!-- ko foreach: crossBandControls -->
<!-- ko if: visible -->
<!-- ko template: { name: template } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<svg style="height: 100%; position: absolute; top: 0; width: 1px; z-index:-1" data-bind="styleunit: { left: leftMarginOffset() }">
<line data-bind="attr: { x1: 0, x2: 0 }" y1="0" y2="100%" style="stroke: rgb(128, 128, 128); stroke-width: 0.5px; stroke-dasharray:5px,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%" style="stroke: rgb(220, 220, 220); stroke-width: 3px; stroke-dasharray:5px,5px" />
</svg>
<!-- ko template: { name: 'dxd-snap-lines-holder', data: $root.snapHelper } -->
<!-- /ko -->
<div class="dxrd-drag-helper-source" data-bind="styleunit: { top: $root.dragHelperContent.top, left: $root.dragHelperContent.left, width: $root.dragHelperContent.width, height: $root.dragHelperContent.height }, css: { 'dxrd-locked': $root.dragHelperContent.isLocked }">
<!-- ko foreach: $root.dragHelperContent.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: $root.dragHelperContent.customData() -->
<div data-bind="template: { name: $data.template, data: $data.data }"> </div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dxrd-bands-panel-wrapper">
<div class="dxrd-bands-panel">
<div class="dxrd-band-headers">
<!-- ko foreach: bands -->
<!-- ko template: { name: 'dxrd-band-vruler', data: { surface: $data, measureUnit: $parent.measureUnit } } -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
<div class="dxrd-hscroller-space"></div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-reportexplorerwrapper">
<div class="dxrd-fieldslist-wrapper" data-bind="visible: active() && visible()" style="height: 100%; overflow:hidden">
<div class="dxrd-right-panel-header">
<div class="dxrd-fieldslist-wrapper-header" data-bind="text: $root.getLocalization('Report Explorer', 'ReportStringId.UD_Title_ReportExplorer')"></div>
</div>
<!-- ko with: model-->
<div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: 'onHover', scrollByContent: false, bounceEnabled: false, useNative: false, scrollByThumb: true }, dxAutoScrolling: { active: $root.dx.Designer.DragDropHandler.started }">
<div id="tree" data-bind="treelist: { selectedPath: itemsProvider.selectedPath, itemsProvider: itemsProvider, treeListController: treeListController }" style="width:100%; 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-scripts-addon">
<!-- ko if: editorVisible -->
<div class="dxrd-designer-wrapper dx-editors" data-bind="css: { 'dx-rtl' : $root.rtl, 'dx-ltr': !$root.rtl }">
<div class="dxrd-toolbar-wrapper">
<div class="dxrd-toolbar" data-bind="template: { name: 'dxrd-toolbar-tmplt', data: toolbarItems }"></div>
</div>
<div class="dxrd-scripts-wrapper">
<div class="dxrd-scripts-editor" data-bind="dxAceEditor: { value: scriptsText, editorContainer: editorContainer, options: aceOptions }">
</div>
</div>
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-scripting-controlchooser">
<div class="dxrd-toolbar-item dxrd-toolbar-selectbox">
<div data-bind="dxSelectBox: { dataSource: controls, value: control, displayExpr: displayExpr, placeholder: $root.getLocalization('Select control...', 'ASPxReportsStringId.ReportDesigner_ScriptEditor_Toolbar_SelectControl'), width: '300px' }"></div>
<div class="dxrd-toolbar-item-separator" data-bind="visible: $data.hasSeparator"></div>
</div>
</script>
<script type="text/html" id="dxrd-scripting-eventchooser">
<div class="dxrd-toolbar-item dxrd-toolbar-selectbox">
<div data-bind="dxSelectBox: { items: events, value: event, placeholder: $root.getLocalization('Select event...', 'ASPxReportsStringId.ReportDesigner_ScriptEditor_Toolbar_SelectEvent'), width: '200px' }"></div>
<div class="dxrd-toolbar-item-separator" 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-shape-content'>
<img data-bind="attr: {src: imageSrc }, styleunit: { 'height': contentSizes().height / _context.zoom(), 'width': contentSizes().width / _context.zoom() }" />
<!-- ko if: $data.isLoading -->
<div class="dx-content-loading-panel">
<div data-bind="dxLoadIndicator: { visible: isLoading() }"></div>
</div>
<!-- /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': contentSizes().height / _context.zoom() }" style="position:absolute;">
</div>
</div>
<div data-bind="style: borderCss" style="width:100%; height: 100%; position:absolute; 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': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
</div>
<div class="dxrd-control" 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" style="width:100%; height: 100%; position:absolute; 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" data-bind="visible: !isSelected(), 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>
<div class="dxrd-table-control" data-bind="visible: selected() || focused(), css: { 'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position">
<!-- 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) { selectColumn($root.selection); e.stopPropagation(); }, visible: !$root.dx.Designer.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.Designer.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" style="visibility: visible" data-bind="trackCursor: underCursor, visible: !$root.dx.Designer.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) { selectColumn($root.selection); e.stopPropagation(); },visible: !$root.dx.Designer.DragDropHandler.started(), styleunit: { 'left': position.left, 'width': position.width }"></div>
<!-- /ko -->
<!-- /ko -->
</div>
<div class="dxrd-table-control" data-bind="visible: isSelected() && !(selected() || focused()), styleunit: position">
<!-- ko if: rows().length > 0 -->
<!-- ko foreach: rows()[0].cells -->
<div class="dxrd-table-column-selection dxrd-table-column-selection-top" data-bind="click: function(_, e) { selectColumn($root.selection); e.stopPropagation(); }, visible: !$root.dx.Designer.DragDropHandler.started(), styleunit: { 'left': position.left, 'width': position.width }"></div>
<!-- /ko -->
<!-- ko foreach: rows -->
<div class="dxrd-table-row-control" data-bind="visible: isSelected(), css: { 'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-locked': locked }, resizable: { starting: $root.resizeHandler.starting, stopped: $root.resizeHandler.stopped, handles: 'n,s', disabled: !(selected() || focused()), zoom: $root.surface().zoom }, styleunit: { 'top': position.top, 'height': position.height }">
<div class="dxrd-table-row-selection dxrd-table-row-selection-left" data-bind="visible: !$root.dx.Designer.DragDropHandler.started(), trackCursor: underCursor"></div>
<!-- ko foreach: cells -->
<div class="dxrd-table-cell-control" data-bind="trackCursor: underCursor, event: { dblclick: function() { $root.inlineTextEdit.show($element) } }, visible: isSelected, css: { 'dxrd-selected': selected, 'dxrd-focused': focused, 'dxrd-intersect': isIntersect, 'dxrd-locked': locked, 'dxrd-table-cell-over-rowSpan': rowSpan() === 0 }, resizable: { starting: $root.resizeHandler.starting, stopped: $root.resizeHandler.stopped, handles: 'e,w', disabled: !(selected() || focused()), zoom: $root.surface().zoom, snapHelper: $root.resizeHandler.snapHelper }, styleunit: { 'left': position.left, 'width': position.width, 'height': heightWithRowSpan }, style : { 'z-index': offsetZIndex() }">
<!-- 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.Designer.DragDropHandler.started(), trackCursor: underCursor"></div>
</div>
<div class="dxrd-table-row-control" data-bind="visible: !isSelected(), styleunit: { 'top': position.top, 'height': position.height }">
<div class="dxrd-table-row-selection dxrd-table-row-selection-left" data-bind="visible: !$root.dx.Designer.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.Designer.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.Designer.DragDropHandler.started(),click: function(_, e) { 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" style="width: 100%; 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': contentSizes().width / _context.zoom(), 'height': contentSizes().height / _context.zoom() }, 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" style="width: 100%; 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" data-bind="styleunit: { height: position.height, top: position.top, lineHeight: position.lineHeight}, css: adorntemplate" style="left: 0; width: 100%">
<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)} " style="height: 100%; position:absolute; box-sizing:border-box"></div>
<!-- /ko -->
<!-- ko if: !getControlModel().rtl() -->
<div data-bind="style: borderCss, styleunit: { left: position.left} " style="height: 100%; right: 0; position:absolute; box-sizing:border-box"></div>
<!-- /ko -->
<div class="dxrd-control-content-main" style="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': contentSizes().height / _context.zoom(), 'width': contentSizes().width / _context.zoom() }">
<div style="box-sizing: border-box; letter-spacing: normal; width:100%;height:100%;" data-bind="styleunit: { lineHeight: contentSizes().height / _context.zoom() }">
<!-- 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" data-bind="style: contentCss" style="width: 100%; height: 100%; line-height:inherit;">
<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" style="table-layout: fixed; width: 100%">
<tr>
<td data-bind="text: leaderSymbols" style="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" 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">
<!-- 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)" style="left:0; 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)" style="left:0; width:100%"></div>
<!-- /ko -->
</div>
<div class="dxrd-control" data-bind="visible: !isSelected(), styleunit: position, trackCursor: underCursor">
</div>
</script>
<script type="text/html" id="dxrd-reportRtlProperty">
<!-- ko if: !!$root.surface() -->
<!-- ko template: { name: $root.dx.Analytics.Widgets.editorTemplates.combobox.header, data: $root.surface().wrapRtlProperty($data, $root.undoEngine, $element) } -->
<!-- /ko -->
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-drag-helper-source-reportexplorer">
<div class="dxrd-drag-helper-source-reportexplorer">
<div class="dxrd-drag-helper-treelist-image" data-bind="css: imageClassName"></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-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 }">
<div data-options="dxTemplate:{ name:'stateItem' }" style="text-align: left;">
<div data-bind="text: name, styleunit: {marginLeft: 30 * level}"></div>
</div>
</div>
</div>
</script>
<script type='text/html' id='dxrd-textcontrol-content'>
<div style="box-sizing: border-box; letter-spacing: normal; width:100%" data-bind="styleunit: { lineHeight: contentSizes().height / _context.zoom() }">
<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" style="width:100%; height: 100%; position:absolute; box-sizing:border-box"></div>
<div data-bind="css: controlTypeClass" style="position: absolute; width: 24px; height: 24px; right: 5px; top: 5px;"></div>
<span class="dxrd-control-content" data-bind="text: displayName, style: contentCss"></span>
</div>
</script>
<script type="text/html">
</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 }"></div>
</script>
<script type="text/html" id="dxrd-reportSourceUrl">
<div data-bind="dxSelectBox: { items: $root.reportUrls, value: value, disabled: disabled, valueExpr: 'Key', displayExpr: 'Value' }"></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', displayExpr: 'displayValue', displayCustomValue: true, disabled: $parent.disabled }"></div>
<!-- /ko -->
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-datasource">
<div data-bind="dxSelectBox: { items: $root.dataSourceHelper() && $root.dataSourceHelper().usedDataSources, value: $root.dataSourceHelper() && $root.dataSourceHelper().dataSourceValue(value, $root.undoEngine), valueExpr: 'name', displayExpr: $root.dataSourceHelper() && $root.dataSourceHelper().dataSourceDisplayExpr, displayCustomValue: true, disabled: disabled }"></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') }"></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 }">
<div class="dxrd-group-header dx-accordion-header">
<div class="dxrd-formatting-rule-checkbox" data-bind="dxCheckBox: { value: value().selected, disabled: editor.disabled }, dxAction: function(args) { args.event.stopPropagation(); }"></div>
<div class="dxrd-formatting-rule-collapsed dx-collapsing-image" data-bind="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">
<div data-bind="dxPropertyGrid: { target: value, editorsInfo: { editors: $root.dx.Designer.Report.formattingRuleSerializationsInfo }, level: editor.level + 1, parentDisabled: editor.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 }, dxValidator: { validationRules: $data.validationRules || [] }"></div>
</script>
<script type="text/html" id="dxrd-style">
<div data-bind="dxSelectBox: new $root.dx.Designer.Report.StylesEditorHeaderModel(value, $root.styles(), disabled)"></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: {
displayValue: $displayName,
itemsProvider: $root.dataBindingsProvider(),
treeListController: $parent.treeListController,
value: $data.generateValue($root.undoEngine(), $root.dataSourceHelper(), $root.fieldListDataSources()),
disabled: $parent.disabled }"></div>
<!--/ko -->
<!--/ko -->
<!--/ko -->
</script>
<script type="text/html" id="dxrd-chartValueBinding">
<div data-bind="dxFieldListPicker: {
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: { 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">
<div class="dx-field-label dx-accordion-header" 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 } } -->
<!-- /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.Analytics.Localization.selectPlaceholder(), noDataText: $root.dx.Analytics.Localization.noDataText() }"></div>
</script>
<script type="text/html" id="dxrd-collection-item-group">
<div class="dx-field" data-bind="styleunit: { 'marginLeft' : $parents[1].padding }">
<div class="dx-field-label">
<div class="propertygrid-editor-displayName" data-bind="text: $parents[1].options.info().getChildCaption(index()) + ':'"></div>
</div>
<div class="dx-field-value">
<div class="dxrd-collectioneditor-action" data-bind="dxButton: { onClick: value().changeSortOrder, icon: value().sortOrderClass, disabled: editor.disabled }"></div>
<!-- ko displayNameExtender: { path: function() { return $data.editor._model() && $data.editor._model().getPath('groupFields') || '' }, dataMember: value().fieldName } -->
<div class="dxrd-collectioneditor-picker" data-bind="dxFieldListPicker: {
displayValue: $displayName,
value: value().fieldName,
path: editor._model() && editor._model().getPath('groupFields') || '',
itemsProvider: $root.dataBindingsProvider(),
treeListController: new $root.dx.Analytics.Widgets.TreeListController(),
disabled: editor.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.Designer.Report.LookUpValue.createNew, undoEngine: $root.undoEngine, level: level, displayName: $root.getLocalization(displayName), info: info }">
<div data-bind="dxPropertyGrid: { target: $data.value, level: editor.level + 1 }"></div>
</div>
</div>
</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-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().createParameter(); } }">
</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.Designer.Report.TableOfContentsLevel.createNew(_model()); } }">
</div>
</div>
</script>
<script type="text/html" id="dxrd-collectionItemWithAccordion">
<div class="dxrd-accordion-collection-item" data-bind="dxdAccordion: { collapsed: collapsed }">
<div class="dxrd-group-header dx-accordion-header">
<div data-bind="styleunit: {'paddingLeft': $parents[1].padding + $root.dx.Analytics.Widgets.propertiesGridEditorsPaddingLeft }">
<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: $root.getLocalization($parent.name), attr: { title: $root.getLocalization($parent.name) }"></div>
</div>
</div>
<div class="dx-accordion-content">
<div data-bind="dxPropertyGrid: { target: value, level: editor.level + 2, parentDisabled: editor.disabled }"></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 }), dxValidator: { validationRules: validationRules || [] }"></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: new $root.dx.Designer.Report.EditOptionsEditorNameEditorModel(value, disabled)"></div>
</script>
<script type="text/html" id="dxrd-editingField-editor-treelist-item">
<div class="dx-treelist-item" data-bind="styleunit: padding, css: { 'dx-treelist-item-selected': isSelected }">
<div class="dx-treelist-caption">
<div class="dx-treelist-selectedcontent" data-bind="click: toggleSelected">
<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: data.title }"></div>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dxrd-name">
<div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled }), dxValidator: { validationRules: generateRules($root.controlsHelper.allControls) || [] }"></div>
</script>
<script type="text/html" id="dxrd-reportexpression">
<!-- ko if: $data.patchOptions($root.reportExplorerProvider) -->
<div data-bind="dxExpressionEditor: getOptions({ options: value, fieldListProvider: $root.reportItemsProvider, displayNameProvider: $root.expressionDisplayNameProvider && $root.expressionDisplayNameProvider() })"></div>
<!-- /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="dxFileImagePicker: { value: value, format: format, useFormat: true, placeHolder: 'File', disabled: disabled, accept:'.rtf,.docx,.txt,.htm,.html' }"></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="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 class="dxrd-wizard-splitter">
<div class="dxrd-wizard-splitter-action" data-bind="dxButton: { onClick: select, disabled: !isSelectEnable(), icon: 'dxrd-image-moveright' }" style="margin-top: 40px"></div>
<div class="dxrd-wizard-splitter-action" data-bind="dxButton: { onClick: selectAll, disabled: !isSelectEnable(), icon: 'dxrd-image-moveright-all' }"></div>
<div class="dxrd-wizard-splitter-action" data-bind="dxButton: { onClick: unselect, disabled: !isUnselectEnable(), icon: 'dxrd-image-moveleft' }" style="margin-top: 44px"></div>
<div class="dxrd-wizard-splitter-action" data-bind="dxButton: { onClick: unselectAll, disabled: !isUnselectEnable(), icon: '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="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></script>
<script type='text/html' id='dxrd-page-customizeLabel'>
<div class="dxrd-wizard-page">
<div class="dxrd-wizard-customizelabel-page">
<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')"></span>
<div data-bind="dxSelectBox: { items: labelData.paperKinds, displayExpr: 'name', value: selectedPaperSize, itemTemplate: 'PaperSizeText',
onOpened: function (e) {
e.component._popup.option('width', 300);
}}, attr: { title: selectedPaperSize().name + ' - ' + $root.dx.Designer.Report.Wizard.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.Designer.Report.Wizard.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>
<span data-bind="text: $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')"></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')"></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')"></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')"></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')"></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')"></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')"></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">
<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" data-bind="dxScrollView: { showScrollbar: 'onHover', height: scrollViewHeight }">
<div data-bind="treelist: fieldListModel" style="width:100%; height: 100%;"></div>
</div>
</div></script>
<script type='text/html' id='dxrd-page-dataSource'>
<div class="dxrd-wizard-page">
<!-- ko if: isDataSourceCreationAvailable -->
<div style="margin-bottom: 15px" data-bind="dxRadioGroup: { value: selectedDataSourceOperation, items: dataSourceOperations, layout: 'vertical' }">
<div data-options="dxTemplate : { name: 'text' }">
<div data-bind="text: $data"></div>
</div>
</div>
<!-- /ko -->
<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.Analytics.Localization.noDataText() }">
<div data-options="dxTemplate : { name: 'item' }">
<div data-bind="text: name"></div>
</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="dxrd-wizard-list" data-bind="dxList: { dataSource: fields.items, selectedItems: fields.activeItemArray, height: 257, selectionMode: 'single', activeStateEnabled: false, onItemClick: fieldClick, noDataText: $root.dx.Analytics.Localization.noDataText() }">
<div data-options="dxTemplate : { name: 'item' }" data-bind="event: { dblclick: $parent.fieldDblClick }">
<div data-bind="text: $data"></div>
</div>
</div>
</div>
<div class="dxrd-wizard-splitter">
<div class="dxrd-wizard-splitter-action" data-bind="dxButton: { onClick: addNewGroup, disabled: !isCreateGroupEnabled(), icon: 'dxrd-image-moveright' }"></div>
<div class="dxrd-wizard-splitter-action" data-bind="dxButton: { onClick: appendFieldsToGroup, disabled: !isAppendToGroupEnabled(), icon: 'dxrd-image-add' }"></div>
<div class="dxrd-wizard-splitter-action" data-bind="dxButton: { onClick: removeGroup, disabled: !isRemoveGroupEnabled(), icon: 'dxrd-image-moveleft' }"></div>
<div class="dxrd-wizard-splitter-action" style="margin-top: 95px;" data-bind="dxButton: { onClick: moveUp, disabled: !isMoveUpEnabled(), icon: 'dxrd-image-moveup' }"></div>
<div class="dxrd-wizard-splitter-action" data-bind="dxButton: { onClick: moveDown, disabled: !isMoveDownEnabled(), icon: '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="dxrd-wizard-list" data-bind="dxList: { items: groups.items, height: 257, selectionMode: 'single', selectedItems: groups.activeItemArray, activeStateEnabled: false, onItemClick: groupClick, noDataText: $root.dx.Analytics.Localization.noDataText() }">
<div data-options="dxTemplate : { name: 'item' }" data-bind="event: { dblclick: $parent.groupDblClick }">
<div data-bind="text: fields().join(', ')"></div>
</div>
</div>
</div>
</div></script>
<script type='text/html' id='dxrd-page-masterdetail-groups'>
<div class="dxrd-wizard-page dxrd-wizard-masterdetail-groups-page">
<!-- ko template: { name: 'dxrd-wizard-report-tree', data: { items: $data.reportTree, value: $data.currentPath } }-->
<!-- /ko -->
<div class="dxrd-wizard-left-panel">
<div class="dxrd-wizard-list-title" data-bind="text: fieldCaption"></div>
<div class="dxrd-wizard-list" data-bind="dxList: { items: currentFields().items, selectedItems: currentFields().activeItemArray, height: 245, selectionMode: 'single', activeStateEnabled: false, onItemClick: fieldClick, noDataText: $root.dx.Analytics.Localization.noDataText() }">
<div data-options="dxTemplate : { name: 'item' }" data-bind="event: { dblclick: $parent.fieldDblClick }">
<div data-bind="text: $data"></div>
</div>
</div>
</div>
<div class="dxrd-wizard-splitter">
<div class="dxrd-wizard-splitter-action" data-bind="dxButton: { onClick: addNewGroup, disabled: !isCreateGroupEnabled(), icon: 'dxrd-image-moveright' }"></div>
<div class="dxrd-wizard-splitter-action" data-bind="dxButton: { onClick: appendFieldsToGroup, disabled: !isAppendToGroupEnabled(), icon: 'dxrd-image-add' }"></div>
<div class="dxrd-wizard-splitter-action" data-bind="dxButton: { onClick: removeGroup, disabled: !isRemoveGroupEnabled(), icon: 'dxrd-image-moveleft' }"></div>
<div class="dxrd-wizard-splitter-action" style="margin-top: 83px;" data-bind="dxButton: { onClick: moveUp, disabled: !isMoveUpEnabled(), icon: 'dxrd-image-moveup' }"></div>
<div class="dxrd-wizard-splitter-action" data-bind="dxButton: { onClick: moveDown, disabled: !isMoveDownEnabled(), icon: 'dxrd-image-movedown' }"></div>
</div>
<div class="dxrd-wizard-right-panel">
<div class="dxrd-wizard-list-title" data-bind="text: groupCaption"></div>
<div class="dxrd-wizard-list" data-bind="dxList: { items: currentGroups().items, height: 245, selectionMode: 'single', selectedItems: currentGroups().activeItemArray, activeStateEnabled: false, onItemClick: groupClick, noDataText: $root.dx.Analytics.Localization.noDataText() }">
<div data-options="dxTemplate : { name: 'item' }" data-bind="event: { dblclick: $parent.groupDblClick }">
<div data-bind="text: fields().join(', ')"></div>
</div>
</div>
</div>
</div></script>
<script type='text/html' id='dxrd-page-masterdetail-select-reportdata'>
<div class="dxrd-wizard-page dxrd-wizard-masterdetail-select-reportdata-page">
<div class="dxrd-wizard-reportdata-title" style="margin-right: 6px;" data-bind="text: selectDataMembersCaption"></div>
<div class="dxrd-wizard-reportdata-title" data-bind="text: selectDataFieldsCaption"></div>
<div class="dxrd-wizard-add-queries-page dxrd-wizard-masterdetail-dataMember" data-bind="dxScrollView: { showScrollbar: 'onHover', height: 318 }">
<div data-bind="treelist: dataMemberFieldListModel" style="width:100%; height: 100%;"></div>
</div>
<div class="dxrd-wizard-add-queries-page dxrd-wizard-masterdetail-fields" data-bind="dxScrollView: { showScrollbar: 'onHover', height: 318 }">
<div data-bind="treelist: fieldMemberFieldListModel" style="width:100%; height: 100%;"></div>
</div>
</div></script>
<script type='text/html' id='dxrd-page-masterdetail-summary'>
<div class="dxrd-wizard-page dxrd-wizard-masterdetail-summary-options-page">
<!-- ko template: { name: 'dxrd-wizard-report-tree', data: { items: $data.reportTree, value: $data.currentPath } }-->
<!-- /ko -->
<div class="dxrd-wizard-list-title" data-bind="text: selectFieldToSummaryCaption"></div>
<div class="dxrd-wizard-list" data-bind="dxScrollView: { showScrollbar: 'onHover', height: 211 }">
<div class="dxrd-wizard-summary-infos dxrd-wizard-summary-infos-paragraf">
<div class="dxrd-wizard-summary-infos-container" data-bind="text: fieldsCaprion"></div>
<div class="dxrd-wizard-summary-infos-container" data-bind="text: summaryFunctionCaption"></div>
<div class="dxrd-wizard-summary-infos-removebtn"></div>
</div>
<div data-bind="foreach: summaryInfos">
<div class="dxrd-wizard-summary-infos">
<div class="dxrd-wizard-summary-infos-container">
<div data-bind="dxSelectBox: { dataSource: $parent.displayedFields[$parent.currentPath()], itemTemplate: 'visibleItems', displayExpr: 'displayName', value: field, placeholder: $root.dx.Analytics.Localization.selectPlaceholder() }">
<div data-options="dxTemplate:{ name:'visibleItems' }" style="text-align: left;">
<!-- ko if: visible-->
<div data-bind="text: name"></div>
<!--/ko-->
</div>
</div>
</div>
<div class="dxrd-wizard-summary-infos-container">
<!-- ko template: { name: "dxrd-multivalue", data: $data } -->
<!--/ko-->
</div>
<div class="dxrd-wizard-summary-infos-removebtn">
<div data-bind="dxButton: { icon: 'close', onClick: function () { return $parent.removeSummaryInfo($data); }}"></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-reportLayoutType'>
<div class="dxrd-wizard-page dxrd-report-layout-type-page">
<div style="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="dxrd-report-layout-type-item" data-bind="event: { click: $parent.layoutTypeItemClick }, css: { selected: $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>
<!-- /ko -->
<div style="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" style="margin-bottom: 18px;" data-bind="text: $root.getLocalization('Title', 'ASPxReportsStringId.ReportDesigner_Wizard_ReportStyle_Title')"></div>
<div class="caption" style="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 style="width: 272px; position: relative; top: 38%; margin: 0 auto;">
<div style="margin-bottom: 5px;" data-bind="text: $root.getLocalization('Specify the report\'s title', 'ASPxReportsStringId.ReportDesigner_Wizard_ReportComplete_SpecifyTitle')"></div>
<div data-bind="dxTextBox: { value: reportTitle, width: 270 }"></div>
</div></script>
<script type='text/html' id='dxrd-page-reportType'>
<div class="dxrd-report-type-page">
<!-- ko foreach: reportTypeItems -->
<div data-bind="event: { click: $parent.itemClick }, css: { selected: $parent.IsSelected($data) }" class="dxrd-report-type-item">
<div data-bind="css: imageClassName" class="dxrd-report-type-image"></div>
<div data-bind="text: text, attr: { title: text }" class="dxrd-report-type-text"></div>
</div>
<!-- /ko -->
</div></script>
<script type='text/html' id='dxrd-page-selectPredefinedLabels'>
<div class="dxrd-wizard-page">
<div class="dxrd-wizard-selectlabelproduct-page">
<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 }"></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 }"></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">
<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" data-bind="dxScrollView: { }">
<div class="dxrd-wizard-summary-columns">
<!-- 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>