webgrid to pdf - jquery does not trigger : The Official Microsoft ASP.NET Forums

Reply

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>

Reply

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.

Regards, Mike
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter

Reply

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>&copy; @DateTime.Now.Year - My ASP.NET Web Page</p>
                </div>
            </div>
        </footer>

Reply

Mikesdotnett...

All-Star

154858 Points

19858 Posts

Moderator

MVP

Re: webgrid to pdf - jquery does not trigger

Feb 28, 2013 04:44 AM|LINK

wavemaster
$('#pdf).appendTo

you are missing a closing ' after '#pdf

Regards, Mike
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter

Reply

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

180,	1,	1,	True,	122,
181,	1,	1,	True,	123,
182,	5,	2,	True,	124,
183,	6,	2,	True,	124,
184,	1,	1,	True,	125,
185,	6,	2,	True,	126,
186,	5,	2,	True,	126,
187,	5,	2,	True,	127,
188,	6,	2,	True,	127,
189,	5,	2,	True,	128,
190,	6,	2,	True,	128,
191,	1,	1,	True,	129,
192,	3,	1,	True,	130,

,

Edited by wavemaster on Mar 02, 2013 02:58 AM

Reply

Mikesdotnett...

All-Star

154858 Points

19858 Posts

Moderator

MVP

Re: webgrid to pdf - jquery does not trigger

Mar 02, 2013 07:16 AM|LINK

wavemaster
(wrong on mikesdotnetting website too)

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

Regards, Mike
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter

Reply

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.

Reply

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?

Regards, Mike
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter

Reply

wavemaster

Participant

1279 Points

1127 Posts

Re: webgrid to pdf - jquery does not trigger

Mar 02, 2013 04:57 PM|LINK

@using iTextSharp.text;
@using iTextSharp.text.pdf;
@{
    Layout = null;
    Response.AddHeader("Content-disposition", "attachment; filename=report.pdf");
    Response.ContentType = "application/octet-stream";
    var db = Database.Open("StarterSite");
    var sql = "SELECT TransactionId, BarnId, ClientId, IsBilled, BillNo FROM Transactions";
    var data = db.Query(sql);
    
    var columns = data.First().Columns;
 
    var doc = new Document();
    PdfWriter.GetInstance(doc, Response.OutputStream);
    doc.SetPageSize(PageSize.A4.Rotate());
    var arial = FontFactory.GetFont("Arial", 8, Color.BLACK);
    var arialBold = FontFactory.GetFont("Arial", 10, Font.BOLD, Color.BLACK);
    doc.Open();
    var table = new PdfPTable(7) {
        TotalWidth = 700f, 
        LockedWidth = true
    };
 
    foreach(var column in columns){
        table.AddCell(new Phrase(column, arialBold));
    }
    foreach(var row in data){
        foreach(var column in columns){
            table.AddCell(new Phrase(row[column], arial));
        }
    }
    doc.Add(table);
    doc.Close();
}

Reply

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.

Regards, Mike
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter

webgrid to pdf - jquery does not trigger RSS

17 replies

wavemaster

webgrid to pdf - jquery does not trigger

Mikesdotnett...

Re: webgrid to pdf - jquery does not trigger

wavemaster

Re: webgrid to pdf - jquery does not trigger

Mikesdotnett...

Re: webgrid to pdf - jquery does not trigger

wavemaster

wavemaster

Re: webgrid to pdf - jquery does not trigger

Mikesdotnett...

Re: webgrid to pdf - jquery does not trigger

wavemaster

wavemaster

Re: webgrid to pdf - jquery does not trigger

Mikesdotnett...

Re: webgrid to pdf - jquery does not trigger

wavemaster

Re: webgrid to pdf - jquery does not trigger

Mikesdotnett...

Re: webgrid to pdf - jquery does not trigger

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft