Telerik Forums
UI for ASP.NET MVC Forum
1 answer
76 views

I'm looking to implement a check when a user has scrolled to the bottom of the pdfviewer using dotnet mvc/jquery.

Iv found the following articles 

https://docs.telerik.com/devtools/wpf/knowledge-base/kb-pdfviewer-scroll-to-last-page

https://www.telerik.com/forums/how-to-access-scroller-of-pdfviewer

 

and iv managed to hook into the scroll functionality through a private scroller field like so

still figuring out the calculation...

<script>
      function onPdfViewerComplete(e){
        debugger;
        try {
                const scroller = e.sender._scroller;
                const scrollPosition = scroller.scrollTop;
                const maxScrollPosition = scroller.scrollHeight - scroller.clientHeight;

            scroller.bind('scroll', ()=> {
                if (scrollPosition >= maxScrollPosition) {
                    alert("Scrolled to the bottom of the PDF");
                }
            });
        } catch(e) {
            console.error("error", e);
        }
    }
</script>


Is there any better way to handle this? the documentation seems sparse around this.
Mihaela
Telerik team
 answered on 13 Feb 2025
1 answer
51 views

Hi,

 

I am trying to know if telerik offers to extract the selected text and its coordinates using JQuery PDFViewer control?

If yes, anyone please share the examples?

Alexander
Telerik team
 answered on 06 Sep 2024
0 answers
91 views

Hi,

I am getting extra characters like Ã¾Ã¿PDF Check in metadata of the exported PDF from Kendo grid. That reflects into the title of the PDF in chrome browser.

Is there any way to remove that extra characters from the metadata using jQuery?

I am attaching screenshot of the PDF file.

 

Trusha
Top achievements
Rank 1
Iron
 asked on 01 Apr 2024
3 answers
612 views

Hi, I would like to know if there is a way to load a PDF stored as VARBINARY(MAX) in a SQL Server Filestream field.

Thank you in advance.

 

Ivan Danchev
Telerik team
 updated answer on 02 Jan 2024
1 answer
227 views

Hello,

I'm using a Grid control with virtual scrolling.  When I export to PDF, the content runs right off of the bottom of the page without breaking to a new page.  

I have my datasource's page size set to 100 records to limit the number of times the grid will need to fetch new data from the server.  If I change this to only 5 records, for example, then the PDF will create a page break after 5 records.  However, I am also using grouping on the data.  If every row is in its own group, I can get about 6 or 7 rows onto a page.  If every row falls under the same group, I can get about 13-15 rows onto a page.  Because the number of rows per page may vary, I can't resort to setting the page size on the datasource.

My main concern at the moment is getting automatic page breaking to work.   In the screenshot I've attached, you can see that there is still some data at the very bottom of the page that is cut off.  There should be 11 rows of data, across 6 groups, but only 9 rows manage to fit onto the page.  Relevant code below:


.Pdf(pdf => pdf .FileName("BidAwards.pdf") .AllPages() .PaperSize("A4") .Landscape() .AvoidLinks() )

.DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(100)
                    .Events(events => events.Error("error_handler"))
                    .Model(model => model.Id(col => col.BidId))
                    .Read(read => read.Action("BidAwardGridData", "Reports", Model))
                    .Group(groups => groups.Add(col => col.GroupValue))

                )

 

I'd also like to find a way to keep entire groups of rows on a page if possible.  In other words, if the whole group won't fit on the remainder of the page, break to a new page for that group. 

Unfortunately, for the time being I'm stuck on an older version of the Telerik controls, and can't easily update until after this development cycle is completed (unless it's necessary to fix this).

 

Thanks!!!

Christopher
Top achievements
Rank 1
Iron
 answered on 14 Jun 2023
1 answer
170 views

Hi,

May I know what to install/need for editable PDF (eg: PDF editor)?

I've go through this blog https://www.telerik.com/blogs/editing-pdf-files-in-browser-adding-signature-text-images .

But I failed to get the result as follows:

Much appreciate if you can reply ASAP. Thank you! 

Ivan Danchev
Telerik team
 answered on 02 Feb 2023
0 answers
520 views

I currently have the following setup and it works fine. However, I need to make my controller endpoint POST and be able to pass the data that will be loaded in the PDF from the client. The examples I have found with fromFile point to a GET endpoint that takes simple parameters like Id but I need to be able to pass the actual content to be loaded in the returned PDF. Hoping someone knows a way if that is at all possible.

JavaScript


        function previewPdf(){
            //I need to pass this doc object to the endpoint
            //var doc = {
            //    case: { caseNumber: 'A12345' },
            //    title: 'Test Doc',
            //    body: $('#Content').data("kendoEditor").value() //getting content from a kendo editor the user is filling out
            //};

            // Create a viewer if you do not have one already.
            var pdfViewer = $("#pdf-viewer").data("kendoPDFViewer");
            if(!pdfViewer){
                pdfViewer = $("#pdf-viewer").kendoPDFViewer({
                    pdfjsProcessing: {
                        file: ""
                    },
                    width: 900,
                    height: window.innerHeight - 150
                }).data("kendoPDFViewer");
            }
            var pdfHandlerUrl = '@Url.Action("GetCourtDocumentPdfBytes", "CourtDocuments")';

                 // I was hoping to make an AJAX call like this and then somehow set the file to the PDF viewer but no luck.
                  //$.ajax({
                  //    type: "POST",
                  //    url: pdfHandlerUrl,
                  //    data: JSON.stringify(doc),
                  //    contentType: "application/json",
                  //    success: function(response) {
                  //      // Use the response (which should be a byte array of the PDF) to update the PDF viewer
                  //      pdfViewer.fromFile(response); // this doesn't work so clearly not setting the right type here.
                  //    }
                  //});

            // Build the desired URL to point to your handler that will return the PDF.
                  
            pdfViewer.fromFile(pdfHandlerUrl); //this is working fine just for a GET endpoint

            $("#wndPdfPreview").kendoWindow({
                modal: true,
                width: 1000,
                height: window.innerHeight - 100
            });
            $("#wndPdfPreview").data("kendoWindow").center().open();           
        }

 

My Controller endpoint.


//this approach is working.

public async Task<FileStreamResult> GetCourtDocumentPdfBytes()
        {
            CourtDocument doc = new CourtDocument { Body = "the Body", Title = "the title", Case = new Case { CaseNumber = "2018123CA01" } };
            string html = await this.RenderViewToString("_JudicialOrder", doc, true);
            var bytes = await _pdfService.CreateFromHtml(html, doc.Case.CaseNumber);

            Stream stream = new MemoryStream(bytes);
            return new FileStreamResult(stream, "application/pdf");
            //return File(bytes, "application/pdf", "test.pdf");
        }

//This is more of what I would need.
public async Task<IActionResult> GetCourtDocumentPdfBytes([FromBody] CourtDocument doc)
        {
            string html = await this.RenderViewToString("_JudicialOrder", doc, true);
            var bytes = await _pdfService.CreateFromHtml(html, doc.Case.CaseNumber);

            Stream stream = new MemoryStream(bytes);
            //return new FileStreamResult(stream, "application/pdf");
            return File(bytes, "application/pdf", "test.pdf"); // not sure what to return here to load the pdfViewer from it in the client.
        }

Michel
Top achievements
Rank 1
Iron
 asked on 28 Dec 2022
0 answers
251 views

I am trying to use the PDFViewer to display a PDF downloaded from an Azure Blob.

In my view I have:


// Create a viewer if you do not have one already.
        var pdfViewer = $("#pdfViewer").data("kendoPDFViewer");
        if (!pdfViewer) {
            pdfViewer = $("#pdfViewer").kendoPDFViewer({
                pdfjsProcessing: {
                    file: ""
                },
                width: "100%",
                height: 500
            }).data("kendoPDFViewer");
        };

        // Build the desired URL to point to your handler that will return the PDF.
        var pdfHandlerUrl = "/Home/getBlob/" + selectedRows.BlobID;

        // Make the PDFViewer load the designated file.
        pdfViewer.fromFile(pdfHandlerUrl);

An in my controller (getBlob) I have the following:


var stream = new MemoryStream();
await file.DownloadToAsync(stream);
  stream.Position = 0;
                   
 return new FileStreamResult(stream, "application/pdf");

But in the view - I get a pop-up error message that says: PDF file fails to process.

 

Any suggestions?

 

 

 

 

 

Eddie
Top achievements
Rank 1
 asked on 23 Dec 2022
1 answer
165 views

Hello, 

I am using the exact example give below in my project:

https://demos.telerik.com/aspnet-mvc/pdf-export

But when i browse this url in my iPhone Safari browser, I am not able to export the PDF. Export as Image and SVG works though. I am seeing the same issue in my project too. Any solution for this?

Thanks 

Meera

Eyup
Telerik team
 answered on 20 Oct 2021
1 answer
163 views
Displaying broken German umlauts in standalone Telerik Reporting Designer. I get this data from Postgres datasource to textboxes and table values, but on a preview and in pdf file shows incorrect symbols of German language. How can I fix that?. Thanks.
artur
Top achievements
Rank 1
Iron
 answered on 08 Jun 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?