devexpress-reporting 24.2.6 → 25.1.1-alpha

package/dist/html/templates.html

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