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-checkboxcustomglyph'>
<div class="dxrd-checkbox-custom-glyph" data-bind="style: $data.customGlyphStyleCss"></div></script>
<script type="text/html" id="dxrv-preview-date-range-mobile">
    <div class="dxrv-preview-date-range-mobile">
        <div class="dx-fieldset">
            <div class="dx-field">
                <div data-bind="dxSelectBox: { dataSource: items, displayExpr: 'displayName', onValueChanged: popupModel.onTextChanged, useItemTextAsTitle: true , placeholder: popupModel.selectPeriodPlaceholder }"></div>
            </div>
            <div class="dx-field">
                <div class="dx-fieldset-column">
                    <div class="dx-fieldset-header" data-bind="text: popupModel.fromText"></div>
                    <div class="dxrv-daterange-editor-button" data-bind="css: { 'dx-button-default': popupModel.startButton.focused }, dxButton: popupModel.startButton"></div>
                </div>
                <div class="dx-fieldset-column dx-fieldset-column-right">
                    <div class="dx-fieldset-header" data-bind="text: popupModel.untilText"></div>
                    <div class="dxd-back-secondary dx-fieldset-column-separator"></div>
                    <div class="dxrv-daterange-editor-button" data-bind="css: { 'dx-button-default': popupModel.endButton.focused }, dxButton: popupModel.endButton"></div>
                </div>
            </div>
            <div class="dx-field">
                <div class="dxrv-daterange-editor-item">
                    <!-- ko if: popupModel.startButton.focused -->
                    <!-- ko template: { name: 'dxrv-daterange-calendar', data: startRange } -->
                    <!-- /ko -->
                    <!-- /ko -->
                    <!-- ko if: popupModel.endButton.focused -->
                    <!-- ko template: { name: 'dxrv-daterange-calendar', data: endRange } -->
                    <!-- /ko -->
                    <!-- /ko -->
                </div>        
            </div>
        </div>
    </div>
</script><script type="text/html" id="dxrd-preview-page-mobile">
    <div class="dxrdp-content" data-bind="dxclick: clickToBrick, styleunit: { width: width, height: height }, autoFit: autoFitOptions, dxPreviewPageRenderer: imageOptions">
        <div class="dxrdp-loading-wrapper" data-bind="styleunit: { width: width, height: height, lineHeight: height }, style: { 'background-color': color }, visible: pageLoading, text: loadingText">
        </div>
        <div class="dxrdp-active-border" data-bind="css: { 'dxrdp-active': active && hasBricks }, visible: !readerMode"></div>
        <!-- ko foreach: activeBricks -->
        <!-- ko template: { name: "dxrd-page-brick-mobile" } -->
        <!--/ko-->
        <!--/ko-->
        <!-- ko if: !brickLoading && editingFields-->
        <!-- ko foreach: editingFields -->
        <!-- ko template: template -->
        <!--/ko-->
        <!--/ko-->
        <!--/ko-->
    </div>
</script>

<script type="text/html" id="dxrd-page-brick-mobile">
    <div class="dxrd-report-preview-brick" data-bind="style: { top: topP, left: leftP, right: rightP, height: heightP, width: widthP }, css: { 'dxrd-report-preview-brick-selected': active }">
    </div>
</script><script type="text/html" id="dxrdp-search-mobile">
    <!-- ko if: $data.enabled -->
    <div class="dxrdp-search-wrapper" data-bind="styleunit:{ height: height }, dxrdSearchBar: $data">
        <div class="dxrd-mobile-search">
            <div class="dxrdp-taptosearch" data-bind="visible: !editorVisible, dxclick: focusEditor">
                <div class="dxrdp-taptosearch-text" data-bind="text: tapToSearchText"></div>
            </div>
            <div class="dxrdp-search-panel" data-bind="visible: editorVisible">
                <div class="dxrdp-search-editor" data-bind="dxTextBox: { value: searchText, onValueChanged: onSearchTextChanged, onEnterKey: startSearch }"></div>
            </div>
        </div>
    </div>
    <!-- /ko -->
</script>


<script type="text/html" id="dxrd-preview-export-to-mobile">
    <div class="dxrd-preview-export-to" data-bind="dxMenu: { wrapperAttr: { class: 'dxrd-preview-export-to' }, items: items, onItemClick: clickAction }, attr: { title: $root.getLocalization(text, $data.textId) }">
        <div data-options="dxTemplate: { name: 'item' }" data-bind="attr: { title: $root.getLocalization(text, $data.textId) }">
            <!--ko if: $data.format -->
            <div class="dxrd-preview-export-item-text" data-bind="text: $root.getLocalization($data.text, $data.textId)"></div>
            <!-- /ko -->
            <!--ko ifnot: $data.format -->
            <div class="dxrd-preview-export-item-image-wrapper">
                <div class="dxrd-preview-export-item-image" data-bind="css: ko.unwrap($data.imageClassName), template: { name: ko.unwrap($data.imageTemplateName), if: !!ko.unwrap($data.imageTemplateName)}"> </div>
            </div>
            <div class="dx-menu-item-popout-container">
                <div class="dx-menu-item-popout"></div>
            </div>
            <!-- /ko -->
        </div>
    </div>
</script>

<script type="text/html" id="dxrdp-surface-mobile-bottom">
    <div class="dxrdp-mobile-actions" data-bind="visible: visible">
        <div class="dxrdp-mobile-actions-content">
            <!-- ko foreach: actions -->
            <div class="dxrdp-mobile-action" data-bind="visible: visible, css: $data.imageClassName, template: { name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}, dxclick: clickAction"> </div>
            <!-- ko if: $data.content -->
            <!-- ko template: $data.content -->
            <!-- /ko -->
            <!-- /ko -->
            <!-- /ko -->
        </div>
    </div>
</script>

<script type="text/html" id="dxrdp-pages-mobile">
    <div class="dxrdp-mobile-paginator" data-bind="dxrdMobilePaginator: $data">
        <div class="dxrdp-mobile-paginator-content">
            <div class="dxrdp-mobile-paginator-text" data-bind="text : text"></div>
        </div>
    </div>
</script>

<script type="text/html" id="dxrd-menu-export-content">
    <div class="dxrd-menu-export-popover" data-bind="dxPopover: { wrapperAttr: { class: 'dxrd-menu-export-popover' }, width: '266px', height: '266px', visible: visible, target: '.dxrdp-mobile-action.dxrd-image-export-to', container: $root.getPopupContainer($element), }">
        <!-- ko foreach: items -->
        <div class="dxrd-menu-export-item" data-bind="dxclick: action, text: text">
        </div>
        <!-- /ko-->
    </div>
</script>

<script type="text/html" id="dxrd-menu-parameters-content">
    <div data-bind="dxPopup: { wrapperAttr: { class: 'dxrd-menu-parameters-popup' }, showTitle: false, onHidden: onHidden, width: '100vw', height: '100vh', visible: visible, container: $root.getPopupContainer($element), }">
        <!-- ko template: { name: 'dxrv-preview-parameters-mobile', data: $data }-->
        <!-- /ko -->
    </div>
</script>

<script type="text/html" id="dxrv-preview-parameters-mobile">
    <div class="dxrdp-parameters-mobile" data-bind="dxValidationGroup: {}, css: className">
        <div class="dxrdp-parameters-title" data-bind="text: $data.title"> </div>
        <div class="dxrdp-parameters-scroll" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true, bounceEnabled: false }">
            <!-- ko template: { name: $data.contentTemplate, data: model.getViewModel() }-->
            <!-- /ko -->
        </div>
        <div class="dxrdp-parameters-buttons text-buttons" data-bind="foreach: { data: $data.actionButtons }, cacheElement: { action: function(element) { $data.cacheElementContent(element); } }">
            <div class="dxrdp-parameter-action" data-bind="dxButton: { text: text, onClick: function(params){ $data.action(params) }, disabled: disabled, visible: visible }, css: className"></div>
        </div>
        <div class="dxrdp-parameters-buttons" data-bind="visible: showIcons, foreach: { data: $data.actionIcons }">
            <div class="dxrdp-parameter-icon" data-bind="dxButton: { onClick: function(params){ $data.action(params)}, disabled: disabled }, css: className"></div>
        </div>
    </div>
</script>

<script id="dxrv-range-parameter-mobile" type="text/html">
    <div data-bind="dxrvDateRangeEditor: {value: value, isMobile: true }"></div>
</script><script type="text/html" id="dxrdp-surface-mobile">
    <div class="dxrd-preview-wrapper dxrdp-fullscreen dxrd-preview-surface" data-bind="style: { pointerEvents: surfaceEvents, touchEvents: surfaceEvents }, styleunit: { top: topOffset, height: previewWrapperSizeHeight, width: previewWrapperSizeWidth }, slide: slideOptions, mobileZoom: mobileZoomOptions, dxclick: click, css: { 'dxrp-editing-fields-hightlighted': editingFieldsHighlighted }">
        <!-- ko template: {name: 'dxrd-preview-progress-bar', data: progressBar }-->
        <!-- /ko -->

        <div class="dxrd-mobile-content">
            <div class="dxrd-mobile-gallery" data-bind="style: { pointerEvents: galleryEvents, touchEvents: galleryEvents }, dxGalleryReportPreview: { dataSource: gallery.items, gallery: gallery, slideOptions: slideOptions, animationEnabled: gallery.animationEnabled, disabled: zoomUpdating, width:'100%', height: '100%', showIndicator: false, loop: true, onSelectionChanged: onSlide, onOptionChanged: gallery.onOptionChanged }">
                <div data-options="dxTemplate: { name: 'item' }">
                    <div class="dxrd-scrollView-mobile" data-bind="dxScrollView: reportPreview.scrollViewOptions">
                        <div class="dxrd-gallery-blocks" data-bind="style: gallery.contentSize">
                            <!-- ko foreach: blocks -->
                            <!-- ko if: page -->
                            <div class="dxrd-gallery-block" data-bind="styleunit: position, css: classSet">
                                <div class="dxrd-gallery-block-content" data-bind="styleunit: { width: Math.max(page.width, position.width), height: Math.max(page.height, position.height) }, style: { 'background-color': page.color }">
                                    <div class="dxrdp-active-border" data-bind="css: { 'dxrdp-active': page.active && active, 'dxrdp-page-padding': page.active && active }, visible: reportPreview.slideOptions.readerMode"></div>
                                    <div class="dxrd-mobile-page" data-bind="styleunit: { width: page.width, height: page.height }, style: { pointerEvents: reportPreview.pageEvents, touchEvents: reportPreview.pageEvents }">
                                        <!-- ko template: { name :'dxrd-preview-page-mobile', data: page } -->
                                        <!-- /ko -->
                                    </div>
                                </div>
                            </div>
                            <!-- /ko -->
                            <!-- /ko -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="text" class="dxrd-display-none" />
</script>
<script type="text/html" id="dxrp-editing-field-container">
    <div class="dxrp-editing-field-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle, cacheElement: { action: function (elt) { setEditingFieldElement(elt); } }, zoom: zoom, css: { active: active, readonly: field.readOnly }">
        <div class="dxrp-editing-field-borders" data-bind="style: borderStyle"></div>
        <div class="dxrp-editing-field-content" data-bind="dxclick: activateEditor">
            <!-- ko if: !active || field.readOnly  -->
            <!-- ko if: field.htmlValue  -->
            <div class="dxrp-editing-field-readonly-text" data-bind="style: textStyle, css: {'dxrp-editing-field-text-wordwrap': !wordWrap}">
                <div class="dxrp-editing-field-text-html dxrp-editing-field-text-html-complex" data-bind="style: breakOffsetStyle, html: field.htmlValue"></div>
            </div>
            <!--/ko-->
            <!-- ko ifnot: field.htmlValue  -->
            <div class="dxrp-editing-field-readonly-text" data-bind="style: textStyle, css: {'dxrp-editing-field-text-wordwrap': !wordWrap}, text: field.editValue"></div>
            <!--/ko-->
            <!--/ko-->
            <!-- ko if: active && !field.readOnly -->
            <!-- ko template: { name: editorTemplate, data: data } -->
            <!--/ko-->
            <!--/ko-->
        </div>
    </div>
</script>

<script type="text/html" id="dxrp-editing-field-text">
    <textarea class="dxrp-editing-field-text" data-bind="value: value, valueUpdate: 'keypress', style: textStyle, event: { blur: hideEditor, input: onInput, keyup: keypressAction }"></textarea>
</script>

<script type="text/html" id="dxrp-editing-field-mask">
    <div class="dxrp-editing-field-mask" data-bind="dxTextBox: options, childStyle: { style: textStyle, selector: '.dx-texteditor-input'}"></div>
</script>

<script type="text/html" id="dxrp-editing-field-number">
    <div class="dxrp-editing-field-mask" data-bind="dxNumberBox: options, childStyle: { style: textStyle, selector: '.dx-texteditor-input'}"></div>
</script>

<script type="text/html" id="dxrp-editing-field-datetime">
    <div  class="dxrp-editing-field-datetime dxrd-width-100" data-bind="dxDateBox: $data.getOptions({ dropDownOptions: { container: $root.getPopupContainer($element), position: { at: 'left bottom', collision: 'flipfit flip', my: 'left top', boundary: $root.getPopupContainer($element), of: $element } } }), childStyle: { style: textStyle, selector: '.dx-texteditor-input'}"></div>
</script>

<script type="text/html" id="dxrp-editing-field-image">
    <div class="dxrp-editing-field-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle ">
        <!-- ko template: 'dxrp-editing-field-image-editor' -->
        <!-- /ko -->
    </div>
</script>

<script type="text/html" id="dxrp-editing-field-image-editor">
    <div class="dxrd-height-100 dxrd-width-100" data-bind="dxPictureEditor: $data"></div>
</script>

<script type="text/html" id="dxrp-editing-field-checkbox">
    <div class="dxrp-editing-field-check-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle, zoom: zoom, click: onClick">
        <div class="dxrp-editing-field-check" tabindex="1" data-bind="style: checkStyle, template: { name: checkStateStyleIcon, if: !!checkStateStyleIcon }"> </div>
    </div>
</script>

<script type="text/html" id="dxrp-editing-field-radio">
    <div class="dxrp-editing-field-check-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle, zoom: zoom, click: onClick">
        <div class="dxrp-editing-field-check" data-bind="style: checkStyle">
            <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 760 760" preserveAspectRatio="xMidYMid meet">
                <g fill="#010101" stroke="none">
                    <path d="M32,380a348,348 0 1,0 696,0a348,348 0 1,0 -696,0" class="highlight dxrd-stroke-width-50 dxrd-stroke-rgb-0"  />
                    <path d="M185,380a195,195 0 1,0 390,0a195,195 0 1,0 -390,0" data-bind="style: { fill: checked ? 'black' : 'transparent' }" />
                </g>
            </svg>
        </div>
    </div>
</script>

<script type="text/html" id="dxrp-character-comb-editing-field">
    <div class="dxrp-editing-field-charactercomb dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle, dxclick: activateEditor, zoom: zoom, css: { active: active, readonly: field.readOnly }">
        <!-- ko if: !active || field.readOnly  -->
        <!-- ko foreach: cells -->
        <div class="dxrp-editing-field-charactercomb-cell" data-bind="style: style, text: text"></div>
        <!-- /ko -->
        <!-- /ko -->
        <!-- ko if: active && !field.readOnly -->
        <textarea  class="dxrp-editing-field-text dxrd-background-white" data-bind="value: field.editorValue, valueUpdate: 'keypress', style: textStyle, event: { blur: hideEditor, input: onInput, keyup: keypressAction }"></textarea>
        <!--/ko-->
    </div>
</script>
<script type="text/html" id="dxrd-export-tool-content">
    <div class="dxrd-visually-hidden">
        <form method="post">
        </form>
    </div>
    <div data-bind="dxPopup: {
        width: popupOptions.width,
        height: popupOptions.height,
        title: popupOptions.title,
        visible: popupOptions.visible,
        showCloseButton: true,
        onHidden: popupOptions.onHidden,
        toolbarItems: popupOptions.toolbarItems,
        wrapperAttr: popupOptions.wrapperAttr,
        container: popupOptions.getPopupContainer($element), 
        position: { of: popupOptions.getPopupContainer($element) }
    }">
        <div class="dxrd-print-dialog-content">
            <div data-bind="text: printingTexts.caption"></div>
            <p></p>
            <!-- ko if: printingTexts.prefix -->
            <div class="dxrdp-print-text-prefix" data-bind="text: printingTexts.prefix"></div>  
            <!-- /ko -->
            <a href="" class="dxrd-preview-printing-link" data-bind="click: printingLinkCallback, text: printingTexts.link"></a>
            <!-- ko if: printingTexts.postfix -->
            <div class="dxrdp-print-text-postfix" data-bind="text: printingTexts.postfix"></div>
            <!-- /ko -->
        </div>        
    </div>
</script><script type="text/html" id="dxrd-preview-export-options">
    <div class="dxrd-preview-export-options-wrapper dxrd-preview-property-wrapper" data-bind="visible: active && visible">
    <div class="dxrd-right-panel-header dxd-text-primary">
        <span data-bind="text: $root.getLocalization('Export Options', 'DevExpress.XtraReports.UI.XtraReport.ExportOptions')"></span>
    </div>
    <div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); }  }">
        <div class="dx-fieldset" data-bind="dxMutationObserver: keyboardHelper">
            <div class="dxrd-right-panel-content dxrd-export-options-content" role="tree">
                <!-- ko template: { name: 'dx-propertieseditor', data: propertyGrid } -->
                <!-- /ko -->
            </div>
            <!-- ko template: { name: 'dx-propertygrid-popoverservice', if: propertyGrid.popover, data: propertyGrid.popover } -->
            <!-- /ko -->
        </div>
    </div>
</div>
</script>

<script type="text/html" id="dxrd-preview-export-to">
    <div class="dxrd-preview-export-toolbar-item dxrd-toolbar-item" data-bind="visible: visible">
        <div class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented">
            <div class="dxrd-preview-export-to dxd-button-back-color dxd-state-normal dxd-icon-highlighted" 
                data-bind="dxMenu: {
                    elementAttr: { class: 'dxrd-preview-export-to dxd-button-back-color dxd-state-normal dxd-icon-highlighted' },
                    disabled: disabled,
                    items: widget.items,
                    cssClass: 'dxrdp-export-to-menu',
                    onItemClick: click,
                    onSubmenuShowing: widget.onSubmenuShowing(getPopupContainer($element), $element),
                    onSubmenuShown: widget.onSubmenuShown,
                    onSubmenuHiding: widget.onSubmenuHiding,
                    onItemRendered: widget.onItemRendered,
                    tabIndex: '-1',
                }">
                <div data-options="dxTemplate: { name: 'item' }" data-bind="attr: { title: text }">
                    <!--ko if: $data.format -->
                    <div class="dxrd-preview-export-item-text" data-bind="text: text"></div>
                    <!-- /ko -->
                    <!--ko ifnot: $data.format -->
                    <div class="dxrd-preview-export-item-image-wrapper">
                        <div class="dxrd-preview-export-item-image" data-bind="css: imageClassName, template: imageTemplateName"> </div>
                    </div>
                    <div class="dx-menu-item-popout-container">
                        <div class="dx-menu-item-popout"></div>
                    </div>
                    <!-- /ko -->
                </div>
            </div>
        </div>
        <div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: hasSeparator"></div>
    </div>
</script>
<script type="text/html" id="dxrd-page-brick-clickable">
    <div class="dxrd-report-preview-brick" data-bind="dxclick: function(_, event){ onClick(event); event.stopPropagation(); }, style: { top: topP, left: $data.leftP, right: $data.rightP, height: heightP, width: widthP }, css: { 'dxrd-report-preview-brick-selected': $data.active, 'dxrd-report-preview-brick-selectable': !($data.bricks) }">
        <!-- ko if: $data.navigation -->
        <div class="dxrd-report-preview-brick-navigation" data-bind="css: {
             'dxrdp-navigation-brick-drill-down' : !!navigation.drillDownKey, 
             'dxrdp-navigation-brick-sorting' : !!navigation.sortData, 
             'dxrdp-navigation-brick-sorting-desc': navigation.sortData && navigation.sortData.order === 1,
             'dxrdp-navigation-brick-sorting-asc': navigation.sortData && navigation.sortData.order === 2
             }"></div>
        <!--/ko-->
    </div>
</script>

<script type="text/html" id="dxrd-preview-page">
    <div data-bind="dxLoadPanel: { 
        visible: loading,        
        position: { of: '#' + page_id }
     }"></div>
     <!-- ko if: $data.aiOperationInProgress -->
        <div data-bind="dxAILoadingPanel: getAILoadingPanelOptions()"></div>
     <!-- /ko -->
    <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>
            </div>
        </div>
        <div data-bind="dxPreviewPageRenderer: imageOptions, visible: !pageLoading">
            <!-- ko foreach: activeBricks -->
            <!-- ko template: { name: "dxrd-page-brick-mobile", data: $data } -->
            <!--/ko-->
            <!--/ko-->
            <!-- ko foreach: clickableBricks -->
            <!-- ko template: { name: "dxrd-page-brick-clickable", data: $data } -->
            <!--/ko-->
            <!--/ko-->
            <!-- ko if: !brickLoading && $data.editingFields-->
            <div data-bind="dxMutationObserver: editingFieldsKeyboardHelper">
                <!-- ko foreach: editingFields -->
                <!-- ko template: template -->
                <!--/ko-->
                <!--/ko-->
            </div>
            <!--/ko-->
            <!-- 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">
                        <!-- ko if: $data.text -->
                        <div class="dxrd-ai-floating-smart-tag-text" data-bind="text: text"></div>
                        <!-- ko if: $data.items -->
                        <div class="dx-icon dxrd-ai-floating-smart-tag-items" data-bind="css: { 'dx-icon-spinright': !$root.rtl, 'dx-icon-spinleft': $root.rtl }"></div>
                        <!-- /ko -->
                        <!-- /ko -->
                        <!-- ko if: $data.icon -->
                        <div class="dxrd-ai-floating-smart-tag-icon">
                            <div data-bind="template: icon"> </div>
                        </div>
                        <!-- /ko -->
                    </div>
                </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 data-bind="dxButton: { onClick: revertToOriginal, icon: 'revert', width: 22, height: 22 }, attr: { title: revertToOriginalBtnTxt }" class="dxrd-report-preview-page-modified-button"></div>
                </div>
            <!-- /ko -->
        </div>
    </div>
</script><script type="text/html" id="dxrp-popup-editing-field-image">
    <div class="dxrp-editing-field-container" data-bind="style: containerStyle">
        <div class="dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="dxclick: activateEditor, css: parentPopupClass">
            <div class="dxrp-editing-field-popup-container-cloned" data-bind="dxPainter: getPainterOptions()"></div>
            <!-- ko template: { name: 'dx-picture-editing-popup' } -->
            <!-- /ko -->
        </div>
    </div>
</script>

<script type="text/html" id="dx-picture-editing-popup">
    <div class="dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen" data-bind="dxPopup: {
            width: containerStyle.width,
            height: containerStyle.height,
            position: { boundary: popupData.getPopupContainer($element), of: popupData.getPositionTarget($element), collision: 'flipfit flipfit' },
            container: popupData.getPopupContainer($element),
            showTitle: false,
            target: popupData.getPopupContainer($element),
            deferRendering: false,
            hideOnOutsideClick: true,
            showCloseButton: false,
            onContentReady: popupData.onContentReady,
            onHiding: popupData.onHiding,
            onShown: popupData.onShown,
            shading: popupData.shading,
            wrapperAttr: { class: 'dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen' },
            animation: { 
                show: { type: 'slide', duration: 0, to: { opacity: 1 }, from: { opacity: 0 } },
                hide: { type: 'fade', duration: 100, to: { opacity: 0 }, from: { opacity: 1 } }
            },
            visible: popupData.visible }, cacheElement: { action: function(elt) { setEditingFieldElement(elt); } }">
        <!-- ko if: popupData.showContent -->
        <!-- ko template: { name: popupData.contentTemplate, afterRender: popupData.renderedHandler } -->
        <!--/ko-->
        <!--/ko-->
    </div>
</script><script type="text/html" id="dxrd-zoom-autofit-select-template">
        <div class="dxrd-toolbar-item-zoom" data-bind="visible: visible">
            <div class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" >
                <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, useItemTextAsTitle: true,
                    width: 140,
                    dropDownOptions: { 
                        container: getPopupContainer($element), 
                        position: { my: 'left top', at: 'left bottom', of: $element },
                        wrapperAttr: { class: 'dx-zoom-selectbox-popup-wrapper' }
                    }, tabIndex: '-1', inputAttr: widget.inputAttr }">
                </div>
            </div>
        </div>
</script>

<script type="text/html" id="dxrd-preview-toolbar-scrollable">
    <div class="dxrd-toolbar-wrapper dxrdp-toolbar-scrollable dx-shadow-top dxd-back-secondary-invariant" data-bind="dxScrollView: { showScrollbar: 'onHover', direction: 'horizontal', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }">
        <div class="dxrd-toolbar" role="toolbar" data-bind="keyDownActions: actionLists, dxMutationObserver: keyboardHelper">
            <div id="dxrd-preview-toolbar-live-region" class="dxrd-visually-hidden" aria-live="polite" aria-atomic="true"></div>
            <div class="dx-accessibility-container-background dxd-back-accented"></div>
            <!-- ko template: {name: 'dxrd-toolbar-tmplt', data: actionLists.toolbarItems } -->
            <!-- /ko -->
        </div>
    </div>
</script>
<script type="text/html" id="dxrd-preview-breadcrumb">
    <!-- ko if: listItems.length > 1 -->
<div class="dxrd-breadcrumbs-wrapper" data-bind="dxMutationObserver: keyboardHelper" aria-label="Breadcrumbs"
    role="navigation">
    <!-- ko foreach: listItems -->
    <!-- ko if: $index() !== ($parent.listItems.length - 1) -->
    <a class="dxrd-breadcrump-link dxrd-breadcrumb-item dxd-text-accented dx-accessibility-border-accented"
        data-bind="click: function(s, e) { $parent.onClick($data.position); }">
        <span data-bind="text: $data.displayText"></span>
    </a>
    <span class="dxrd-breadcrumb-item-seperator"
        data-bind="template: { name: 'dxrd-svg-preview-breadcrumbs_seperator' }">
    </span>
    <!-- /ko -->
    <!-- ko if: $index() === ($parent.listItems.length - 1) -->
    <div class="dxrd-breadcrumb-item dxd-text-primary dx-accessibility-border-accented" aria-current="location">
        <span data-bind="text: $data.displayText"></span>
    </div>
    <!-- /ko -->

    <!-- /ko -->
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-preview-search">
    <div role="search" aria-haspopup="listbox" class="dxrd-preview-search-wrapper" data-bind="visible: active && visible, dxMutationObserver: keyboardHelper">
        <div id="dxrd-preview-search-live-region" class="dxrd-visually-hidden" aria-live="polite" aria-atomic="true"></div>
        <!-- ko with: model.getViewModel() -->
        <div class="dxrd-preview-search-tab-header">
            <div class="dxrd-right-panel-header dxd-text-primary">
                <span data-bind="text: headerText"></span>
            </div>
            <div class="dxrd-preview-search-tab-editor-button-container">
                <div class="dxrd-preview-search-editor dx-searcheditor" data-bind="dxTextBox: searchEditor"></div>
                <div data-bind="dxButton: buttons.searchButton" class="dxrd-preview-search-button"></div>
            </div>
            <div class="dxrd-preview-search-tab-header-text">
                <div class="dxrd-preview-search-checkbox" data-bind="dxCheckBox: matchCaseEditor"></div>
                <div class="dxrd-preview-search-checkbox dxrd-preview-search-checkbox-second" data-bind="dxCheckBox: matchWholeWordEditor"></div>           
            </div>
        </div>
        <!-- ko if: (searchResultCount > 0 || loading) -->
        <div class="dxrd-preview-search-result-wrapper">
            <div  class="dxrd-preview-search-result-header dxd-border-primary dxd-text-primary">
                <div class="dxrd-preview-search-tab-header dxrd-preview-search-indicator-group">
                    <div class = "dxrd-preview-search-results dxrd-preview-search-result-text" data-bind="attr: { id: searchResultHeaderId, 'aria-busy': loading ? 'true' : 'false' }">
                        <span class="dxrd-preview-search-result-text-bold" data-bind="text: searchResultCount"></span>&nbsp
                        <span data-bind="text: resultsInText"></span>&nbsp
                        <span class="dxrd-preview-search-result-text-bold" data-bind="text: searchResultPageCount"></span>&nbsp
                        <span data-bind="text: resultsPagesText"></span>
                    </div>
                    <div class="dxrd-preview-search-results-navigation">
                        <div class="dxrdp-search-loading" data-bind="dxLoadIndicator: { visible: loading }"></div>
                        <div data-bind="dxButton: buttons.upButton " class="dxrd-preview-search-results-navigation-button dx-searcheditor-button dx-widget dx-dropdowneditor-button dxd-icon-highlighted dx-shape-standard"></div>
                        <div data-bind="dxButton: buttons.downButton " class="dxrd-preview-search-results-navigation-button dx-searcheditor-button dx-widget dx-dropdowneditor-button dxd-icon-highlighted dx-shape-standard"></div>
                    </div>
                </div>
            </div>
            <div class="dx-accessibility-container-background dxd-back-accented"></div>
            <div class="dxrd-preview-search-result dxd-border-accented" data-bind="dxList: { dataSource: searchResultDataSource, pageLoadMode: 'scrollBottom', focusStateEnabled:false, hoverStateEnabled:false, onItemRendered: onItemRendered, noDataText: '', encodeNoDataText: true }, attr: { 'aria-labelledby': searchResultHeaderId }">
                <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: itemClickAction }, attr: attr"
                data-options="dxTemplate : { name: 'item' }"
                 >
                    <div class="dx-accessibility-field-background dxd-back-accented"></div>
                    <div class="dxrd-preview-search-tab-item-text propertygrid-editor-displayName dxd-text-primary" data-bind="text: data.text"></div>
                    <div class="dxrd-preview-search-tab-item-info dxd-text-primary" data-bind="text: info"></div>
                </div>  
            </div>  
        </div>
        <!-- /ko -->
        <!-- ko if: (searchCompleted && searchResultCount == 0) -->
        <div  class="dxrd-preview-search-result-header dxd-border-primary dxd-text-primary">
            <div class="dxrd-preview-search-tab-header dxrd-preview-search-indicator-group">
                <div data-bind="text: noResultText" class = "dxrd-preview-search-result-text">
                </div>
            </div>
        </div>
        <!-- /ko -->
        <!-- /ko -->
    </div>
</script>

<script type="text/html" id="dxrd-preview-ai-panel">
<div id="dxrd-preview-ai-panel-id" class="dxrd-preview-ai-panel" data-bind="visible: active && visible">
    <!-- ko with: model.getViewModel() -->
    <div class="dxrd-right-panel-header dxd-text-primary">
        <span data-bind="text: aiPanelHeaderLabel"></span>
    </div>
    <div class="dxrd-preview-ai-panel-wrapper dx-editors">
        <div class="dx-fieldset">           
            <div class="dx-field dxrd-preview-ai-select-box">
                <label class="dxrd-preview-ai-form-label" for="dxrv-ai-target-select"
                    data-bind="text: targetContentText"></label>
                <div class="dxrd-preview-ai-form-input" id="dxrv-ai-target-select"
                    data-bind="dxSelectBox: getSelectBoxOptions(targetSelectBoxOptions, $element)"></div>
            </div>
            <!-- ko if: languageSelectBoxOptions.visible -->
                <div class="dx-field dxrd-preview-ai-select-box">
                    <label class="dxrd-preview-ai-form-label" for="dxrv-ai-language-select"
                        data-bind="text: targetLanguageText"></label>
                    <div class="dxrd-preview-ai-form-input" id="dxrv-ai-language-select"
                        data-bind="dxSelectBox: getSelectBoxOptions(languageSelectBoxOptions, $element)"></div>
                </div>
            <!-- /ko -->
            <!-- ko if: pageSelectBoxVisible -->
            <div class="dx-field dxrd-preview-ai-select-box">
                <label class="dxrd-preview-ai-form-label" for="dxrv-ai-page-select"
                    data-bind="text: pageSelectText"></label>
                <div class="dxrd-preview-ai-form-input" id="dxrv-ai-page-select"
                    data-bind="dxSelectBox: getSelectBoxOptions(pageSelectBoxOptions, $element)">
                </div>
            </div>
            <!-- /ko -->
            <div class="dx-field">
                <div class="dxrd-preview-ai-buttons-wrapper">
                    <div class="dxrd-preview-ai-buttons dx-accessibility-focus-border-accented" data-bind="dxButton: buttons.translateTextButton">
                    </div>
                    <div class="dxrd-preview-ai-buttons dx-accessibility-focus-border-accented" data-bind="dxButton: buttons.summarizeTextButton">
                    </div>
                </div>
            </div>
        </div>
        <!-- ko if: resultVisible -->
        <div class="dxrd-right-panel-header dxd-text-primary dxd-border-primary dxrd-ai-result-text">
            <span data-bind="text: textProcessingResultHeaderText" class="dxrd-right-panel-result-text"></span>
            <div role="button" class="dxrd-right-panel-copy-button dx-accessibility-focus-border-accented" tabindex="0" data-bind="event: { keydown: copyText }">
                <div class="dxd-icon-highlighted" data-bind="template: { name: buttons.copyResultButton.template }, dxclick: buttons.copyResultButton.onClick"></div>
            </div>
        </div>
        <div id="dxrd-ai-panel-text-area-id" tabindex="0" role="presentation" class="dx-accessibility-focus-border-accented dxrd-preview-ai-panel-textarea dxd-back-primary2"
        data-bind="dxTextArea: { value: aiProcessingResultText, 
            onInput: function(e) { e.event.preventDefault(); },
            onPaste: function(e) { e.event.preventDefault(); },
            onKeyDown: function(e) { if (e.event.key !== 'Tab') e.event.preventDefault(); },
            hoverStateEnabled: false,
            inputAttr: { spellcheck: 'false' },
            tabIndex: -1
              }">
        </div>
        <!-- /ko -->
    </div>
    <div data-bind="dxPopup: {
        width: 350,
        height: 200,
        shading: false,
        focusStateEnabled: false,
        visible: warningTextLimitPopupVisible,
        container: '.dxrd-preview-ai-panel',
        target: '.dxrd-preview-ai-panel',
        position: {
            at: 'top',
            my: 'top',
            collision: 'fit',
            of: '.dxrd-preview-ai-panel'
        },
        showCloseButton: false,
        showTitle: false,
        wrapperAttr: { class: 'dxrd-preview-ai-panel-warning-popup' },
    }">
        <span data-bind="text: limitExceededWarningMsg" class="dxrd-preview-ai-panel-warning-popup-text"></span>
        <div class="dxrd-preview-ai-panel-warning-popup-checkbox" data-bind="dxCheckBox: proceedForAllCheckBoxOptions">
        </div>
        <div class="dxrd-preview-ai-panel-warning-popup-button-group">
            <div class="dxrd-preview-ai-panel-warning-popup-button dx-button-default"
                data-bind="dxButton: { text: proceedNextChunkButtonText, onClick: proceedNextButtonClick }">
            </div>
            <div class="dxrd-preview-ai-panel-warning-popup-button"
                data-bind="dxButton: { text: cancelChunkedOperationButtonText, onClick: cancelProcessButtonClick }">
            </div>
        </div>
    </div>
    <!-- /ko -->
</div>
</script>

<script type="text/html" id="dxrd-preview-progress-bar">
    <div role="dialog" class="dxrd-preview-progress dxd-popup-back-color dxd-back-primary2 dxd-border-primary" data-bind="visible: visible, css: cssClasses, dxMutationObserver: progressBarAccessibilityKeyboardHelper">
        <div class="dxrd-preview-progress-text dxd-text-primary" data-bind="text : text"></div>
        <div class="dxrd-preview-progress-bar dxd-back-primary">
            <div class="dxrd-preview-progress-value dxd-preview-progress-bar-value-color dxd-back-accented" data-bind="style : { width: progress  + '%' }"></div>
        </div>
        <div role="button" class="dxrd-preview-progress-cancel dxd-hyperlink-color dxd-border-accented dxd-text-accented dx-accessibility-list-item dx-accessibility-border-accented" data-bind="text: cancelButton.text, visible: cancelButton.visible, click: function() { cancelButton.action && cancelButton.action(); }"></div>
    </div>
</script>

<script type="text/html" id="dxrd-preview-parameters">
    <div class="dxrd-preview-parameters-wrapper dxrd-preview-property-wrapper" data-bind="visible: active && visible">
        <div class="dxrd-right-panel-header dxd-text-primary">
            <span data-bind="text: model.headerText, visible: model.showHeader"></span>
            <!-- ko if: (model && !model.isEmpty) -->
            <!-- /ko -->
        </div>
        <!-- ko if: (!model || model.isEmpty) -->
        <div class="dxrd-group-header-parameters-empty dxd-text-primary" data-bind="text: model.emptyText"></div>
        <!-- /ko -->
        <!-- ko if: (model && !model.isEmpty) -->
        <div class="dxrd-right-panel-body" id="propertiesPanel" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }, dxValidationGroup: {}, dxMutationObserver: keyboardHelper">
            <div role="tree" class="dx-fieldset dxrd-right-panel-content">
                <!-- ko template: { name: 'dx-propertieseditor', data: propertyGrid } -->
                <!-- /ko -->
            </div>
            <div class="dxrd-preview-parameter-actions-container" data-bind="visible: model.showButtons">
                <div class="dxrd-preview-parameter-action dxrd-preview-loading" data-bind="dxLoadIndicator: { visible: model.parametersLoading }"></div>
                <!-- ko foreach: model.buttons -->
                <div class="dxrd-preview-parameter-action dx-accessibility-focus-border-accented" data-bind="dxButton: $data"></div>
                <!-- /ko -->
            </div>
        </div>
        <!-- /ko -->
    </div>
</script>

<script type="text/html" id="dxrd-preview-pager">
    <div class="dxrd-preview-pager dxrd-toolbar-item" data-bind="visible: visible">
        <div class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" >
            <div class="dxrd-preview-pager-selectbox" data-bind="dxSelectBox: {
                dataSource: widget.dataSource, onValueChanged: widget.onValueChanged, value: widget.value,
                displayExpr: widget.displayExpr, useItemTextAsTitle: true, itemTemplate: widget.itemTemplate,
                searchMode: widget.searchMode, searchEnabled: widget.searchEnabled,
                searchTimeout: widget.searchTimeout, disabled: widget.disabled,
                dropDownOptions: {
                    container: getPopupContainer($element),
                    wrapperAttr: widget.wrapperAttr,
                },
                tabIndex: '-1', inputAttr: widget.inputAttr }">
            </div>
        </div>
        <div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: $data.hasSeparator"></div>
    </div>
</script>

<script type="text/html" id="dxrd-preview-document-map">
<div class="dxrd-preview-document-map dxrd-height-100 dxrd-overflow-hidden" data-bind="visible: active && visible" >
    <div class="dxrd-right-panel-header dxd-text-primary">
        <div class="dxrd-display-inline-block" data-bind="text: $root.getLocalization('Document Map', 'ASPxReportsStringId.DocumentViewer_RibbonCommandText_DocumentMap')"></div>
    </div>
    <!-- ko if: model -->
    <!-- ko with: model.getViewModel() -->
    <div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }, dxMutationObserver: keyboardHelper">
        <div role="tree" id="documentMapTree" data-bind="treelist: treeListOptions" class="dxrd-width-100 dxrd-height-100"></div>
    </div>
    <!-- /ko -->
    <!-- /ko -->
</div>
</script><script type="text/html" id="dxrd-report-preview">
    <div class="dxrd-preview dxrd-designer-wrapper dxd-scrollbar-color dxd-surface-back-color" data-bind="visible: reportPreview.previewVisible, cssArray: [ $data.rootStyle , { 'dx-rtl' : $data.rtl, 'dx-ltr': !$data.rtl } ]">
        <!-- ko foreach: parts -->
        <!-- ko template: { name: templateName, data: viewModel || model }-->
        <!-- /ko -->
        <!-- /ko -->
    </div>
</script>

<script type="text/html" id="dxrdp-surface">
    <div class="dxrd-preview-wrapper" data-bind="textCopier, css: { 'dx-rtl': rtlReport, 'dxrp-editing-fields-hightlighted': editingFieldsHighlighted } ">
        <!-- ko with: progressBar -->
        <!-- ko template: 'dxrd-preview-progress-bar'-->
        <!-- /ko -->
        <!-- /ko -->
        <div class="dxrd-preview-surface" data-bind="dxMutationObserver: previewBrickKeyboardHelper">
            <!-- ko if: !showMultipagePreview -->
            <div class="dxrd-report-preview-holder" role="tablist">
                <!-- ko with: currentPage -->
                <!-- ko if: pageLoading || (!pageLoading && pageLoaded) -->
                <div role="tab" class="dxrd-report-preview dx-accessibility-page-item dx-accessibility-border-accented" data-bind="autoFit: autoFitOptions, styleunit: { width: width, height: height }">
                    <!-- ko template: { name: 'dxrd-preview-page', afterRender: function() { delayedInit() } }-->
                    <!-- /ko -->
                </div>
                <!-- /ko -->
                <!-- /ko -->
            </div>
            <!-- /ko -->
            <!-- ko if: showMultipagePreview && !!currentPage -->
            <div class="dxrd-report-preview-holder" role="list" data-bind="lazyImages: lazyImagesOptions">
                <!-- ko foreach: {data: pages, afterRender: function() { delayedInit() } }  -->
                <!-- ko lazy: { if: pageLoading || (!pageLoading && pageLoaded) } -->
                <div role="listitem" class="dxrd-report-preview dxrd-report-preview-multipage dx-accessibility-page-item dx-accessibility-border-accented" data-bind="styleunit: { 'width': width, 'height': height }, toView: { setPageActiveChangedEvent: setPageActiveChangedEvent }, css : { 'dxrd-report-preview-active': active }">
                    <!-- ko template: 'dxrd-preview-page'-->
                    <!-- /ko -->
                </div>
                <!-- /ko -->
                <!-- /ko -->
            </div>
            <!-- /ko -->
            <div data-bind="css: { 'dxrd-visually-hidden': !!currentPage || _aiOperationInProgress }" class="dxrd-report-preview-placeholder">
                <div aria-live="assertive" aria-atomic="true" class="dxd-empty-area-placeholder-text-color dxd-text-info" data-bind="text: emptyDocumentCaption"></div>
            </div>
            <!-- ko if: _aiOperationInProgress -->
            <div data-bind="dxAILoadingPanel: _getAILoadingPanelOptions($element)"></div>
            <!-- /ko -->
        </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: _exportTranslatedDodumentWarningMsg" 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>

<script type="text/html" id="dxrd-export-tool">
    <div data-bind="dxViewerExport: $data"></div>
</script><script type="text/html" id="dxrv-daterange-editor">
    <div class="dxrv-daterange-editor">
        <div data-bind="cacheElement: { action: cacheElement }, dxEllipsisEditor: { value: displayValue, disabled: disabled, visible: visible, readOnly: true, inputAttr: { 'aria-label': _displayName, id: _editorInputId }, openOnFieldClick: true, buttonAction: function() { showPopup(); } }"></div>
        <!-- ko template: { name: popupTemplate, data: popupModel } -->
        <!-- /ko -->
    </div>
</script>

<script type="text/html" id="dxrv-daterange-editor-popup">
    <div role="dialog" aria-modal="true" data-bind="dxPopup: getPopupSettings()">
        <div data-bind="dxScrollView: scrollViewOptions