My select doesn't show up and the number either in my PDF

4 posts, 0 answers
  1. Claudia
    Claudia avatar
    6 posts
    Member since:
    Feb 2017

    Posted 21 Mar 2017 Link to this post

    This is my example. As you can see whatever I selected the selection doesn't show up and I have numeration increasing using css and is not working either when I exported the html to PDF.

    Can any body help me please.

     

    <!DOCTYPE html>
    <html>
    <head>
        
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
       
      
      
        <script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2017.1.223/js/jszip.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
    </head>
    <body>
    <div id="example" class="content-wrapper">
     
          <div class="box wide hidden-on-narrow">
              <h4>Export page content</h4>
              <div class="box-col">
                  <button class='export-pdf k-button'>Export as PDF</button>
              </div>
          </div>
                
        <main>
            <section class="row foodSect">
              <div class="section">
    <h1 class="col-md-5">Section</h1>
              </div>
              <div class="col-md-12 subsections">
                <h2 class="col-md-5">Subsections</h2>
                <div class="col-md-12 standards">
                    <h3 class="col-md-5">Standard</h3>
                    <div class="assessment">
    <div class="title">
     <select id="ass111Sel" class="selassessment">
     <!--option value="assOK" selected>ASSESSMENT</option-->
     <option value="1ass" selected>ASSESSMENT</option>
     <option value="1w">Warning</option>
     <option value="1minc">ASSESSMENT Minor Non-Compliance</option>
     <option value="1mjnc">ASSESSMENT Major Non-Compliance</option>
     </select>
    </div>
         </div>
                   <h3 class="col-md-5">Standard 2</h3>
                  <div class="assessment">
    <div class="title">
     <select id="ass112Sel" class="selassessment">
     <!--option value="assOK" selected>ASSESSMENT</option-->
     <option value="1ass" selected>ASSESSMENT</option>
     <option value="1w">Warning</option>
     <option value="1minc">ASSESSMENT Minor Non-Compliance</option>
     <option value="1mjnc">ASSESSMENT Major Non-Compliance</option>
     </select>
    </div>
         </div>
                </div>
             </div> 
            </section>
        </main>

    <style>
        /*
            Use the DejaVu Sans font for display and embedding in the PDF file.
            The standard PDF fonts have no support for Unicode characters.
        */
        .k-widget {
            font-family: "DejaVu Sans", "Arial", sans-serif;
            font-size: .9em;
        }
      
      
      .foodSect {
          counter-reset: section;
      }

      .foodSect h1 {
          counter-reset: subsection;
      }

      .foodSect h2 {
        counter-reset: standards;
      }

      

      .foodSect h1:before {
          counter-increment: section;
          content: counter(section) ".";
      }

      .foodSect h2:before {
          counter-increment: subsection;
          content: counter(section) "." counter(subsection) " ";
      }

      .foodSect h3:before {
          counter-increment: standards;
          content: counter(section) "." counter(subsection) "." counter(standards) " ";
      }

    </style>

    <script>
        // Import DejaVu Sans font for embedding

        // NOTE: Only required if the Kendo UI stylesheets are loaded
        // from a different origin, e.g. cdn.kendostatic.com
        kendo.pdf.defineFont({
            "DejaVu Sans"             : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans.ttf",
            "DejaVu Sans|Bold"        : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
            "DejaVu Sans|Bold|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
            "DejaVu Sans|Italic"      : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
        });
    </script>

    <!-- Load Pako ZLIB library to enable PDF compression -->


    <script>
    $(document).ready(function() {

        $(".export-pdf").click(function() {
            // Convert the DOM element to a drawing using kendo.drawing.drawDOM
            kendo.drawing.drawDOM($("#example"),{
            multiPage: true,
                  paperSize: [1100, 1430], 
                  landscape:true,
                  date:true,
                  page:true,
                  title: true,
                  author:true,
                  margin: {left: "1cm", top: "1cm", right: "1cm", bottom: "1cm"}
            })
            .then(function(group) {
                // Render the result as a PDF file
                return kendo.drawing.exportPDF(group);
            })
            .done(function(data) {
                // Save the PDF file
                kendo.saveAs({
                    dataURI: data,
                    fileName: "HR-Dashboard.pdf",
                    proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
                });
            });
        });

        
                

        
       });
    </script>



    </body>
    </html>

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    771 posts

    Posted 24 Mar 2017 Link to this post

    Hi Claudia,

    The drawing of <select> HTML elements is imperfect and such behaviour is expected. This is outlined in the known limitations section at:

    http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#known-limitations

    If you use a Kendo UI DropDownList, everything will work as expected.

    Regards,
    Alex Hajigeorgieva
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Claudia
    Claudia avatar
    6 posts
    Member since:
    Feb 2017

    Posted 24 Mar 2017 in reply to Alex Hajigeorgieva Link to this post

    Hi, thanks for your answer. That is what i did. Basically I founded that is I put "paperSize: [1100, 1430], " inside the - return kendo.drawing.exportPDF(group) -, the selects work very well, but not when is inside - kendo.drawing.drawDOM -. I putted there because I need an automatically break page.
  4. Niko
    Admin
    Niko avatar
    404 posts

    Posted 28 Mar 2017 Link to this post

    Hello Claudia,

    This is a limitation in the way the auto page breaking algorithm computes the layout of the page to decide what goes in or not.

    You can still work around this limitation in the same way described in the documentation - use DropDownList instead of the <select> tag.

    Hope this helps.

    Regards,
    Niko
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top