HTML5 Report Viewer hide/disable Search button

[Joe]

I'm having issues with hiding or disabling the Search button on the Report Viewer. 

I found the attribute here for the Search Dialog:

https://docs.telerik.com/reporting/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/api-reference/data-attributes

I found this link on how to disable a button in the Viewer:

https://docs.telerik.com/reporting/knowledge-base/hide-or-change-html5-report-viewer-toolbar-buttons

But when I try it, the Search button continues to be active.

This is the code I have below. I would also point out that the reason I am trying to hide the Search is because when I do try to a search, I get a bunch of gobbly-gook that appears in the results. See attached. I'm not sure what that is all about. So I am willing to keep the Search button active as an alternative if there is a way to return clean results.

    <script type="text/javascript">

        $("#reportViewer1")
            .telerik_ReportViewer({
                serviceUrl: "api/reports/",
                //templateUrl: /ReportViewer/templates/telerikReportViewerTemplate-FA-19.0.25.211.html
                reportSource: {
                    report: "PhoneDirectory.trdp",
                    parameters: {
                        CultureID: "en"
                    },
                    viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
                    scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
                    /*                    renderingEnd: onRenderingEnd,*/
                    ready: function () {
                        $("[data-command='telerik_ReportViewer_toggleSearchDialog']").parent().hide();
                    },

                    scale: 1.0,
                    enableAccessibility: false,
                    sendEmail: { enabled: true }
                }
            });
    </script>-->

[Ivet]

Hello Joe,

Thank you for the screenshot and detailed description of the scenario.

If I understand correctly, you want to remove the 'Search' button from the toolbar.

If so, you are on the right way. I used the Hide/Change HTML5 Report Viewer toolbar buttons - Telerik Reporting article. From step 2, I copied the 'ready' event and pasted it into the viewer. I changed the name and removed '.parent()' because we want to remove only one button, not the whole toolbar. Below you will see the snippet code I made and a picture of the final result:

$("#reportViewer1")
    .telerik_ReportViewer({
        serviceUrl: "api/reports/",

        ready: function () {
            $("[data-command='toggleSearchDialog']").hide();
        },
        reportSource: {

            report: "Report Catalog.trdp",
        },
        viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
        scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
        enableAccessibility: false,
        sendEmail: { enabled: true }
    });

I hope the sample will help. Let me know if you have other questions.

Regards,
Ivet
Progress Telerik

[Joe]

Hi Ivet - It looks like you removed .parent and changed the data-command value. I just tried that and plugged that into my code and the Search button continues to show. I don't see any errors in the console.

I did try the other method listed to do this, using a Template, and that method does hide the Search button. So that's good at least.

Was hoping we could get it working in the html5 report viewer as I was trying to expand the document tree map by default using the link below. Of course, that doesn't work either. Not finding anything whether this is possible or not in a Template. Do you know if it is?

https://docs.telerik.com/reporting/knowledge-base/how-to-expand-document-map-tree-by-default-in-html5-viewers