hiding numeric textbox on PDF export

2 posts, 0 answers
  1. Scott
    Scott avatar
    2 posts
    Member since:
    Jun 2013

    Posted 26 Mar 2015 Link to this post

    How would I hide a Kendo NumericTextBox when doing a PDF export using the Drawing API's drawDOM method? Instead of the textbox, I'd like to display a label with the textbox's value. Here's a code snippet demonstrating what I'm doing now:

            require(["kendo.drawing"], function (KDrawing) {
                var _kendoDrawing = KDrawing.drawing;

                _kendoDrawing.drawDOM(objDomContainerElement).then(function (group) {
                    return _kendoDrawing.exportPDF(group, {
                        landscape: true,
                        margin: {
                            bottom: _MARGIN_SIZE,
                            left: _MARGIN_SIZE,
                            right: _MARGIN_SIZE,
                            top: _MARGIN_SIZE
                        paperSize: "auto"
                }).done(function (data) {
                        dataURI: data,
                        fileName: strPdfFileName + ".pdf",
                        proxyURL: strProxyUrl
  2. Mihai
    Mihai avatar
    153 posts

    Posted 30 Mar 2015 Link to this post

    Hi Scott,

    There are a few tricks you can use to customize the output.  To completely hide an element, give it a certain class name and then add a CSS rule that hides it when inside a .k-pdf-export element, for example:

    <div class="pdf-hide">...</div>

    /* in CSS: */
    .k-pdf-export .pdf-hide { display: none }

    However, replacing an element with something else is something you have to do manually, i.e. just hide the original element and insert the additional content before calling drawDOM, and undo the operation thereafter.  A suggestion on how to do that would be like this:

    <!-- in HTML: -->
    <span class="fieldValue"></span>
    <input class="numericTextBox" />

    /* in CSS: */
    .fieldValue { display: none }
    .k-pdf-export .fieldValue { display: inline }
    .k-pdf-export .numericTextBox { display: none }

    /* in JavaScript, before calling drawDOM: */
    $(".fieldValue").text( $(".numericTextBox").val() );

    Hope this helps.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top