devexpress-reporting/dist/html/templates.html

DevExpress Reporting provides the capability to develop a reporting application to create and customize reports.

<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 -->