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

[Joe]

I was just about to send you the project - I went to go put the code back in so it wasn't using the template solution, and of course now it works - no more Search button visible. And not only that, the other feature I was trying to get to work, expanding the document map on load, that is also working too.  I wonder if clearing the cache worked, but, I had to reboot too....since I do that every night?

Programming is so much fun!!

    <script type="text/javascript">
        $(document).ready(function () { 
            themeSwitcher('#theme-switcher', '#theme-css');

        $("#reportViewer1")
            .telerik_ReportViewer({
                serviceUrl: "api/reports/",
                ///templateUrl: /ReportViewer/templates/telerikReportViewerTemplate-FA-19.0.25.211.html
                //templateUrl: 'templates/telerikReportViewerTemplate.html',
                renderingEnd: onRenderingEnd,
                ready: function () {
                    $("[data-command='toggleSearchDialog']").hide();
                },

                reportSource: {
                    report: "PhoneDirectory.trdp",
/*                    searchMetadataOnDemand: true,*/
                    parameters: {
                        CultureID: "en"
                    },
                    viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
                    scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
                 
                    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

[Ivet]

Hi Joe,

Could you please let me know if you have refreshed your browser? It's possible that previous scripts and styles are being cached.

To be more helpful, could you please send me your project so I can test it and try to find a solution. If you are hesitant to send your project here, you can open a ticket and provide the details there.

Looking forward to your next reply.

[Joe]

Hi Ivet - I cleared the cache/browsing history/did a refresh in Google Chrome but I still see the Search button.

Interestingly, I tried using the Microsoft Edge browser instead and the Search button was not visible.  So maybe it's a browser specific issue?

I'm perfectly fine with using the Template option as that seems to work. If you want to investigate, let me know and I can send you the project.

[Dimitar]

Hi Joe,

I tested Ivet's code snippet with the Edge, Chrome, and Firefox browsers but it worked with each of them locally.

It is not expected that this command would not work in one of them, especially considering that both Chrome and Edge are based on Chromium and should generally act very similarly.

By any chance, have you checked if the Chrome browser is updated to the latest version? Also, have you tried disabling any extensions that may affect JS code? You mentioned that you have cleared the cache already but I suggest trying opening the page with the viewer in an incognito window where no cache and no extension(usually) will be present.

If the issue persists even with the latest version and in an incognito window, we would indeed appreciate it if you could send us a sample project where the issue is reproducible so that we can investigate.