How to "Enable Selection" in a kendoPDFViewer component

[Alireza]

I'm using a KendoPDFViewer component, and it works fine.

I want to enable selection by default, so that the use don't need to enable it manually. 

I want to know in the following code snipet, how can i set "Enable Selection" property to true?

function createPdfViewer($elem) {
	$.when(
		$.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"),
		$.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js")
	).done(function () {
		window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
	}).then(function () {
		$elem.kendoPDFViewer({
			pdfjsProcessing: {
				file: $elem[0].dataset.filename
			},
			width: $elem[0].dataset.width,
			height: $elem[0].dataset.height
		}).data("kendoPDFViewer");
	});
}

[Aleksandar]

Hello Alireza,

A possible approach to achieve the desired result is to handle the render event of the PDFViewer. The PDF Viewer uses internally the Toolbar widget, so for example, on the first time the render event is fired, you can get a reference to the Enable Selection button and call the toggle method of the Toolbar:

<script>
      var firstRender = true;
      $(document).ready(function () {
        var vr=  $("#pdfViewer").kendoPDFViewer({
          pdfjsProcessing: {
            file: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
          },
          width: "100%",
          height: 1200,
          render: function(e) {
            if (firstRender) {
              var selectionElement = $(".k-toolbar").find('a[title="Enable Selection"]');
              e.sender.toolbar.toggle(selectionElement, true);

              firstRender = false;
            }
          }
        }).getKendoPDFViewer();            
      });
    </script>

Here is a runnable example of the above-suggested approach.

I hope this helps achieve the desired result.

Regards,
Aleksandar
Progress Telerik

[David]

This does not work. Whilst the arrow button for select mode is highlighted, the hand cursor is still displayed and pan mode is still selected.

[Alireza]

For me it's working. Check the runable example in @Aleksander post again. you can test it there.

[David]

I tried Aleksander's example in his dojo, and it is not working for me. This was with edge, chrome, and ie.

[Martin]

Could you please try this version of the example and let me know if it works as expected?

[Ian]

With the latest versions the toolbar button is not implemented with a link (a), they are now implemented with a button.

So this line needs to be:
 var selectionElement = $(".k-toolbar").find('button[title="Enable Selection"]');