Current filter:
                                You should refresh the page.
                                  • Hello,

                                    We upgraded our application from version 14.1 to 19.1.3 and replaced the old reportviewer component with the new one aspxWebDocumentViewer.
                                    In the old version I have created an user control and provided two toolbars associated to the reportviewer (top and bottom)
                                    Can we add to the aspWebDocumentViewer a second toolbar at the bottom?

                                    Thank You,
                                    Cristina

                                1 Solution

                                Creation Date Importance Sort by

                                Hi Cristina,
                                 
                                To accomplish this task, use the client-side CustomizeElements event. This event allows you to access internal elements to remove, add or customize existing elements from this event handler. For example, use the following code:

                                [JavaScript]
                                function onCustomizeElements(s, e) { var toolbarPart = e.GetById(DevExpress.Report.Preview.PreviewElements.Toolbar); var secondToolbarPart = $.extend(true, {}, toolbarPart); secondToolbarPart.templateName = "dxrd-preview-toolbar-scrollable-second"; e.Elements.push(secondToolbarPart); }

                                This code clones the toolbar element, assigns a customized toolbar template to it and adds this new element to the viewer's elements collection.
                                 
                                To create a custom template for the second toolbar, I obtained the original toolbar template from the templates.html file (its name was "dxrd-preview-toolbar-scrollable") and customized the toolbar element's inline style to display it at the bottom of the viewer. Below is the customized template's definition:

                                [HTML]
                                <script type="text/html" id="dxrd-preview-toolbar-scrollable-second"> <div class="dxrd-toolbar-wrapper dxrdp-toolbar-scrollable" data-bind="dxScrollView: { showScrollbar: 'onHover', direction: 'horizontal', useNative: false, scrollByThumb: true }" style="top: unset; bottom: 0px; position: absolute;"> <div class="dxrd-toolbar" data-bind="template: {name: 'dxrd-toolbar-tmplt', data: actionLists.toolbarItems }, keyDownActions: actionLists"></div> </div> </script>

                                Finally, to reduce the viewer's preview area size, I defined the following CSS rule on the web page:

                                [CSS]
                                .dxrd-preview-wrapper { bottom: 66px !important; }

                                In the attachment you can find a sample project that demonstrates this approach in action.
                                Would you mind if I mark this ticket public to make this solution available to other customers?
                                 
                                P.S. We built our ASPxWebDocumentViewer component's UI by using the Knockout JS MVVM framework and DevExtreme UI Widgets. So, I recommend you review the DevExtreme Widget Basics - Knockout - Create and Configure a Widget help topic for more information on how this approach works.

                                • George Malekkos 09.25.2019

                                  Hello,
                                  Thank you for your great support. It works very nice on my side.
                                  I don't mind to mark the ticket as public.
                                  Cristina

                                • Vasily (DevExpress Support) 09.26.2019

                                  You are always welcome, Cristina! And thank you for your cooperation, I marked this thread public.