devexpress-reporting 22.2.2-beta → 22.2.3

package/dist/html/templates.html

@@ -353,15 +353,25 @@
             <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' }"
-                     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.customTemplate-->
-                    <!--ko template: $data.customTemplate-->
+                <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>
@@ -450,16 +460,22 @@
     <div class="dxrd-editormenu-boxes">
         <!-- ko foreach: $data -->
             <!-- ko if: $data.visible -->
-            <!-- 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 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>
@@ -545,7 +561,7 @@
 </script>
 
 <script type="text/html" id="dx-combobox-editable">
-    <div data-bind="dxSelectBox: getOptions({ items: values, value: value, valueExpr: 'value', displayExpr: 'displayValue', disabled: disabled, useItemTextAsTitle: true, placeholder: $root.dx._static.selectPlaceholder(), noDataText: $root.dx._static.noDataText(), acceptCustomValue: true, onCustomItemCreating: function(arg) { return { value: arg.text, displayValue: arg.text }; }, dropDownOptions: { container: $root.getPopupContainer($element) } })"></div>
+    <div data-bind="dxSelectBox: getOptions({ items: values, value: value, valueExpr: 'value', displayExpr: 'displayValue', disabled: disabled, useItemTextAsTitle: true, placeholder: $root.dx._static.selectPlaceholder(), noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, acceptCustomValue: true, onCustomItemCreating: function(arg) { return { value: arg.text, displayValue: arg.text }; }, dropDownOptions: { container: $root.getPopupContainer($element) } })"></div>
 </script>
 
 <script type="text/html" id="dx-combobox-undo">
@@ -760,6 +776,10 @@
 
 <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(),
@@ -1191,6 +1211,10 @@
 </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,
@@ -2640,7 +2664,7 @@
     </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() }">
+        <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>
@@ -2668,7 +2692,7 @@
 
 <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(), searchEditorOptions: { placeholder: $root.dx._static.searchPlaceholder() } }">
+        <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>
@@ -2979,7 +3003,7 @@
     <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(), searchEditorOptions: { placeholder: $root.dx._static.searchPlaceholder() } }">
+        <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>
@@ -3030,7 +3054,7 @@
 
 <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(), searchEditorOptions: { placeholder: $root.dx._static.searchPlaceholder() } }">
+        <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>
@@ -3124,7 +3148,7 @@
 <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(), searchEditorOptions: { placeholder: $root.dx._static.searchPlaceholder() } }">
+            <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>
@@ -3152,7 +3176,7 @@
 <script type="text/html" id="dxrd-procedures-control">
     <div style="margin-top: 20px" class="dx-editquery-editor" 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() }">
+        <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>
@@ -3230,6 +3254,10 @@
 
 <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 : '',
@@ -3707,7 +3735,7 @@
         <!-- ko if: searchText().length -->
         <div class="dx-accessibility-container-background dxd-back-accented"></div>
         <div class="dxrdp-search-loading" data-bind="dxLoadIndicator: { visible: $data.loading }"></div>
-        <div class="dxrd-preview-search-result dxd-border-accented" data-bind="dxList: { dataSource: searchResultDataSource, pageLoadMode: 'scrollBottom', focusStateEnabled:false, hoverStateEnabled:false, onItemRendered: onItemRendered, noDataText:  loading() ? '' : noResultText(), visible: !loading() }">
+        <div class="dxrd-preview-search-result dxd-border-accented" data-bind="dxList: { dataSource: searchResultDataSource, pageLoadMode: 'scrollBottom', focusStateEnabled:false, hoverStateEnabled:false, onItemRendered: onItemRendered, noDataText:  loading() ? '' : noResultText(), encodeNoDataText: true, visible: !loading() }">
             <div class="dxrd-preview-search-result-item dxd-list-item-back-color dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented"
              data-bind="dxAction: { model: $data, action: $parent.itemClickAction }, attr: {'aria-label': $data.data.text + ', ' + $root.dx._static.formatSearchResult($data.data) + ', ' + ($parent.searchResult().indexOf($data.data) + 1) + ' of ' + $parent.searchResult().length }" 
              data-options="dxTemplate : { name: 'item' }"
@@ -4139,7 +4167,7 @@
         <!-- /ko -->
     </div>
 </script><script type="text/html" id="dx-selectbox">
-    <div data-bind="dxSelectBox: getOptions({ dataSource: values, value: value, valueExpr: 'value', displayExpr: 'displayValue', displayCustomValue: true, disabled: disabled, useItemTextAsTitle: true, noDataText: $root.dx._static.noDataText(), dropDownOptions: { container: $root.getPopupContainer($element) }, popupPosition: { boundary: $root.getPopupContainer($element) }, inputAttr: { 'aria-label': displayName } }), dxValidator: { validationRules: $data.validationRules || [] }"></div>
+    <div data-bind="dxSelectBox: getOptions({ dataSource: values, value: value, valueExpr: 'value', displayExpr: 'displayValue', displayCustomValue: true, disabled: disabled, useItemTextAsTitle: true, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, dropDownOptions: { container: $root.getPopupContainer($element) }, popupPosition: { boundary: $root.getPopupContainer($element) }, inputAttr: { 'aria-label': displayName } }), dxValidator: { validationRules: $data.validationRules || [] }"></div>
 </script>
 <script type="text/html" id="dx-chart-leftPanel">
     <div class="dx-chart-left-panel dxd-border-primary dxd-properties-panel-group-header-back-color dxd-back-primary">
@@ -4198,7 +4226,7 @@
     </div>
 </script>
 <script type="text/html" id="dxcd-collection-lookup-header">
-    <div data-bind="dxSelectBox: { items: array, displayExpr: 'name', value: selectedItem, disabled: disabled,  placeholder: $root.dx._static.selectPlaceholder(), noDataText: $root.dx._static.noDataText(), dropDownOptions: { container: $root.getPopupContainer($element) , useItemTextAsTitle: true } }"></div>
+    <div data-bind="dxSelectBox: { items: array, displayExpr: 'name', value: selectedItem, disabled: disabled,  placeholder: $root.dx._static.selectPlaceholder(), noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, dropDownOptions: { container: $root.getPopupContainer($element) , useItemTextAsTitle: true } }"></div>
 </script>
 
 <script type="text/html" id="dxcd-collection-item">
@@ -4653,13 +4681,7 @@
     <div data-bind="css: { 'dxrd-band-content': !$data.collapsed(), 'dxrd-band-collapsed': $data.collapsed() }, styleunit: { 'height': height, top: topOffset }">
     </div>
     <!-- /ko -->
-</script><script type='text/html' id='dxrd-barcode-content'>
-<div style="margin:auto; width: 150px; height: 37px;" class="dxrd-image-surface-barcode"></div>
-<div data-bind="styleunit: { 'lineHeight': (contentSizes().height - 37) / _context.zoom() }">
-    <div class="dxrd-control-content" data-bind="controlDisplayName: $data, style: contentCss"></div>
-</div>
-</script>
-<script type='text/html' id='dxrd-charactercomb-content'>
+</script><script type='text/html' id='dxrd-charactercomb-content'>
 <!-- ko foreach: cells -->
 <div class="dxrd-charactercomb-cell" style="position:absolute" data-bind="styleunit: { width: size.width, height: size.height, top: top, left: left }">
     <div style="position:absolute">
@@ -5691,7 +5713,7 @@
                         </div>
                     </div>
                 </div>
-                <div data-bind="dxList: { dataSource: localizationItems, selectionMode: 'single', height: 'calc(100% - 59px)', onSelectionChanged: onSelectionChanged, focusStateEnabled: false, activeStateEnabled: false, pageLoadMode: 'scrollBottom', noDataText: $root.dx._static.noDataText() }">
+                <div data-bind="dxList: { dataSource: localizationItems, selectionMode: 'single', height: 'calc(100% - 59px)', onSelectionChanged: onSelectionChanged, focusStateEnabled: false, activeStateEnabled: false, pageLoadMode: 'scrollBottom', noDataText: $root.dx._static.noDataText(), encodeNoDataText: true }">
                     <!-- ko lazy: { template: 'dxrd-localization-editor-item' } -->
                     <!-- /ko -->
                 </div>
@@ -5800,7 +5822,7 @@
 <div class="dxrd-error-panel dxd-text-primary dxd-back-primary2" data-bind="style: _position, css: { 'collapsed': collapsed }, resizable: _resizableOptions">
     <div style="width: 100%; height: 100%" data-bind="style: { display: $data.collapsed() ? 'none' : 'block' }">
     <div class="dxrd-error-panel-header dxd-border-primary dxd-back-primary2">
-        <div class="dxrd-error-panel-header-title">Report Design Analyzer</div>
+        <div class="dxrd-error-panel-header-title" data-bind="text: $data.panelTitle"></div>
         <div class="dxrd-error-panel-header-collapse dx-accordion-item-title"  data-bind="click: function() { $data.toggleCollapsed() }"></div>
     </div>
     <div class="dxrd-error-panel-content">
@@ -6090,7 +6112,7 @@
             </div>
         </div>
         <div class="dx-default-border-style dxd-border-secondary">
-            <div class="dxrd-reportdialog-urls" data-bind="dxList: { dataSource: urls, selectedItems: [], editEnabled: true, height: 200, editConfig: { selectionEnabled: true }, selectionMode: 'single', onItemClick: function(e) { this.reportName(e.itemData.Value); }, activeStateEnabled: false, noDataText: $data.noDataText, nextButtonText: $root.getLocalization('More', 'ASPxReportsStringId.List_More') }">
+            <div class="dxrd-reportdialog-urls" data-bind="dxList: { dataSource: urls, selectedItems: [], editEnabled: true, height: 200, editConfig: { selectionEnabled: true }, selectionMode: 'single', onItemClick: function(e) { this.reportName(e.itemData.Value); }, activeStateEnabled: false, noDataText: $data.noDataText, encodeNoDataText: true, nextButtonText: $root.getLocalization('More', 'ASPxReportsStringId.List_More') }">
                 <div data-options="dxTemplate : { name: 'item' }" data-bind="event: { dblclick: function(e){ $parent.onDblClick(e.Key); } }">
                     <div data-bind="text: $data.Value"></div>
                 </div>
@@ -6111,7 +6133,7 @@
             </div>
         </div>
         <div class="dx-default-border-style dxd-border-secondary">
-            <div class="dxrd-reportdialog-urls" data-bind="dxList: { dataSource: urls, selectedItems: [], searchExpr: ['Value'], searchValue: searchValue, editEnabled: true, height: 200, editConfig: { selectionEnabled: true }, selectionMode: 'single', onItemClick: function(e) { this.reportUrl(e.itemData.Key); }, activeStateEnabled: false, nextButtonText: $root.getLocalization('More', 'ASPxReportsStringId.List_More'), noDataText: $data.noDataText }">
+            <div class="dxrd-reportdialog-urls" data-bind="dxList: { dataSource: urls, selectedItems: [], searchExpr: ['Value'], searchValue: searchValue, editEnabled: true, height: 200, editConfig: { selectionEnabled: true }, selectionMode: 'single', onItemClick: function(e) { this.reportUrl(e.itemData.Key); }, activeStateEnabled: false, nextButtonText: $root.getLocalization('More', 'ASPxReportsStringId.List_More'), noDataText: $data.noDataText, encodeNoDataText: true }">
                 <div data-options="dxTemplate : { name: 'item' }" data-bind="event: { dblclick: function(e){ $parent.onDblClick(e.Key); } }">
                     <div data-bind="text: $data.Value"></div>
                 </div>
@@ -6209,8 +6231,32 @@
     <div role="button" class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" data-bind="attr: { 'aria-label': $data.displayText && $data.displayText() || $data.text, 'aria-hidden': ko.unwrap($data.visible) ? 'false' : 'true', 'aria-disabled': ko.unwrap($data.disabled) ? 'true' : 'false', 'aria-checked': $data.selected ? ($data.selected() ? 'true' : 'false') : null }" >
         <div data-bind="text: $data.displayText && $data.displayText() || $data.text, attr: { title: $data.displayText && $data.displayText() || $data.text, class: 'dxd-text-primary dxd-back-highlighted ' + (ko.unwrap($data.imageClassName) || '') }, dxclick: function() { if((typeof $data.disabled === 'function') && !$data.disabled() || !$data.disabled) { $data.clickAction($root.model && $root.model()); } }, css: {'dxrd-disabled-button': $data.disabled }"></div>
     </div>
-</script><script type="text/html" id="dxrd-expressioneditor-popup">
+</script><script type="text/html" id="dxrd-expression-action">
+    <div data-bind="dxclick: function() { $root.activateExpressionEditor($data); }">
+        <span class="dxd-text-primary dx-menu-item-text" data-bind="attr: { title: title }, text: title"></span>
+        <div class="dx-menu-item-popout-container" data-bind="visible: $data.items && $data.items.length">
+            <div class="dx-menu-item-popout"></div>
+        </div>
+    </div>
+</script>
+
+<script type="text/html" id="dxrd-expression-editor-addon">
+    <div class="dxrd-editormenu-box dxd-property-grid-menu-box-color dxrd-editor-box-image" data-bind="cacheElement: { action: function() { $data.cacheFunction($root.activateExpressionEditor); } }, dxclick: function(_, element) { showPopup(_, element) }, attr: { title: hint }, css: editorMenuButtonCss">
+        <div class="dxrd-editor-box-image-content" data-bind="template: { name: $data.imageTemplateName, if: ko.unwrap($data.imageTemplateName) }"></div>
+    </div>
+</script><script type="text/html" id="dxrd-activated-expressioneditor">
+    <!-- ko if: !!$data -->
+    <!-- ko template: 'dxrd-expressioneditor-popup' -->
+    <!-- /ko -->
+    <!-- /ko -->
+</script>
+
+<script type="text/html" id="dxrd-expressioneditor-popup">
     <div data-bind="dxPopup: {
+            animation: {
+                show: { type: 'fadeIn', duration: 700 },
+                hide: { type: 'fadeOut', duration: 700 }
+            },
             showTitle: true,
             wrapperAttr: { class: 'dx-expressioneditor dxrd-expressioneditor-complex dx-popup-general' },
             title: title,
@@ -6408,7 +6454,7 @@
 </script>
 
 <script type="text/html" id="dxrd-scriptsbox">
-    <div data-bind="dxEventDropDownEditor: { items: $root.events, value: value, editEnabled: true, disabled: disabled, secondAction: function() { $root.gotoEvent && $root.gotoEvent($data.value(), name, $parents[1]._model && $parents[1]._model()); }, placeholder: $root.dx._static.selectPlaceholder(), noDataText: $root.dx._static.noDataText(), dropDownOptions: { container: $root.getPopupContainer($element) } }"></div>
+    <div data-bind="dxEventDropDownEditor: { items: $root.events, value: value, editEnabled: true, disabled: disabled, secondAction: function() { $root.gotoEvent && $root.gotoEvent($data.value(), name, $parents[1]._model && $parents[1]._model()); }, placeholder: $root.dx._static.selectPlaceholder(), noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, dropDownOptions: { container: $root.getPopupContainer($element) } }"></div>
 </script>
 
 <script type="text/html" id="dxrd-collection-item-group">
@@ -6820,7 +6866,7 @@
     <div class="dxrd-wizard-left-panel">
         <div class="dxrd-wizard-list-title" data-bind="text: fields.caption"></div>
         <div class="dx-default-border-style dxd-border-secondary">
-            <div class="dxrd-wizard-list" data-bind="dxList: { dataSource: fields.items, selectedItems: fields.activeItemArray, height: 257, selectionMode: 'single', activeStateEnabled: false, onItemClick: fieldClick, noDataText: $root.dx._static.noDataText() }">
+            <div class="dxrd-wizard-list" data-bind="dxList: { dataSource: fields.items, selectedItems: fields.activeItemArray, height: 257, selectionMode: 'single', activeStateEnabled: false, onItemClick: fieldClick, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true }">
                 <div data-options="dxTemplate : { name: 'item' }" data-bind="event: { dblclick: $parent.fieldDblClick }">
                     <div data-bind="text: $data"></div>
                 </div>
@@ -6837,7 +6883,7 @@
     <div class="dxrd-wizard-right-panel">
         <div class="dxrd-wizard-list-title" data-bind="text: groups.caption"></div>
         <div class="dx-default-border-style dxd-border-secondary">
-            <div class="dxrd-wizard-list" data-bind="dxList: { items: groups.items, height: 257, selectionMode: 'single', selectedItems: groups.activeItemArray, activeStateEnabled: false, onItemClick: groupClick, noDataText: $root.dx._static.noDataText() }">
+            <div class="dxrd-wizard-list" data-bind="dxList: { items: groups.items, height: 257, selectionMode: 'single', selectedItems: groups.activeItemArray, activeStateEnabled: false, onItemClick: groupClick, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true }">
                 <div data-options="dxTemplate : { name: 'item' }" data-bind="event: { dblclick: $parent.groupDblClick }">
                     <div data-bind="text: fields().join(', ')"></div>
                 </div>
@@ -6892,7 +6938,7 @@
             <div class="dxrd-wizard-list-title" data-bind="text: _fieldCaption"></div>
             <div class="dx-default-border-style dxd-border-secondary dxrd-wizard-panel-content">
                 <!-- ko if: $data._currentFields() -->
-                <div class="dxrd-wizard-list" data-bind="dxList: { items: _currentFields().items, selectedItems: _currentFields().activeItemArray, height: '100%', selectionMode: 'single', activeStateEnabled: false, onItemClick: _fieldClick, noDataText: $root.dx._static.noDataText() }">
+                <div class="dxrd-wizard-list" data-bind="dxList: { items: _currentFields().items, selectedItems: _currentFields().activeItemArray, height: '100%', selectionMode: 'single', activeStateEnabled: false, onItemClick: _fieldClick, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true }">
                     <div data-options="dxTemplate : { name: 'item' }" data-bind="event: { dblclick: $parent._fieldDblClick }">
                         <div data-bind="text: $data"></div>
                     </div>
@@ -6911,7 +6957,7 @@
             <div class="dxrd-wizard-list-title" data-bind="text: _groupCaption"></div>
             <div class="dx-default-border-style dxd-border-secondary dxrd-wizard-panel-content">
                 <!-- ko if: $data._currentGroups() -->
-                <div class="dxrd-wizard-list" data-bind="dxList: { items: _currentGroups().items, height: '100%', selectionMode: 'single', selectedItems: _currentGroups().activeItemArray, activeStateEnabled: false, onItemClick: _groupClick, noDataText: $root.dx._static.noDataText() }">
+                <div class="dxrd-wizard-list" data-bind="dxList: { items: _currentGroups().items, height: '100%', selectionMode: 'single', selectedItems: _currentGroups().activeItemArray, activeStateEnabled: false, onItemClick: _groupClick, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true }">
                     <div data-options="dxTemplate : { name: 'item' }" data-bind="event: { dblclick: $parent._groupDblClick }">
                         <div data-bind="text: fields().join(', ')"></div>
                     </div>