Print ASP.Net GridView selected row using JavaScript and jQuery

ashok.k

SOLVED CLOSED ACTIVE ANSWERED
User: ashok.k
Posted: on Mar 09, 2018 04:10 AM
Forum: Data Controls
Answer: 2
Views: 6927
Sample Code: Download

I need to print current row of gridview, in template field i had added print button to call javascript, but it print extra one line of with the same row values.

In grid view im using dropdownlist in another template field, while printing it prints with unselected dropdown value and repeates the selected row second time after the gridview.

    <script type="text/javascript">
        function Print(a) {
            var row = $(a).closest("tr").clone(true);
            var printWin = window.open('', '', 'left=0", ",top=0,width=1000,height=600,status=0');
            var table = $("[id*=GridView12]").clone(true);
            $("tr", table).not($("tr:first-child", table)).remove();
            table.append(row);
            $("tr td:last,tr th:last", table).remove();
            var dv = $("<div />");
            dv.append(table);
            printWin.document.write(dv.html());
            printWin.document.close();
            printWin.focus();
            printWin.print();
            printWin.close();
        }
    </script>
    <asp:GridView ID="GridView12" runat="server" CellPadding="4" EnableModelValidation="True" ForeColor="#333333"
            GridLines="Both" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound" DataSourceID="SqlDataSource2" Width="100%"
            DataKeyNames="leave_id"  >
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:BoundField DataField="leave_type" HeaderText="Leave Type" SortExpression="leave_type" ReadOnly="True" />
                <asp:BoundField DataField="From_date" DataFormatString="{0:d}" HeaderText="From date" SortExpression="From_date" ReadOnly="True" />
                <asp:BoundField DataField="From_session" HeaderText="Session" SortExpression="From_session" ReadOnly="True" />
                <asp:BoundField DataField="To_date" DataFormatString="{0:d}" HeaderText="To date" SortExpression="To_date" ReadOnly="True" />
                <asp:BoundField DataField="To_session" HeaderText="Session" SortExpression="To_session" ReadOnly="True" />
                <asp:BoundField DataField="od_date"  HeaderText="OD Date" SortExpression="od_date" ReadOnly="True" />
                <asp:BoundField DataField="Reason" HeaderText="Reason" SortExpression="Reason" ReadOnly="True" />
                <asp:TemplateField HeaderText="Status">                        
                             <ItemTemplate>
                                 <asp:Label ID="lblstatus" runat="server" Text='<%# Eval("Status") %>'  />
                                <%--<%# Eval("Status")%>--%>                                
                             </ItemTemplate>  
                            <EditItemTemplate>    
                                <asp:Label ID="lblstatus" runat="server" Text='<%# Eval("Status") %>' Visible="false"  />                    
                                <asp:DropDownList ID="ddl_status" runat="server"  SelectedItem='<%# Eval("Status") %>'>
                                    <%--<asp:ListItem Value="0">Submitted</asp:ListItem>--%>
                                    <%--<asp:ListItem Value="1">Approved</asp:ListItem>
                                    <asp:ListItem Value="2">Rejected</asp:ListItem>--%>
                                    <asp:ListItem Value="3">Cancel</asp:ListItem>
                                </asp:DropDownList>
                            </EditItemTemplate>
                    </asp:TemplateField>
                <asp:TemplateField ShowHeader="False">
                    <EditItemTemplate>
                        <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update" Text="Update"></asp:LinkButton>
                        <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel"></asp:LinkButton>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit" Text="Action"></asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                <ItemTemplate>
                      <a href="javascript:;" onclick="Print(this)">Print</a>
                </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <EditRowStyle BackColor="#2461BF" />
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#EFF3FB" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
        </asp:GridView>

kalpesh

0 4

Reply
ANSWER
User: kalpesh
Replied: on Mar 12, 2018 01:19 AM
Report

Try By below script.

<script type="text/javascript">
    function Print(a) {
        var row = $(a).closest("tr").clone(true);
        var printWin = window.open('', '', 'left=0", ",top=0,width=1000,height=600,status=0');
        var table = $("[id*=GridView12]").clone(true);
        $("tr", table).not($("tr:first-child", table)).remove();
        table.append(row);
        $("tr td:last,tr th:last", table).remove();
        var dv = $("<div />");
        dv.append(table);
        printWin.document.write(dv.find('table')[0].outerHTML);
        printWin.document.close();
        printWin.focus();
        printWin.print();
        printWin.close();
    }
</script>

dharmend...

0 6

Reply
ANSWER
User: dharmendr
Replied: on Mar 13, 2018 05:40 AM
Report

Hi ashok.k,

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

HTML

<div>
    <asp:GridView ID="GridView12" runat="server" CellPadding="4" EnableModelValidation="True"
        ForeColor="#333333" GridLines="Both" AutoGenerateColumns="False" Width="100%"
        DataKeyNames="Id">
        <AlternatingRowStyle BackColor="White" />
        <Columns>
            <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
            <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
            <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
            <asp:TemplateField ShowHeader="False">
                <EditItemTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update"
                        Text="Update"></asp:LinkButton>
                    <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel"
                        Text="Cancel"></asp:LinkButton>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit"
                        Text="Action"></asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <a href="javascript:;" onclick="Print(this)">Print</a>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        <EditRowStyle BackColor="#2461BF" />
        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#EFF3FB" />
        <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    </asp:GridView>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function Print(a) {
        var row = $(a).closest("tr").clone(true);
        var printWin = window.open('', '', 'left=0", ",top=0,width=1000,height=600,status=0');
        var table = $("[id*=GridView12]").clone(true);
        $("tr", table).not($("tr:first-child", table)).remove();
        table.append(row);
        $("tr td:last,tr th:last", table).remove();
        var dv = $("<div />");
        dv.append(table);
        printWin.document.write(dv.find('table')[0].outerHTML);
        printWin.document.close();
        printWin.focus();
        printWin.print();
        printWin.close();
    }
</script>

Namespaces

using System.Data;

VB.Net

Imports System.Data

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                        new DataColumn("Name", typeof(string)),
                        new DataColumn("Country",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        GridView12.DataSource = dt;
        GridView12.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn() {New DataColumn("Id", GetType(Integer)), _
                                               New DataColumn("Name", GetType(String)), _
                                               New DataColumn("Country", GetType(String))})
        dt.Rows.Add(1, "John Hammond", "United States")
        dt.Rows.Add(2, "Mudassar Khan", "India")
        dt.Rows.Add(3, "Suzanne Mathews", "France")
        dt.Rows.Add(4, "Robert Schidner", "Russia")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
 
End Sub

Screenshot

Print ASP.Net GridView selected row using JavaScript and jQuery

Company

Explore

Follow us

Contact Us