How to Export ASPNet GridView with TemplateField to PDF Excel CSV and Copy To ClipBoard using jQuery DataTable PluginhttpswwwaspforumsnetThreads737639ApplyjQueryDataTableplugintoASPNetGridViewwithTemplltscript type34textjavascript34gt function 39idGridView139prepend34lttheadgtlttheadgt34appendthisfind34trfirst34DataTable 39aoColumnDefs39 39bSortable39 false

Hi aspvijay04Check this example Now please take its reference and correct your codeHTMLltscript type34textjavascript34 src34httpscdnjscloudflarecomajaxlibsjquery183jqueryminjs34gtltscriptgtltlink rel34stylesheet34 href34httpscdndatatablesnet11012cssjquerydataTablesmincss34 gtltlink rel34stylesheet34 href34httpscdndatatablesnetbuttons122cssbuttonsdataTablesmincss34 gtltscript type34textjavascript34 src34httpscdndatatablesnet11012jsjquerydataTablesminjs34gtltscriptgtltscript type34textjavascript34 src34httpscdndatatablesnetbuttons122jsdataTablesbuttonsminjs34gtltscriptgtltscript type34textjavascript34 src34httpscdnjscloudflarecomajaxlibsjszip250jszipminjs34gtltscriptgtltscript type34textjavascript34 src34httpscdnrawgitcombpampuchpdfmake0118buildpd

Export GridView to PDF, Excel, CSV and Copy To ClipBoard using jQuery DataTable Plugin

aspvijay...

SOLVED CLOSED ACTIVE ANSWERED
User: aspvijay04
Posted: on May 10, 2018 12:33 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 10313
Sample Code: Download

How to Export ASP.Net GridView with TemplateField to PDF, Excel, CSV and Copy To ClipBoard using jQuery DataTable Plugin.

https://www.aspforums.net/Threads/737639/Apply-jQuery-DataTable-plugin-to-ASPNet-GridView-with-Templ

<script type="text/javascript">
    $(function () {
        $('[id*=GridView1]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
        'aoColumnDefs': [{
        'bSortable': false,
        'aTargets': [0] /* index of the column which you want to disable sorting*/
         }],
         buttons: ['pageLength',
                      { extend: 'copyHtml5', text: 'Copy to clipboard' },
                      { extend: 'excelHtml5', text: 'Export to Excel' },
                      { extend: 'pdfHtml5', orientation: 'landscape', pageSize: 'LEGAL', text: 'Export to PDF', exportOptions: { columns: ':visible' } }, 'colvis'
                  ]

         //'iDisplayLength': 40
        });
    });
</script>

above code is not working, please suggest

i am trying to export grid value in pdf, excel

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 1

Reply
ANSWER
User: dharmendr
Replied: on May 10, 2018 01:15 AM
Report

Hi aspvijay04,

Check this example. Now please take its reference and correct your code.

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('[id*=GridView1]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
            dom: 'Bfrtip',
            'aoColumnDefs': [{ 'bSortable': false, 'aTargets': [0]}],
            'iDisplayLength': 2,
            buttons: [
                { extend: 'copy', text: 'Copy to clipboard', className: 'exportExcel', exportOptions: { modifier: { page: 'all'}} },
                { extend: 'excel', text: 'Export to Excel', className: 'exportExcel', filename: 'Agenda_Excel', exportOptions: { modifier: { page: 'all'}} },
                { extend: 'csv', text: 'Export to CSV', className: 'exportExcel', filename: 'Agenda_Csv', exportOptions: { modifier: { page: 'all'}} },
                { extend: 'pdf', text: 'Export to PDF', className: 'exportExcel', filename: 'Agenda_Pdf', orientation: 'landscape', pageSize: 'LEGAL', exportOptions: { modifier: { page: 'all' }, columns: ':visible'} }
            ]
        });
    });
</script>
<div>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="w3-table-all w3-hoverable"
        HeaderStyle-BackColor="#FFCCCC" Width="100%" ClientIDMode="Static">
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:CheckBox ID="checkAll" runat="server" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField Visible="false">
                <ItemTemplate>
                    <asp:Label ID="lblaid" runat="server" Text='<%#Eval("aid") %>'> </asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
                HeaderText="Action Point">
                <ItemTemplate>
                    <asp:Label ID="lblagenda" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
                        Text='<%#Eval("agenda_name") %>'>
                    </asp:Label>
                </ItemTemplate>
                <HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
            </asp:TemplateField>
            <asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
                HeaderText="Agenda No.">
                <ItemTemplate>
                    <asp:Label ID="lblfid" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
                        Text='<%#Eval("a_id") %>'>
                    </asp:Label>
                </ItemTemplate>
                <ControlStyle Width="100px" />
                <HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
            </asp:TemplateField>
            <asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
                Visible="false">
                <ItemTemplate>
                    <asp:Label ID="lblghmail" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
                        Text='<%#Eval("gh_mail") %>'>
                    </asp:Label>
                </ItemTemplate>
                <HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
            </asp:TemplateField>
            <asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
                HeaderText="Group Name">
                <ItemTemplate>
                    <asp:Label ID="lblgname" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
                        Text='<%#Eval("group_name") %>'>
                    </asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
                Visible="false">
                <ItemTemplate>
                    <asp:Label ID="lblgid" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
                        Text='<%#Eval("gh_id") %>'>
                    </asp:Label>
                </ItemTemplate>
                <HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
            </asp:TemplateField>
            <asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
                HeaderText="Status">
                <ItemTemplate>
                    <asp:Label ID="lblstatus" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
                        Text='<%#Eval("agenda_status") %>'>
                    </asp:Label>
                </ItemTemplate>
                <ControlStyle Width="100px" />
                <HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
            </asp:TemplateField>
            <asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
                Visible="false">
                <ItemTemplate>
                    <asp:Label ID="lblduedate" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
                        Text='<%#Eval("due_date") %>'>
                    </asp:Label>
                </ItemTemplate>
                <ControlStyle Width="100px" />
                <HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
            </asp:TemplateField>
            <asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
                Visible="false">
                <ItemTemplate>
                    <asp:Label ID="lblreminder" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
                        Text='<%#Eval("REMINDER_DATE") %>'>
                    </asp:Label>
                </ItemTemplate>
                <ControlStyle Width="100px" />
                <HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
            </asp:TemplateField>
            <asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
                Visible="false">
                <ItemTemplate>
                    <asp:Label ID="lblpo" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
                        Text='<%#Eval("A_PO") %>'>
                    </asp:Label>
                </ItemTemplate>
                <ControlStyle Width="100px" />
                <HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
            </asp:TemplateField>
            <asp:BoundField DataField="mdate" HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px"
                HeaderStyle-ForeColor="Black" HeaderText="Meeting Date" ItemStyle-Font-Bold="True"
                ItemStyle-Font-Names="Arial" ItemStyle-Font-Size="12px" DataFormatString="{0:dd/MMM/yyyy}">
                <ControlStyle Width="60px" />
                <HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
                <ItemStyle Font-Bold="True" Font-Names="Arial" Font-Size="12px" />
            </asp:BoundField>
        </Columns>
        <HeaderStyle BackColor="#4dc3ff" />
        <EmptyDataTemplate>
            No Record Available
        </EmptyDataTemplate>
    </asp:GridView>
</div>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] 
                { 
                    new DataColumn("aid", typeof(int)), new DataColumn("agenda_name", typeof(string)),
                    new DataColumn("a_id",typeof(string)), new DataColumn("gh_mail", typeof(string)),
                    new DataColumn("group_name", typeof(string)), new DataColumn("gh_id", typeof(string)),
                    new DataColumn("agenda_status", typeof(string)), new DataColumn("due_date", typeof(DateTime)),
                    new DataColumn("REMINDER_DATE", typeof(DateTime)), new DataColumn("A_PO", typeof(string)),
                    new DataColumn("mdate", typeof(DateTime))
                });
        dt.Rows.Add(1, "Name 1", "1", "test1@test.com", "Group 1", "1", "Active", "05/09/2018", "05/09/2018", "1", "05/09/2018");
        dt.Rows.Add(2, "Name 2", "2", "test2@test.com", "Group 2", "2", "Inactive", "05/09/2018", "05/09/2018", "2", "05/09/2018");
        dt.Rows.Add(3, "Name 3", "3", "test3@test.com", "Group 3", "3", "inactive", "05/09/2018", "05/09/2018", "3", "05/09/2018");
        dt.Rows.Add(4, "Name 4", "4", "test4@test.com", "Group 4", "4", "Active", "05/09/2018", "05/09/2018", "4", "05/09/2018");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Export GridView to PDF, Excel, CSV and Copy To ClipBoard using jQuery DataTable Plugin

Company

Explore

Follow us

Contact Us