It seems like jQuery is not getting activated. I have Mike's sample site running (webgrid to pdf) and there it works. There are squigly lines underneath appendTo, tfoot, function, "click, function"
You first code block looks like the layout page. It has al lthe html and head tags in it. How do you specify the second file as the layout for the first? Where's the RenderBody call? What does the rendered source look like? How many head tags do you end
up with?
Also, click on the Console tab on developer toools (F12 in Chrome or IE) and see if there are any javascript errors.
I have updated the site. Thanks for spotting that.
From your orginal posts, data should have 7 "columns" but your example data only shows 5 values per row or perhaps 6 but the last one or two are null, I would guess. You will probably have to wrap that part of the code in a test for null. Try this:
foreach(var row in data){
foreach(var column in columns){
table.AddCell(new Phrase(row[column] != null ? row[column] : string.Empty, arial));
}
}
The only potential problem I can see is that the number of columns in the select statement is not matched up with the number of columns in your PdfPTable constructor. Change it, but rather than hardode the number, pass in columns.Count:
var table = new PdfPTable(columns.Count) {
TotalWidth = 700f,
LockedWidth = true
};
Other than that, you will need to use the Visual Studio debugger to identify what is causing the Phrase constructor to barf.
wavemaster
Participant
1279 Points
1127 Posts
webgrid to pdf - jquery does not trigger
Feb 27, 2013 01:32 AM|LINK
It seems like jQuery is not getting activated. I have Mike's sample site running (webgrid to pdf) and there it works. There are squigly lines underneath appendTo, tfoot, function, "click, function"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Barns to be billed</title> </head> <body> <form method="post"> <br/> <div id="grid"> Barns: <select name="barn"> <option></option> @foreach(var item1 in barns){ <option @(Request["barn"] == item1.Barn ? " selected=\"selected\"" : "")>@item1.Barn</option> } </select> States: <select name="state"> <option></option> @foreach(var item2 in states){ <option @(Request["state"] == item2.BState ? " selected=\"selected\"" : "")>@item2.BState</option> } </select> <input type="submit" /> <br/> @grid.GetHtml( tableStyle : "table", alternatingRowStyle : "alternate", headerStyle : "header", columns: grid.Columns( grid.Column("TransactionId", "ID"), grid.Column("Barn", "Barn"), grid.Column("BState", "State"), grid.Column("CName", "Name"), grid.Column("Service", "Service"), grid.Column("Date", format: @<text>@item.Date.ToShortDateString()</text>), grid.Column("Charge", "Charge") ) ) <img src="/images/pdf-icon.png" id="pdf" alt="Export to PDF" title="Export to PDF" /> </div> </form> @section script{ <script type="text/javascript"> $(function () { $('#pdf).appendTo($('tfoot tr td')).on('hover', function () { $(this).css('cursor', 'pointer'); }); $('#pdf).on('click', function () { $('<iframe src="/GeneratePdf"></iframe>').appendTo('body').hide(); }); }); </script> }And _SiteLayout:
<head> <meta charset="utf-8" /> <title>@Page.Title - My ASP.NET Web Page</title> <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /> <link href="~/Content/Site.css" rel="stylesheet" type="text/css" /> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> @*<script src="~/Scripts/jquery-1.7.1.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>*@ <script src="~/Scripts/jquery-1.9.1.min.js"></script> <script src="~/Scripts/jquery-ui-1.8.20.min.js"></script> <script src="~/Scripts/modernizr-2.5.3.js"></script> @RenderSection("script", required: false) <meta name="viewport" content="width=device-width" /> </head>Mikesdotnett...
All-Star
154858 Points
19858 Posts
Moderator
MVP
Re: webgrid to pdf - jquery does not trigger
Feb 27, 2013 06:27 AM|LINK
You first code block looks like the layout page. It has al lthe html and head tags in it. How do you specify the second file as the layout for the first? Where's the RenderBody call? What does the rendered source look like? How many head tags do you end up with?
Also, click on the Console tab on developer toools (F12 in Chrome or IE) and see if there are any javascript errors.
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
wavemaster
Participant
1279 Points
1127 Posts
Re: webgrid to pdf - jquery does not trigger
Feb 28, 2013 02:26 AM|LINK
console says: SyntaxError: missing) after argument list, arrow pointing to tfoot.
Hoovering over the icon or clicking on it does nothing.
Here is the full page that retrieves the data and creates the WebGrid.
@{ Layout = "~/_SiteLayout.cshtml"; Page.Title = "Work Today"; @*// Only allow members of specified roles to access this page. WebSecurity.RequireRoles("Lurker");*@ //Is the user logged in? WebSecurity.RequireAuthenticatedUser(); var userid = WebSecurity.CurrentUserId; var db = Database.Open("StarterSite"); var farrierid = db.QueryValue("SELECT FarrierId FROM UserAsFarrier WHERE UserId=@0", userid); var query1 = "SELECT DISTINCT BState FROM Barns ORDER BY BState"; var states = db.Query(query1); var query2 = "SELECT DISTINCT Barn FROM Barns ORDER BY Barn"; var barns = db.Query(query2); var selectQueryString = @"SELECT TransactionId, Barn, BState, Clients.CName, Service, Charge, Date FROM Transactions, Barns, Clients WHERE Transactions.BarnId = Barns.BarnId AND Transactions.ClientId = Clients.ClientId AND Transactions.FarrierId=@0 AND IsBilled=@1 AND Barn LIKE @2 AND BState LIKE @3"; var barn = "%" + Request["barn"] + "%"; var state = "%" + Request["state"] + "%"; var data = db.Query(selectQueryString, farrierid, false, barn, state); var columns = new[] { "TransactionId", "Barn", "State", "CName", "Service", "Date", "Charge" }; @*var grid = new WebGrid(data, columnNames: columns, rowsPerPage: 10); *@ var grid = new WebGrid(data, ajaxUpdateContainerId: "grid", columnNames: columns, rowsPerPage: 10); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Barns to be billed</title> </head> <body> <form method="post"> <br/> <div id="gridContainer"> <div id="grid"> Barns: <select name="barn"> <option></option> @foreach(var item1 in barns){ <option @(Request["barn"] == item1.Barn ? " selected=\"selected\"" : "")>@item1.Barn</option> } </select> States: <select name="state"> <option></option> @foreach(var item2 in states){ <option @(Request["state"] == item2.BState ? " selected=\"selected\"" : "")>@item2.BState</option> } </select> <input type="submit" /> <br/> @grid.GetHtml( tableStyle : "table", alternatingRowStyle : "alternate", headerStyle : "header", columns: grid.Columns( grid.Column("TransactionId", "ID"), grid.Column("Barn", "Barn"), grid.Column("BState", "State"), grid.Column("CName", "Name"), grid.Column("Service", "Service"), grid.Column("Date", format: @<text>@item.Date.ToShortDateString()</text>), grid.Column("Charge", "Charge") ) ) <img src="/images/pdf-icon.png" id="pdf" alt="Export to PDF" title="Export to PDF" /> </div> </div> </form> @section script{ <script type="text/javascript"> $(function () { $('#pdf).appendTo($('tfoot tr td')).on('hover', function () { $(this).css('cursor', 'pointer'); }); $('#pdf).on('click', function () { $('<iframe src="/GeneratePdf"></iframe>').appendTo('body').hide(); }); }); </script> } </body> </html>And here is _SiteLayout.cshtml
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>@Page.Title - My ASP.NET Web Page</title> <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /> <link href="~/Content/Site.css" rel="stylesheet" type="text/css" /> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> @*<script src="~/Scripts/jquery-1.7.1.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>*@ <script src="~/Scripts/jquery-1.9.1.min.js"></script> <script src="~/Scripts/jquery-ui-1.8.20.min.js"></script> <script src="~/Scripts/modernizr-2.5.3.js"></script> @RenderSection("script", required: false) <meta name="viewport" content="width=device-width" /> </head>And the render body call:
<div id="body"> @RenderSection("featured", required: false) <section class="content-wrapper main-content clear-fix"> @RenderBody() </section> </div> <footer> <div class="content-wrapper"> <div class="float-left"> <p>© @DateTime.Now.Year - My ASP.NET Web Page</p> </div> </div> </footer>Mikesdotnett...
All-Star
154858 Points
19858 Posts
Moderator
MVP
Re: webgrid to pdf - jquery does not trigger
Feb 28, 2013 04:44 AM|LINK
you are missing a closing ' after '#pdf
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
wavemaster
Participant
1279 Points
1127 Posts
Re: webgrid to pdf - jquery does not trigger
Mar 02, 2013 02:56 AM|LINK
I have added ' (wrong on mikesdotnetting website too) and I can now click on the icon and GeneratePDF executes.
Then there is an error here table.AddCell(new Phrase(row[column], arial));
Runtime binderexception was unhandled by user code
{"The best overloaded method match for 'iTextSharp.text.Phrase.Phrase(float, iTextSharp.text.Chunk)' has some invalid arguments"}
It bails out the first time it hits that line.
Below is 'data'
First cell top left is TransactionId, it is an integer.
Would appreciate any ideas on how to troubleshoot this.
TIA
Robert
,
Mikesdotnett...
All-Star
154858 Points
19858 Posts
Moderator
MVP
Re: webgrid to pdf - jquery does not trigger
Mar 02, 2013 07:16 AM|LINK
I have updated the site. Thanks for spotting that.
From your orginal posts, data should have 7 "columns" but your example data only shows 5 values per row or perhaps 6 but the last one or two are null, I would guess. You will probably have to wrap that part of the code in a test for null. Try this:
foreach(var row in data){ foreach(var column in columns){ table.AddCell(new Phrase(row[column] != null ? row[column] : string.Empty, arial)); } }Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
wavemaster
Participant
1279 Points
1127 Posts
Re: webgrid to pdf - jquery does not trigger
Mar 02, 2013 01:56 PM|LINK
Mike,
I came to the conclusion that the icon only serves as a trigger, and no data is passed to GeneratePdf.
If that is the case then it wouldn't matter if the query I use for the webgrid is different than the query I use to create the pdf.
I ran the code again with just a single column being the result of the query in GeneratePdf. Same error.
Or did I come to the wrong conclusion?
Your sample code works fine.
Mikesdotnett...
All-Star
154858 Points
19858 Posts
Moderator
MVP
Re: webgrid to pdf - jquery does not trigger
Mar 02, 2013 04:40 PM|LINK
Can you show the code that youi have in GeneratePdf?
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
wavemaster
Participant
1279 Points
1127 Posts
Re: webgrid to pdf - jquery does not trigger
Mar 02, 2013 04:57 PM|LINK
Mikesdotnett...
All-Star
154858 Points
19858 Posts
Moderator
MVP
Re: webgrid to pdf - jquery does not trigger
Mar 02, 2013 07:04 PM|LINK
The only potential problem I can see is that the number of columns in the select statement is not matched up with the number of columns in your PdfPTable constructor. Change it, but rather than hardode the number, pass in columns.Count:
var table = new PdfPTable(columns.Count) { TotalWidth = 700f, LockedWidth = true };Other than that, you will need to use the Visual Studio debugger to identify what is causing the Phrase constructor to barf.
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter