devexpress-reporting
Version:
DevExpress Reporting provides the capability to develop a reporting application to create and customize reports.
957 lines (906 loc) • 103 kB
HTML
<!--
/**
* DevExpress HTML/JS Analytics Core (dx-designer.html)
* Version: 18.1.10
* Build date: 2019-03-10
* Copyright (c) 2012 - 2019 Developer Express Inc. ALL RIGHTS RESERVED
* License: https://www.devexpress.com/Support/EULAs/NetComponents.xml
*/
-->
<script type="text/html" id="dx-editor-addons">
<!-- ko if: visible -->
<div class="dxrd-editormenu-button" data-bind="dxAction: showPopup, css: editorMenuButtonCss"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dx-boolean">
<div class="propertygrid-editor-checkbox" data-bind="dxCheckBox: getOptions({ value: value, disabled: disabled }), dxValidator: { validationRules: validationRules || [] }"></div>
</script>
<script type="text/html" id="dx-boolean-select">
<div data-bind="dxLocalizedSelectBox: { dataSource: [ { val: true, text: $root.getLocalization('Yes', 'ASPxReportsStringId.ParametersPanel_True') }, { val: false, text: $root.getLocalization('No', 'ASPxReportsStringId.ParametersPanel_False') }], valueExpr: 'val', displayExpr: 'text', value: value, disabled: disabled }, dxValidator: { validationRules: validationRules || [] }"></div>
</script>
<script type="text/html" id="dx-commonCollection">
<div class="dx-editor" data-bind="visible: visible">
<div data-bind="dxCollectionEditor: { values: value, displayName: displayName, level: level, info: info }">
</div>
</div>
</script>
<script type="text/html" id="dx-commonCollectionItem">
<div data-bind="dxPropertyGrid: { target: value, level: editor.level + 1, parentDisabled: editor.disabled }"></div>
</script>
<script type="text/html" id="dx-color">
<div data-bind="dxColorBox: { value: value, editAlphaChannel: true, popupPosition: { collision: 'flipfit flipfit' }, disabled: disabled }"></div>
</script>
<script type="text/html" id="dx-combobox">
<div data-bind="dxLocalizedSelectBox: { dataSource: values, value: value, valueExpr: 'value', displayExpr: 'displayValue', displayCustomValue: true, disabled: disabled }, dxValidator: { validationRules: $data.validationRules || [] }"></div>
</script>
<script type="text/html" id="dx-combobox-editable">
<div data-bind="dxSelectBox: getOptions({ items: values, value: value, valueExpr: 'value', displayExpr: 'displayValue', editEnabled: true, disabled: disabled, placeholder: $root.dx.Analytics.Localization.selectPlaceholder() })"></div>
</script>
<script type="text/html" id="dx-combobox-undo">
<div data-bind="dxLocalizedSelectBox: { dataSource: values, value: generateValue($root.undoEngine), valueExpr: 'value', displayExpr: 'displayValue', displayCustomValue: true, disabled: disabled }, dxValidator: { validationRules: $data.validationRules || [] }"></div>
</script>
<script type="text/html" id="dx-property-editor">
<div class="dx-editor" data-bind="visible: visible">
<div class="dx-group" data-bind="dxdAccordion: { collapsed: collapsed }">
<div class="dx-editor-header">
<div class="dx-field">
<div class="dx-field-label dx-accordion-header" data-bind="styleunit: padding, css: { 'dx-accordion-empty': templateName === 'dx-emptyHeader' }">
<!-- ko if: isComplexEditor -->
<div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="css: { 'dx-image-expanded': !collapsed() }"></div>
<!-- ko if: !!$data.textToSearch -->
<div class="dx-group-header-font" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName }"></div>
<!-- /ko -->
<!-- ko ifnot: !!$data.textToSearch -->
<div class="dx-group-header-font" data-bind="text: displayName, attr: { 'title': displayName }"></div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: !isComplexEditor -->
<!-- ko if: !!$data.textToSearch -->
<div class="propertygrid-editor-displayName" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName }, style: { fontWeight: isPropertyModified() ? 'Bold' : ''}"></div>
<!-- /ko -->
<!-- ko ifnot: !!$data.textToSearch -->
<div class="propertygrid-editor-displayName" data-bind="text: displayName, attr: { 'title': displayName }, style: { fontWeight: isPropertyModified() ? 'Bold' : ''}"></div>
<!-- /ko -->
<!-- /ko -->
</div>
<div class="dx-field-value">
<div data-bind="service: { name: 'createEditorAddOn' }"></div>
<!-- ko if: templateName !== 'dx-emptyHeader' -->
<!-- ko lazy: { template: templateName } -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</div>
<!-- ko if: isComplexEditor -->
<div class="dx-editor-content dx-accordion-content">
<!-- ko if: (!$data.editorCreated || editorCreated) -->
<!-- ko template: contentTemplateName -->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-emptyHeader">
</script>
<script type="text/html" id="dx-date">
<div data-bind="dxDateBox: getOptions({ value: value, closeOnValueChange: true, type: 'datetime', disabled: disabled }), dxValidator: { validationRules: validationRules || [] }"></div>
</script>
<script type="text/html" id="dx-file">
<div data-bind="dxFileImagePicker: { value: value, placeHolder: 'File', disabled: disabled }"></div>
</script>
<script type="text/html" id="dx-modificators">
<div class="dx-font-content">
<div class="dx-field">
<div class="dx-field-label" data-bind="styleunit: { 'paddingLeft': padding }"></div>
<!-- ko with: value -->
<div class="dx-field-value">
<div class="dx-font-styles-content">
<div class="dx-font-style-button dx-image-fontstyle-bold" data-bind="css: { selected: bold(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!$parent.disabled()) { bold(!bold()); } }"></div>
<div class="dx-font-style-button dx-image-fontstyle-italic" data-bind="css: { selected: italic(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!$parent.disabled()) { italic(!italic()); } }"></div>
<div class="dx-font-style-button dx-image-fontstyle-underline" data-bind="css: { selected: underline(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!$parent.disabled()) { underline(!underline()); } }"></div>
<div class="dx-font-style-button dx-image-fontstyle-strikeout" data-bind="css: { selected: strikeout(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!$parent.disabled()) { strikeout(!strikeout()); } }"></div>
</div>
</div>
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-image">
<div data-bind="dxFileImagePicker: { value: value, placeHolder: 'Image', accept: 'image/*', type: 'img', disabled: disabled }"></div>
</script>
<script type="text/html" id="dx-numeric">
<div data-bind="dxNumberBox: getOptions({ value:value, showSpinButtons:true, disabled:disabled }), dxValidator: { validationRules: validationRules || [] }"></div>
</script>
<script type="text/html" id="dx-number-editor">
<div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled }), dxValidator: { validationRules: validationRules || [] }"></div>
</script>
<script type="text/html" id="dx-text">
<div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled }), dxValidator: { validationRules: validationRules || [] }"></div>
</script>
<script type="text/html" id="dx-string-array">
<div class="dx-field">
<div class="dx-string-array-container dx-texteditor dx-multiline">
<textarea class="dx-string-array-textarea dx-texteditor-input" data-bind="value: value, disable: disabled"></textarea>
</div>
</div>
</script>
<script type="text/html" id="dx-propertieseditor">
<div data-bind="css: { 'dx-rtl' : rtl }">
<div class="dx-editors">
<div class="dx-fieldset">
<!-- ko foreach: getEditors() -->
<!-- ko template: editorTemplate -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-objectEditorContent">
<!-- ko if: visible -->
<div data-bind="template: { name: 'dx-propertieseditor', data: viewmodel }"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dx-collectioneditor">
<div class="dx-collectioneditor">
<div data-bind="dxdAccordion: { collapsed: collapsed, alwaysShow: alwaysShow }">
<div class="dx-collectioneditor-header dx-accordion-header">
<div class="dx-editor-header">
<div class="dx-field">
<!-- ko if: showButtons-->
<div class="dx-collectioneditor-actions-wrapper">
<!-- ko if: isVisibleButton('delete') -->
<div class="dx-collectioneditor-action" data-bind="attr: { title: getDisplayTextButton('delete') }, dxButton: { onClick: remove, disabled: isDisabledButton('delete'), icon: 'dx-image-remove' }"></div>
<!-- /ko -->
<!-- ko if: isVisibleButton('add') -->
<div class="dx-collectioneditor-action" data-bind="attr: { title: getDisplayTextButton('add') }, dxButton: { onClick: add, disabled: isDisabledButton('add'), icon: 'dx-image-add' }"></div>
<!-- /ko -->
<div class="dx-collectioneditor-action-separator"></div>
<!-- ko if: isVisibleButton('down') -->
<div class="dx-collectioneditor-action" data-bind="attr: { title: getDisplayTextButton('down') }, dxButton: { onClick: down, disabled: isDisabledButton('down'), icon: 'dx-image-movedown' }"></div>
<!-- /ko -->
<!-- ko if: isVisibleButton('up') -->
<div class="dx-collectioneditor-action" data-bind="attr: { title: getDisplayTextButton('up') }, dxButton: { onClick: up, disabled: isDisabledButton('up'), icon: 'dx-image-moveup' }"></div>
<!-- /ko -->
</div>
<!-- /ko -->
<!-- ko if: displayName -->
<div class="dx-collectioneditor-header-text" data-bind="styleunit: { 'paddingLeft': padding }">
<div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="css: { 'dx-image-expanded': !collapsed() }"></div>
<div class="dx-group-header-font" data-bind="text: displayName, attr: { title: displayName }"></div>
</div>
<!-- /ko -->
</div>
</div>
</div>
<div class="dx-accordion-content">
<!-- ko if: values().length === 0 && showButtons -->
<div class="dx-collectioneditor-empty">
<span class="dx-collectioneditor-empty-text" data-bind="text: getDisplayTextEmptyArray()"></span>
</div>
<!-- /ko -->
<!-- ko if: values().length !== 0 -->
<div class="dx-collectioneditor-items" data-bind="foreach: values">
<div data-bind="with: $parent.createCollectionItemWrapper($parents[1], $index)">
<div class="dx-collectioneditor-item-container" data-bind="dxAction: $parents[1].select, css: { 'dx-collectioneditor-item-container-selected' : $parents[1].selectedIndex() === $index() }">
<div class="dx-collection-item"></div>
</div>
</div>
</div>
<!-- /ko -->
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-expressioneditor-main">
<div class="dx-expression-tree">
<!-- ko if: !aceAvailable -->
<div class="dx-expressioneditor-textarea" data-bind="dxTextArea: { value: textAreaValue, isValid: isValid, spellcheck: false, onKeyUp: function() { isValid(true); } }"></div>
<!-- /ko -->
<!-- ko if: aceAvailable -->
<div class="dx-expressioneditor-textarea" data-bind="dxAceEditor: { value: textAreaValue, editorContainer: editorContainer, theme: theme, options: aceOptions, additionalOptions: additionalOptions, callbacks: callbacks }"></div>
<!-- /ko -->
<div class="dx-expressioneditor-tools">
<!-- ko with: tools-->
<div class="dx-expressioneditor-tools-tabs">
<!-- ko foreach: toolBox-->
<div class="dx-expressioneditor-tools-tab" data-bind="style: { width: width }, visible: visible">
<!-- ko if: $data.templateName -->
<!-- ko template: { name: $data.templateName }-->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko-->
</div>
<!-- /ko-->
</div>
</div>
</script>
<script type="text/html" id="dx-expressioneditor">
<div>
<div class="no-margin-right" data-bind="dxEllipsisEditor: { value: displayValue, buttonAction: function() { popupVisible(true); }, disabled: disabled, isValid: modelValueValid }"></div>
<div class="dx-expressioneditor dx-popup-general" data-bind="dxPopup: {
showTitle: true,
title: title(),
visible: popupVisible,
toolbarItems: buttonItems,
showCloseButton: true,
fullScreen: false,
height: '600px',
width: '645px',
container: getPopupContainer($element),
position: { of: getPopupContainer($element)},
onShown: onShown
}">
<!-- ko if: popupVisible -->
<!-- ko template: "dx-expressioneditor-main" -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-expressioneditor-categories">
<div class="dx-expressioneditor-tools-tab-content-wrapper" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<!-- ko foreach: content -->
<!-- ko if: $data.templateName -->
<!-- ko template: $data.templateName-->
<!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $data.templateName -->
<div class="dx-expressioneditor-tools-tab-category" data-bind="css: {'dx-expressioneditor-state-selected': content.isSelected }, text: displayName, dxAction: function() { $parent.click($data.content) }">
</div>
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-expressioneditor-category-accordion">
<div class="dx-fieldset" style="margin: 0;">
<div data-bind="dxdAccordion: { collapsed: collapsed }">
<div class="dx-accordion-header dx-expressioneditor-tools-tab-accordion-header" data-bind="css: {'dx-expressioneditor-state-selected': $data.isSelected }, dxAction: function() { $data.updateContent($data.allItems(), $data.isSelected); $parent.click($data.content) }">
<div class=" dx-collapsing-image" data-bind="css: { 'dx-image-expanded': !collapsed() }" style="display:inline-block;"></div>
<span class="dx-expressioneditor-tools-tab-header" data-bind="text: displayName"></span>
</div>
<div class="dx-accordion-content">
<!-- ko foreach: items-->
<div class="dx-expressioneditor-tools-tab-item" data-bind="css: {'dx-expressioneditor-state-selected': isSelected }, text: $data.display, dxAction: function() { $parent.updateContent($data.data, $data.isSelected); $parents[1].click($parent.content); }"></div>
<!-- /ko -->
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-expressioneditor-description">
<div class="dx-expressioneditor-tools-tab-content-wrapper" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<div class="dx-expressioneditor-description" data-bind="text: content"></div>
</div>
</script>
<script type="text/html" id="dx-expressioneditor-fields">
<div class="dx-expressioneditor-tools-tab-content-wrapper" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<!-- ko if: fields -->
<div class="dx-treelist-wrapper" data-bind="treelist: fields"></div>
<!-- /ko -->
<!-- ko if: $data.parameters -->
<div class="dx-treelist-wrapper" data-bind="treelist: parameters"></div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-ee-treelist-item">
<div class="dx-treelist-item" data-bind="visible: visible, event: { dblclick: function() { actions[0].clickAction($element); }}, styleunit: padding, css: { 'dx-treelist-item-selected': isSelected }">
<div class="dx-treelist-item-images">
<div class="dx-treelist-collapsedbutton" data-bind="css: nodeImageClass, click: toggleCollapsed"></div>
<div class="dx-treelist-image" data-bind="css: imageClassName, attr: { title: text }"></div>
</div>
<div class="dx-treelist-caption">
<div class="dx-treelist-selectedcontent" data-bind="click: toggleSelected">
<div class="dx-treelist-text-wrapper">
<div class="dx-treelist-text" data-bind="text: text, attr: { title: text }"></div>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-expressioneditor-selectedcontent">
<!-- ko with: content -->
<!-- ko template: $data-->
<!-- /ko -->
<!-- /ko -->
</script>
<script type="text/html" id="dx-expressioneditor-collection">
<div class="dx-expressioneditor-tools-tab-content-wrapper" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<!-- ko foreach: $data -->
<div class="dx-expressioneditor-tools-tab-item" data-bind="text: $data.displayName || $data.text, dxAction: function() { $parents[2].click($data); }, event: { dblclick: function() { $parents[2].dblclick($data, $element); } }"></div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-expressioneditor-collection-function">
<div class="dx-expressioneditor-collection-function">
<div class="dx-expressioneditor-collection-function-search">
<div data-bind="dxTextBox: { value: textToSearch, showClearButton: true, valueChangeEvent: 'keyup', placeholder: $parents[2].searchPlaceholder() }"></div>
</div>
<div class="dx-expressioneditor-collection-function-items" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<!-- ko foreach: availableItems -->
<div class="dx-expressioneditor-tools-tab-item" data-bind="dxAction: function() { $parents[2].click($data); }, event: { dblclick: function() { $parents[2].dblclick($data, $element); } }, searchHighlighting: { text: $data.displayName || $data.text, textToSearch: $parent.textToSearch }"></div>
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-filtereditor-content">
<div class="dx-filtereditor-tree-container" data-bind="css: { 'advanced': advancedMode }">
<!-- ko template: 'dx-filtereditor-content-tree' -->
<!-- /ko -->
</div>
<div class="dx-filtereditor-text-container" data-bind="css: { 'advanced': advancedMode }, visible: textVisible">
<!-- ko template: 'dx-filtereditor-content-text'-->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-filtereditor-content-plain">
<div class="dx-filtereditor-plain-advanced" data-bind="dxCheckBox: { value: advancedMode, text: advancedModeText }"></div>
<div class="dx-filtereditor-plain-content" data-bind="style: { height: plainContentHeightPerc }">
<div class="dx-filtereditor-text-container" data-bind="css: { 'advanced': advancedMode }, style: { height: textContentHeightPerc }">
<!-- ko template: 'dx-filtereditor-content-text'-->
<!-- /ko -->
</div>
<div class="dx-filtereditor-tree-container" data-bind="css: { 'advanced': advancedMode }, style: { height: treeContentHeightPerc }">
<!-- ko template: 'dx-filtereditor-content-tree' -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-filtereditor-content-text">
<!-- ko if: !aceAvailable -->
<div class="dx-filtereditor-text" data-bind="dxTextArea: { value: displayValue, isValid: isValid, onInput: onInput, spellcheck: false }, cacheElement: { action: function(element) { cacheElement(element) } }"></div>
<!-- /ko -->
<!-- ko if: aceAvailable -->
<div class="dx-filtereditor-text dx-texteditor dx-textarea" data-bind="css: {'dx-invalid': !$data.isValid(), 'dx-state-focused': textFocused }">
<div class="dx-texteditor-container">
<div class="dx-filtereditor-ace" data-bind="dxAceEditor: { value: $data.displayValue, theme: helper.aceTheme, editorContainer: editorContainer, options: aceOptions, additionalOptions: additionalOptions }"></div>
<div class="dx-texteditor-buttons-container"></div>
</div>
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dx-filtereditor-content-tree">
<div class="dx-filtereditor-tree" data-bind="dxScrollView: { showScrollbar: 'onHover', direction: 'both' }">
<!-- ko with: operandSurface -->
<!-- ko template: { name: $data.templateName, data: $data}-->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- ko ifnot: isSurfaceValid -->
<div class="dx-filtereditor-tree-lockscreen" data-bind="dxAction: function() { $data.advancedMode(true); }">
<div class="dx-filtereditor-tree-lockscreen-content">
<div class="dx-filtereditor-tree-lockscreen-content-text" data-bind="text: invalidMessage()">
</div>
</div>
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dx-filtereditor">
<div>
<div class="no-margin-right" data-bind="dxEllipsisEditor: { value: modelDisplayValue, isValid: modelValueIsValid, disabled: options().disabled, buttonAction: function() { popupVisible(true); } }"></div>
<!-- ko template: 'dx-filtereditor-popup' -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-filtereditor-advanced">
<div class="dx-filtereditor" style="width: 100%; height: 100%;" data-bind="style: { pointerEvents: $data.options().disabled() ? 'none' : '' }">
<!-- ko template: 'dx-filtereditor-content' -->
<!-- /ko -->
<!-- ko template: 'dx-filtereditor-content-popups' -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-filtereditor-plain">
<div class="dx-filtereditor" style="width: 100%; height: 100%;" data-bind="style: { pointerEvents: $data.options().disabled() ? 'none' : '' }">
<!-- ko template: 'dx-filtereditor-content-plain' -->
<!-- /ko -->
<!-- ko template: 'dx-filtereditor-content-popups' -->
<!-- /ko -->
</div>
</script>
<script id="dx-filtereditor-aggregate-common" type="text/html">
<!-- ko with: property-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
<div data-bind="service: { name: 'createChangeType' }"></div>
<!-- ko if: $data.aggregatedExpression() -->
<div class="criteria-operator-text">(</div>
<!-- ko with: aggregatedExpression-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
<div class="criteria-operator-text">)</div>
<!-- /ko -->
</script>
<script id="dx-filtereditor-aggregate" type="text/html">
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-action" data-bind="dxAction: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"></div>
</div>
<!-- ko template: { name: 'dx-filtereditor-aggregate-common' }-->
<!-- /ko -->
</div>
<div class="criteria-operator-content">
<!-- ko with: condition-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script>
<script id="dx-filtereditor-between" type="text/html">
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-action" data-bind="dxAction: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"></div>
</div>
<!-- ko with: property-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
<div data-bind="service: { name: 'createChangeType' }"></div>
<!-- ko with: begin-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
<div class="criteria-operator-text">and</div>
<!-- ko with: end-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script>
<script id="dx-filtereditor-binary" type="text/html">
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-action" data-bind="dxAction: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"></div>
</div>
<!-- ko with: leftOperand-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
<div data-bind="service: { name: 'createChangeType' }"></div>
<!-- ko with: rightOperand-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script>
<script id="dx-filtereditor-common" type="text/html">
<!-- ko template: contentTemplateName -->
<!-- /ko -->
<!-- ko if: $data.leftPart && $data.leftPart.condition -->
<div class="criteria-operator-content">
<!-- ko with: leftPart-->
<!-- ko with: condition-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
</script>
<script id="dx-filtereditor-function-lightweight" type="text/html">
<div class="criteria-operator-text" data-bind="css: css">
<div class="criteria-operator-text" data-bind="text: displayType"></div>
<div data-bind="service: { name: 'createChangeValueType' }"></div>
</div>
</script>
<script id="dx-filtereditor-function" type="text/html">
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-action" data-bind="dxAction: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"></div>
</div>
<!-- ko template: { name: $data.leftPart.templateName, data: $data.leftPart }-->
<!-- /ko -->
<div data-bind="service: { name: 'createChangeType' }"></div>
<!-- ko foreach: rightPart -->
<!-- ko template: { name: $data.templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script>
<script id="dx-filtereditor-group" type="text/html">
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-action" data-bind="dxAction: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"></div>
</div>
<div class="criteria-operator-item">
<div data-bind="service: { name: 'createChangeType' }"></div>
</div>
<div data-bind="service: { name: 'createAddButton' }"></div>
</div>
<div class="criteria-operator-content">
<!-- ko foreach: operands -->
<!-- ko template: { name: templateName, data: $data } -->
<!-- /ko-->
<!-- /ko -->
</div>
</div>
</script>
<script id="dx-filtereditor-in" type="text/html">
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-action" data-bind="dxAction: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"></div>
</div>
<!-- ko with: criteriaOperator-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
<div data-bind="service: { name: 'createChangeType' }"></div>
<!-- ko if: $data.operands().length > 1-->
<div class="criteria-operator-item criteria-operator-text">(</div>
<div class="criteria-operator-item">
<!-- ko foreach: $data.operands() -->
<!-- ko template: { name: $data.templateName, data: $data }-->
<!-- /ko -->
<div class="criteria-operator-item criteria-operator-text">,</div>
<!-- /ko -->
</div>
<div class="criteria-operator-item criteria-operator-text">)</div>
<!-- /ko -->
<!-- ko if: $data.operands().length == 1-->
<!-- ko template: { name: $data.operands()[0].templateName, data: $data.operands()[0] }-->
<!-- /ko -->
<!-- /ko -->
<div class="criteria-operator-action" data-bind="dxAction: addValue">
<div class="criteria-operator-action-image dx-image-filtereditor-add"></div>
</div>
</div>
</div>
</script>
<script id="dx-filtereditor-parameter" type="text/html">
<div class="criteria-operator-text" data-bind="css: css">
<div data-bind="service: { name: 'createChangeParameter' }"></div>
<!-- ko if: $data.canChange -->
<div data-bind="service: { name: 'createChangeValueType' }"></div>
<!-- /ko -->
</div>
</script>
<script id="dx-filtereditor-property" type="text/html">
<div class="criteria-operator-text" data-bind="css: css">
<div data-bind="service: { name: 'createChangeProperty' }"></div>
<!-- ko if: $data.canChange -->
<div data-bind="service: { name: 'createChangeValueType' }"></div>
<!-- /ko -->
</div>
</script>
<script id="dx-filtereditor-unary" type="text/html">
<!-- ko if: $data.operand().reverse -->
<!-- ko template: {name: $data.operand().templateName, data: $data.operand() }-->
<!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $data.operand().reverse -->
<div class="criteria-operator-group">
<div class="criteria-operator-group-item">
<div class="criteria-operator-action" data-bind="dxAction: function() { $data.remove && $data.remove(); }">
<div class="criteria-operator-action-image dx-image-filtereditor-remove" data-bind="visible: !!$data.canRemove"></div>
</div>
<!-- ko with: operand-->
<div class="criteria-operator-item">
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
</div>
<!-- /ko -->
<div data-bind="service: { name: 'createChangeType' }"></div>
</div>
</div>
<!-- /ko -->
</script>
<script id="dx-filtereditor-not" type="text/html">
<!-- ko with: operand-->
<!-- ko template: { name: templateName, data: $data }-->
<!-- /ko -->
<!-- /ko -->
</script>
<script id="dx-filtereditor-value" type="text/html">
<div class="criteria-operator-item" data-bind="visible: isEditable">
<!-- ko if: $data.items.length === 0 -->
<!-- ko if: $data.specifics() === "string" || $data.specifics() === "guid" -->
<div class="criteria-operator-item-editor" data-bind="dxTextBox: { value: _value, onFocusOut: function() { isEditable(false); } }, focus: { on: isEditable }"></div> <!-- /ko -->
<!-- ko if: $data.specifics() === "bool" -->
<div class="criteria-operator-item-editor" data-bind="focus: isEditable, dxLocalizedSelectBox: { dataSource: [ { val: 'True', text: 'Yes', localizationId: 'ASPxReportsStringId.ParametersPanel_True' }, { val: 'False', text: 'No', localizationId: 'ASPxReportsStringId.ParametersPanel_False' }], valueExpr: 'val', displayExpr: 'text', value: _value, onFocusOut: function() { isEditable(false); } }"></div>
<!-- /ko -->
<!-- ko if: $data.specifics() === "date" -->
<div class="criteria-operator-item-editor" data-bind="focus: isEditable, dxDateBox: { value: _value, closeOnValueChange: true, type: 'date', onFocusOut: function() { isEditable(false); } }"></div>
<!-- /ko -->
<!-- ko if: $data.specifics() !== "string" && $data.specifics() !== "bool" && $data.specifics() !== "date" && $data.specifics() !== "guid" -->
<div class="criteria-operator-item-editor" data-bind="dxTextBox: getNumberEditorOptions(), focus: { on: isEditable }"></div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: $data.items.length > 0 && typeof $data.items[0] === "object" -->
<div class="criteria-operator-item-editor" data-bind="focus: isEditable, dxSelectBox: { value: _value, dataSource: items, valueExpr: 'value', displayExpr: 'display', searchEnabled: true, onFocusOut: function() { isEditable(false); }}"></div>
<!-- /ko -->
<!-- ko if: $data.items.length > 0 && typeof $data.items[0] !== "object" -->
<div class="criteria-operator-item-editor" data-bind="focus: isEditable, dxSelectBox: { value: _value, dataSource: items, acceptCustomValue: true, searchEnabled: true, onFocusOut: function() { isEditable(false); }}"></div>
<!-- /ko -->
</div>
<div class="criteria-operator-text criteria-operator-item-value" data-bind="visible: !isEditable()">
<div class="criteria-operator-text clickable" data-bind="text: value, click: function() { isEditable(true); }, css: { 'default': $data.isDefaultDisplay() } "></div>
<div data-bind="service: { name: 'createChangeValueType' }"></div>
</div>
</script>
<script type="text/html" id="dx-filtereditor-popup">
<div class="dx-filtereditor dx-popup-general" data-bind="dxPopup: {
showTitle: true,
width: '95%',
height: '95%',
title: options() && options().title(),
visible: popupVisible,
onShown: function() { $data.focusText() },
toolbarItems: buttonItems,
showCloseButton: true,
container: getPopupContainer($element),
position: { of: getPopupContainer($element) }
}">
<!-- ko template: 'dx-filtereditor-content' -->
<!-- /ko -->
</div>
<!-- ko template: 'dx-filtereditor-content-popups' -->
<!-- /ko -->
</script>
<script type="text/html" id="dx-filtereditor-create">
<div class="criteria-operator-action" data-bind="dxAction: showPopup">
<div class="criteria-operator-action-image dx-image-filtereditor-add"></div>
</div>
</script>
<script type="text/html" id="dx-filtereditor-change">
<div class="criteria-operator-text clickable" data-bind="text: target.displayType, dxAction: showPopup, css: target.css"></div>
</script>
<script type="text/html" id="dx-filtereditor-changeParameter">
<div class="criteria-operator-text clickable " data-bind="text: target.parameterName(), dxAction: showPopup, css: { 'selected': target.isSelected }"></div>
</script>
<script type="text/html" id="dx-filtereditor-changeProperty">
<div class="criteria-operator-text clickable" data-bind="text: target.displayName, dxAction: showPopup, css: { 'selected': target.isSelected }"></div>
</script>
<script id="dx-filtereditor-changeValueType" type="text/html">
<div class="criteria-operator-action" data-bind="dxAction: showPopup">
<div class="criteria-operator-action-image-edit dx-image-filtereditor-edit"></div>
</div>
</script>
<script type="text/html" id="dx-filtereditor-content-popups">
<div class="dx-selectbox-popup-wrapper dx-dropdownlist-popup-wrapper dx-filtereditor-criteriaoperator-popup dx-dropdowneditor-overlay" data-bind="dxPopupWithAutoHeight: { width: '170px', height: '300px', focusStateEnabled: false,
position: $data.rtl ? { my: 'right top', at: 'right bottom', of: popupService.target} : { my: 'left top', at: 'left bottom', of: popupService.target },
container: options().popupContainer,
target: popupService.target,
showTitle: false,
showCloseButton: false,
animation: {},
closeOnOutsideClick: true,
shading: false,
visible: popupService.visible }">
<!-- ko with: popupService-->
<!-- ko with: data -->
<!-- ko template: template-->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-filtereditor-popup-common">
<div class="dx-widget" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<!-- ko foreach: data -->
<!-- ko if: !$data.hidden -->
<div class="dx-filtereditor-popup-item dx-item dx-list-item">
<span class="dx-item-content dx-list-item-content" data-bind="text: $data.displayText || $data.name, click: function() { $parent.click($data); } "></span>
</div>
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-filtereditor-popup-treelist">
<div class="dx-widget" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<div class="dx-treelist-wrapper" data-bind="treelist: data"></div>
</div>
</script>
<script type="text/html" id="dx-format-string-list">
<div class="dx-format-string-list">
<div data-bind="dxList: { items: $data.items, selectedItems: $data.selectedItems, onItemClick: $data.action, selectionMode: 'single', activeStateEnabled: false }">
<div data-options="dxTemplate: { name: 'item' }">
<div class="dx-image-filtereditor-remove" data-bind="click: $parent.removeItem, visible: $data.canRemove"></div>
<div class="dx-format-string-list-item" data-bind="text: $data.displayName"></div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-format-string-edit-area">
<div class="dx-format-string-content-area-title" data-bind="text: getDisplayText('types')"></div>
<div class="dx-format-string-formats">
<!-- ko template: { name: 'dx-format-string-list', data: { items: patternList, action: setFormat, removeItem: removeCustomFormat, selectedItems: selectedFormats } } -->
<!-- /ko -->
<div class="dx-format-string-customization">
<div class="dx-format-string-customization-add" data-bind="dxButton:{ onClick: addCustomFormat, text: getDisplayText('add'), disabled: !canAddCustomFormat() }"></div>
<div class="dx-format-string-customization-value dx-format-string-value" data-bind="dxTextBox: { value: formatResult, onInput: function(e) { updateInputText('formatResult', e.component); } }"></div>
</div>
</div>
</script>
<script type="text/html" id="dx-format-string-edit-area-general">
<div class="dx-format-string-content-area-title" data-bind="text: getDisplayText('prefix')"></div>
<div class="dx-format-string-customization-general-value dx-format-string-value" data-bind="dxTextBox: { value: formatPrefix, onInput: function(e) { updateInputText('formatPrefix', e.component); } }"></div>
<div class="dx-format-string-content-area-title" data-bind="text: getDisplayText('suffix')"></div>
<div class="dx-format-string-customization-general-value dx-format-string-value" data-bind="dxTextBox: { value: formatSuffix, onInput: function(e) { updateInputText('formatSuffix', e.component); } }"></div>
</script>
<script type="text/html" id="dx-format-string">
<div>
<div class="no-margin-right" data-bind="dxEllipsisEditor: { value: value, disabled: disabled, buttonAction: function() { popupVisible(true); } }"></div>
<div class="dx-format-string dx-popup-general" data-bind="dxPopup: {
showTitle: true,
width: '95%',
height: '95%',
minWidth: 650,
title: getDisplayText('title'),
visible: popupVisible,
toolbarItems: buttonItems,
showCloseButton: true,
container: getPopupContainer($element),
position: { of: getPopupContainer($element) }
}">
<div class="dx-format-string-content">
<div class="dx-format-string-content-area-left">
<div class="dx-format-string-content-area-title" data-bind="text: getDisplayText('category')"></div>
<!-- ko template: { name: 'dx-format-string-list', data: { items: types, action: setType, selectedItems: selectedTypes } } -->
<!-- /ko -->
</div>
<div class="dx-format-string-content-area-right">
<!-- ko if: !isGeneralType -->
<!-- ko template: 'dx-format-string-edit-area' -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: isGeneralType -->
<!-- ko template: 'dx-format-string-edit-area-general' -->
<!-- /ko -->
<!-- /ko -->
<div class="dx-format-string-preview-area" data-bind="css: { 'dx-format-general': isGeneralType }">
<div class="dx-format-string-preview-area-caption" data-bind="text: getDisplayText('preview')"></div>
<div class="dx-format-string-preview-value">
<span class="dx-format-string-preview-value-inner" data-bind="text: previewString"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-treelist-item-actions">
<!-- ko foreach: actions -->
<!-- ko if: $data.templateName -->
<!-- ko template: templateName -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: !$data.templateName -->
<div class="dx-treelist-action" data-bind="dxButton: { onClick: function() { clickAction($parent); }, icon: imageClassName, visible: (ko.unwrap($data.visible) == undefined) || ko.unwrap($data.visible), disabled: $data.disabled && $data.disabled() }, attr: { title: $data.displayText && $data.displayText() || text }"></div>
<!-- /ko -->
<!-- /ko -->
</script>
<script type="text/html" id="dx-treelist-edit-action">
<div class="dx-treelist-action-edit dx-accordion-button" data-bind="dxButton: { icon: 'dx-image-edit', onClick: function() { $parent.collapsed(!$parent.collapsed()); } }, visible: $parent.hasContent, attr: { title: $data.displayText() }"></div>
</script>
<script type="text/html" id="dx-treelist-item-actions-with-edit">
<!-- ko template: 'dx-treelist-item-actions' -->
<!-- /ko -->
<!-- ko template: { name: 'dx-treelist-edit-action', data: treeListEditAction() } -->
<!-- /ko -->
</script>
<script type="text/html" id="dx-treelist-item">
<div data-bind="visible: visible">
<!-- ko if: hasContent -->
<!-- ko template: "dx-treelist-accordion-item" -->
<!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: hasContent -->
<!-- ko template: "dx-treelist-header-item" -->
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-treelist-accordion-item">
<div data-bind="dxdAccordionExt: { collapsed: collapsed, lazyContentRendering: true }">
<!-- ko template: "dx-treelist-header-item" -->
<!-- /ko -->
<div class="dx-fieldset dx-accordion-content">
<!-- ko with: data -->
<!-- ko template: { name: contenttemplate } -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-treelist-header-item">
<div class="dx-treelist-item" data-bind="event: { dblclick: function() { $data.dblClickHandler ? $data.dblClickHandler($data) : $data.toggleCollapsed() } }, styleunit: padding, css: { 'dx-treelist-item-selected': isSelected() || isMultiSelected() }">
<!--<div class="dx-treelist-item-images">-->
<div class="dx-treelist-collapsedbutton" data-bind="css: nodeImageClass, click: toggleCollapsed"></div>
<!--</div>-->
<div class="dx-treelist-caption">
<!-- ko if: actions && actions.length > 0 -->
<div class="dx-treelist-action-container" data-bind="visible: isSelected">
<!-- ko template: actionsTemplate() -->
<!-- /ko -->
</div>
<!-- /ko -->
<div class="dx-treelist-selectedcontent" data-bind="click: toggleSelected, draggable: isDraggable ? dragDropHandler : null">
<div class="dx-treelist-image" data-bind="css: imageClassName, attr: { title: text }"></div>
<div class="dx-treelist-text-wrapper">
<div class="dx-treelist-text" data-bind="text: text, attr: { title: text }"></div>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-treelist-item-with-hover">
<div data-bind="visible: visible">
<!-- ko if: hasContent -->
<!-- ko template: "dx-treelist-accordion-item-with-hover" -->
<!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: hasContent -->
<!-- ko template: "dx-treelist-header-item-with-hover" -->
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-treelist-accordion-item-with-hover">
<div data-bind="dxdAccordionExt: { collapsed: collapsed, lazyContentRendering: true }">
<!-- ko template: "dx-treelist-header-item-with-hover" -->
<!-- /ko -->
<div class="dx-fieldset dx-accordion-content">
<!-- ko with: data -->
<!-- ko template: { name: contenttemplate } -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-treelist-header-item-with-hover">
<div class="dx-treelist-item" data-bind="event: {
dblclick: function() { $data.dblClickHandler ? $data.dblClickHandler($data) : $data.toggleCollapsed() },
mouseenter: mouseenter,
mouseleave: mouseleave
}, styleunit: padding, css: { 'dx-treelist-item-selected': isSelected() || isMultiSelected() }">
<!--<div class="dx-treelist-item-images">-->
<div class="dx-treelist-collapsedbutton" data-bind="css: nodeImageClass, click: toggleCollapsed"></div>
<!--</div>-->
<div class="dx-treelist-caption">
<!-- ko if: actions && actions.length > 0 -->
<div class="dx-treelist-action-container" data-bind="visible: $data.isSelected() || $data.isHovered()">
<!-- ko template: actionsTemplate() -->
<!-- /ko -->
</div>
<!-- /ko -->
<div class="dx-treelist-selectedcontent" data-bind="click: toggleSelected, draggable: isDraggable ? dragDropHandler : null">
<div class="dx-treelist-image" data-bind="css: imageClassName, attr: { title: text }"></div>
<div class="dx-treelist-text-wrapper">
<div class="dx-treelist-text" data-bind="text: text, attr: { title: text }"></div>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-treelist">
<div class="dx-treelist">
<!-- ko foreach: items -->
<!-- ko lazy: { resolver: resolver, innerBindings: { template: templateName } } -->
<!-- /ko -->
<div data-bind="visible: !collapsed()">
<!-- ko template: { name: 'dx-treelist', data: $data } -->
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-borders">
<div class="dxrd-bordereditor" data-bind="dxBorderEditor: { value: value }"></div>
</script>
<script type="text/html" id="dxrd-colorpicker">
<div data-bind="dxColorBox: { value: displayValue, editAlphaChannel: true, popupPosition: { collis