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
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

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.

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
>);
})
)
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