Reporting continuous scrolling is not working in custom template

[Kallol Mahata]

Hello,

I'm working on adding a custom template to our reports. I based it on the example that is given with the latest telerik reporting. Our designer would like us to get rid of the pagination (Our reports are max 2-3 pages) and move the parameters area around a bit, so I added the following template:

<template id="trv-report-viewer">
    <div class="trv-report-viewer w-100 h-100 gap-4">
        <div data-role="splitter" class="trv-parameters-splitter ">
            <div data-id="trv-parameters-area" class="trv-parameters-area w-25" data-role="telerik_ReportViewer_ParametersArea">
                <div class="d-flex flex-column pe-4">
                    <div class="d-flex align-items-center px-3">
                        <h3 class="flex-grow-1 ps-3">Report</h3>

                        <div class="trv-side-menu d-flex gap-3" data-role="telerik_ReportViewer_SideMenu">
                            <ul class="d-flex flex-row  gap-2" aria-label="ariaLabelSideMenu">
                                <li aria-label="ariaLabelMenuNavigateBackward">
                                    <a data-command="telerik_ReportViewer_historyBack" title="menuNavigateBackwardTitle" href="#" class="element_Action shadow-none bg-none pb-0">
                                        <i class="bi bi-arrow-90deg-left"></i>
                                    </a>
                                </li>
                                <li aria-label="ariaLabelMenuNavigateForward">
                                    <a data-command="telerik_ReportViewer_historyForward" title="menuNavigateForwardTitle" href="#" class="element_Action shadow-none bg-none pb-0">
                                        <i class="bi bi-arrow-90deg-right"></i>
                                    </a>
                                </li>

                                <li class="element_Action " aria-label="ariaLabelMenuRefresh">
                                    <a data-command="telerik_ReportViewer_refresh" title="ariaLabelMenuRefresh" class="element_Action shadow-none">
                                        <i class="bi bi-arrow-clockwise"></i>
                                    </a>
                                </li>
                                <li aria-label="ariaLabelMenuToggleMenu">
                                    <button
                                        title="Toggle Filter"
                                        type="button"
                                        class="element_Action shadow-none"
                                        onclick="toggleReportViewerParameters(event, this)">
                                        <i class="bi bi-sliders2-vertical"></i>
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="reportViewer_Parameters ">
                        <div class="trv-parameters-area-content" role="complementary">
                            <div class="trv-parameters-wrapper"></div>
                        </div>

                        <div class="trv-parameters-area-footer mt-3">
                            <button type="button" aria-label="ariaLabelParametersAreaPreviewButton" class="element_Button trv-parameters-area-preview-button">Preview</button>
                        </div>
                        <div class="trv-error-pane k-tooltip-validation k-widget">
                            <div class="trv-error-message"></div>
                        </div>
                        <div class="trv-parameters-area-overlay"></div>
                    </div>

                    <div class="d-flex flex-wrap gap-1 px-2 align-items-center reportViewer_exportOrPrint">
                        <select
                            name="exportFormat"
                            class="reportViewer_exportFormat flex-shrink-0"
                            onchange="changeReportExportFormat(this)">
                            <option value="PDF">Adobe (PDF) file</option>
                            <option value="CSV">CSV (comma delimited)</option>
                            <option value="XLS">Excel 97-2003</option>
                            <option value="XLSX">Excel Worksheet</option>
                            <option value="PPTX">PowerPoint Presentation</option>
                            <option value="RTF">Rich Text Format</option>
                            <option value="IMAGE">TIFF File</option>
                            <option value="MHTML">Web Archive</option>
                            <option value="DOCX">Word Document</option>
                            <option value="XPS">XPS Document</option>
                        </select>

                        <button class="element_Button reportViewer_exportButton" data-command="telerik_ReportViewer_export" data-command-parameter="pdf">Export</button>
                        <span class="is-dimmed px-1">or</span>
                        <button class="element_Button" data-command="telerik_ReportViewer_print">Print</button>
                    </div>
                </div>
            </div>

            <div class="k-splitbar k-splitbar-horizontal"></div>

            <div class="trv-content-wrapper w-75 bg-darkcloud">
                <div data-id="trv-pages-area" class="trv-pages-area border-0 p-4" data-role="telerik_ReportViewer_PagesArea" role="main" aria-label="ariaLabelPagesArea">
                    <div class='trv-page-container'>
                        <div class='trv-page-wrapper active'></div>
                    </div>

                    <div class='trv-error-pane'>
                        <div class="trv-centered k-tooltip-validation">
                            <div class='trv-error-message'></div>
                        </div>
                        <div style="clear: both;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<!--PARAMETERS-->
<template id="trv-parameter">
    <div class="trv-parameter-container mt-3">
        <div class="trv-parameter-header">
            <div class="trv-parameter-title label is-dimmed ps-3"></div>
        </div>

        <div class="trv-parameter-error">
            <span class="trv-parameter-error-message"></span>
        </div>
        <div class="trv-parameter-value"></div>
    </div>
</template>

<template id="trv-parameter-editor-available-values-multiselect">
    <div class="trv-parameter-editor-available-values-multiselect">
        <div class="trv-list"></div>
        <div class="trv-parameter-actions">
            <button class="trv-select-all element_Action">parameterEditorSelectAll</button>
            <button class="trv-select-none element_Action">parameterEditorSelectNone</button>
        </div>
    </div>
</template>

<template id="trv-parameter-editor-available-values-multiselect-combo">
    <div class="trv-parameter-editor-available-values-multiselect">
        <div class="trv-combo"></div>
        <div class="trv-parameter-actions">
            <button class="trv-select-all element_Actionelement_Action">parameterEditorSelectAll</button>
            <button class="trv-select-none element_Actionelement_Action">parameterEditorSelectNone</button>
        </div>
    </div>
</template>

<template id="trv-parameter-editor-available-values">
    <div class="trv-parameter-editor-available-values">
        <div class="trv-list" id="trv-parameter-editor-singleselect-list"></div>
        <div class="trv-parameter-actions">
            <button class="trv-select-none element_Action">parameterEditorSelectNone</button>
        </div>
    </div>
</template>

<template id="trv-parameter-editor-available-values-combo">
    <div class="trv-parameter-editor-available-values">
        <div class="trv-combo" id="trv-parameter-editor-singleselect-combo"></div>
        <div class="trv-parameter-actions">
            <button class="trv-select-none element_Action">parameterEditorSelectNone</button>
        </div>
    </div>
</template>

<template id="trv-parameter-editor-datetime">
    <div class="element_DateTimePicker">
        <input type="datetime" class=" trv-parameter-editor-datetime" />
    </div>
</template>

<template id="trv-parameter-editor-text">
    <div class="element_Input">
        <input type="text" class=" trv-parameter-editor-text" />
    </div>
</template>

<template id="trv-parameter-editor-number">
    <div class="element_Input">
        <input type="number" step="any" class=" trv-parameter-editor-number" />
    </div>
</template>

<template id="trv-parameter-editor-boolean">
    <input type="checkbox" class="element_Checkbox trv-parameter-editor-boolean" />
</template>

<template id="trv-parameter-editor-multivalue">
    <div class="trv-parameter-editor-multivalue element_Textarea">
        <textarea></textarea>
    </div>
</template>

Now i can see that I got multiple pages loaded, but if I scroll, then the follow-up pages do not load.

Here is how we call the template:

<telerik:ReportViewer
    ID="html5ReportViewer" ServiceUrl="/api/reports"
    EnableAccessibility="false"
    PersistSession="false"
    ParametersAreaPosition="Left"
    TemplateUrl="~/reportTemplate/reportViewerTemplate.html"
    PageMode="ContinuousScroll"
    ScaleMode="FitPageWidth"
    runat="server">

If I remove the TemplateUrl, then everything works as expected. The extra classes I added are from Bootstrap.

 

If anyone has an idea what is wrong with my template, please let me know. I've tried replacing the whole thing with the file from C:\Program Files (x86)\Progress\Telerik Reporting 2025 Q2\Html5\ReportViewer\templates but it didn't solve the issue.

 

Thanks for your future input!

[Kallol Mahata]

It's solved after I imported the reporter CSS, not just the kendo one.