This is a migrated thread and some comments may be shown as answers.

Cannot Read Property 'length' of Undefined (Print Pdf)

4 Answers 129 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Vincent
Top achievements
Rank 1
Vincent asked on 21 Sep 2015, 06:10 PM

Good afternoon. I am trying to programatically print the grid details using kendo ui. The documentation states that it's as easy

as $("#export").click(function(e) {var grid = $("#grid").data("kendoGrid");     grid.saveAsPDF();});‚Äč. 

 

However I found this to not be the case. my code is as follows

 var grid = $('#Students').data('kendoGrid');
                        grid.saveAsPDF();

 And I continue to receive the following error: "Cannot Read Property 'Length' of Undefined. What in the world am I doing so wrong. I'm able to see that I have data by hovering over the grid object in debug mode in Chrome. Why on earth would I not be able to use this function?  

 

 

Please help.

 

Vincent

 

 

4 Answers, 1 is accepted

Sort by
0
Radoslav
Telerik team
answered on 23 Sep 2015, 11:15 AM
Hi Vincent,

Thank you for contacting us.

I tried to reproduce the described issue but to no avail. On the following link you can find a simple example which uses the mentioned function.
http://dojo.telerik.com/IHOvU
However everything works as expected. Please check it out and let me know what differs in your case.

Looking forward for your reply.

Regards,
Radoslav
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Vincent
Top achievements
Rank 1
answered on 23 Sep 2015, 08:10 PM

I even tried just creating a button like so:

<button id="btnPrintStudents">Print Students</button>

 and in the scripts using

$("#Students").on('click', function(){

     var grid = $("#Students").data("kendoGrid");

      grid.saveAsPDF();

});

 

I've attached an image of what happens. The screen turns light gray as if it's doing something (but it blows up) in the console in the kendo.js file. I've attached that as well. 

0
Vincent
Top achievements
Rank 1
answered on 23 Sep 2015, 08:13 PM

Here is the MVC Razor markup

 

@(Html.Kendo().Grid<StudentSummary>()
              .Name("Students")
              .Events(e => e.DataBound("grid_dataBound"))
              .AutoBind(true)
              .Scrollable(s => s.Height("auto"))
              .Filterable(filterable => filterable.Mode(GridFilterMode.Row)
                  .Extra(false)
                  .Operators(operators => operators
                      .ForString(str => str.Clear()
                          .Contains("Contains")
                          .StartsWith("Starts with")
                          .IsEqualTo("Is Equal To")
                      )))
              .Columns(c =>
              {
                  c.Bound(m => m.Selector).Sortable(false).HeaderTemplate("<input type=\'checkbox\' id=\'checkAll\'/>").Width(30).ClientTemplate("<input type='checkbox' #= Selector? checked='checked': checked='' # class='check_row' onclick='studentdetails.StudentsChkBoxClick(this)' /").Filterable(false);
                  if (ViewBag.ShowSiteColumn)
                  {
                      c.ForeignKey(d => d.AdmSiteID, (System.Collections.IEnumerable)ViewBag.UserSites, "AdmSiteID", "SiteDescription").Title("Site");
                  }
 
                  c.Bound(m => m.LastName).Title("Last Name").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").Template("customFilter")));
                  c.Bound(m => m.FirstName).Visible(true).Title("First Name").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").Template("customFilter")));
                  c.Bound(m => m.PatronID).Title("ID").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").Template("customFilter")));
                  c.Bound(m => m.Grade).Title("Grade").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").Template("customFilter")));
                  c.Bound(m => m.Eligibility).Title("Eligibility").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").Template("customFilter")));
                  c.Bound(m => m.Balance).Title("Balance").Format("{0:c2}").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").Template("customFilter"))).HtmlAttributes(new { style = "text-align:right" });
                  c.Bound(m => m.PosPatronID).Visible(false);
                  c.Bound(m => m.AppNumber).Visible(false);
                  c.Bound(m => m.PosHouseholdID).Visible(false);
              })
              .Pageable()
              .Sortable()
              .Resizable(resize => resize.Columns(true))
                      .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
              .DataSource(d => d
                  .Ajax()
                          .Sort(sort =>
                          {
                              sort.Add(m => m.LastName).Ascending();
                          })
 
                  .Model(m =>
                  {
                      m.Id(a => a.PosPatronID);
                      m.Field(a => a.PosPatronID).Editable(false);
                  })
                                  .Read(read => read.Action("Read", "StudentRecord").Data("studentdetails.getDCStudentOnly"))
                                  .Filter(f =>
                                  {
                                      if (!sessionUser.SiteContext.IsDistrict) f.Add(a => a.AdmSiteID).IsEqualTo(sessionUser.SiteContext.AdmSiteID);
                                  })
                  .PageSize(25)
            )
            .ToolBar(toolbar =>
            {
                toolbar.Template(@<text>
                    <div class="clearCollection" style="display: none;">
                        <div><label for="showExpStudent">Expiring Student Only</label><input type="checkbox" name="showExpStudent" id="showExpStudent" onchange="studentdetails.displayExpiringApp();"></div>
                        <div><label for="showDCStudent">DC Student Only</label><input type="checkbox" name="showDCStudent" id="showDCStudent" onchange="studentdetails.displayDCStudents();"></div>
                        <div style="display:none;"><a id="clearSelection" href="#" onclick="studentdetails.clearStudentSelection_Click();">Clear Selection </a><span id="lblSelectedStudents"></span></div>
                        <div><button id="btnPrintStudents">Print Students</button></div>
                    </div>
                </text>);
            })
            )

0
Radoslav
Telerik team
answered on 24 Sep 2015, 11:04 AM
Hello Vincent,

I reviewed the MVC code and it looks correct. Also I created a small runnable example based on it. However I am not able to reproduce the described issue on my side. I am sending you this example, please check it out and let me know what differs in your end. Also it will be helpful if you could send us a simple runnable example (or modify the example which I am sending you) where the problem can be seen.
Also at a meantime could you please verify that you use the same version of MVC dll and the javascript kendo scripts?

Looking forward for your reply.

Regards,
Radoslav
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Vincent
Top achievements
Rank 1
Answers by
Radoslav
Telerik team
Vincent
Top achievements
Rank 1
Share this question
or