Ep

Ep

OBOUT Grid - Export to Excel and Word Client Side in JavaScript

ASP.NET Grid - Exporting to MS Excel and MS Word


In previous articles I have explained about OBOUT Grid Control - .Net, C# - Binding Obout Grid to DataTable and C# - Exporting OBOUT Grid to Excel in Asp .Net Server Side. In this article I will show how to Export to Excel and Word Client Side in JavaScript. Find the source code below:

ASP.NET Grid - Exporting to MS Excel and MS Word

Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="obout_Grid_NET" Namespace="Obout.Grid" TagPrefix="obout" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>OBOUT Grid - Export to Excel and Word Client Side in JavaScript</title>
    <script type="text/javascript">

        // Setting column to export
        function getColumnsForExport() {
            var arrColumnsForExport = new Array();
            arrColumnsForExport.push("Name");
            arrColumnsForExport.push("Address");
            return arrColumnsForExport.join(",");
        }

        // Exporting to excel file
        function exportToExcel() {
            var sFileName = "efile1";

            var sColumnsForExport = getColumnsForExport();
            grdview_details.exportToExcel(sFileName, true, true, true, true, true, sColumnsForExport);
        }

        // Exporting to word document
        function exportToWord() {
            var sFileName = "wfile1";

            var sColumnsForExport = getColumnsForExport();
            grdview_details.exportToWord(sFileName, true, true, true, true, true, sColumnsForExport)
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <obout:Grid ID="grdview_details" AllowSorting="true" PageSize="5" AllowManualPaging="true" runat="server" FolderExports="resources/exports" OnExported="grdview_details_Exported">
                        <%--<CssSettings CSSExportHeaderCellStyle="font-weight: bold;text-decoration: underline;color: #0000FF;"
                            CSSExportCellStyle="font-weight: normal;font-style: italic;color: #FF0000;" />--%>

                        <ExportingSettings ExportedFilesLifeTime="5" />
                    </obout:Grid>
                </ContentTemplate>
            </asp:UpdatePanel>
            <br />
            <br />
            <a href="#" onclick="exportToExcel();">Export to excel</a><br />
            <br />
            <a href="#" onclick="exportToWord()">Export to Word</a>
        </div>
    </form>
</body>

</html>

---

Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindOboutTest();
        }
    }
    private void BindOboutTest()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("EmpId", typeof(int));
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("Address", typeof(string));
        dt.Columns.Add("Date", typeof(DateTime));

        //
        // Here we add five DataRows.
        //
        dt.Rows.Add(25, "Rk", "Gurgaon", DateTime.Now);
        dt.Rows.Add(50, "Sachin", "Noida", DateTime.Now);
        dt.Rows.Add(10, "Nitin", "Noida", DateTime.Now);
        dt.Rows.Add(21, "Aditya", "Meerut", DateTime.Now);
        dt.Rows.Add(100, "Mohan", "Banglore", DateTime.Now);

        dt.Rows.Add(251, "PK", "Gurgaon", DateTime.Now);
        dt.Rows.Add(501, "Kanti", "Noida", DateTime.Now);
        dt.Rows.Add(101, "Ankit", "Noida", DateTime.Now);
        dt.Rows.Add(211, "Arun", "Meerut", DateTime.Now);
        dt.Rows.Add(101, "Tonu", "Banglore", DateTime.Now);

        grdview_details.DataSource = dt;       
        grdview_details.DataBind();      

    }
    protected void grdview_details_Exported(object sender, Obout.Grid.GridExportEventArgs e)
    {
        foreach (TableRow item in e.Table.Rows)
        {
            int cellcount = item.Cells.Count;
            for (int i = 0; i < cellcount; i++)
            {
                item.Cells[i].Style.Add("border", "thin solid black");

            }

            //not using css.
            e.Table.GridLines = GridLines.None;
        }
    }

}
Download the source code click here
Please leave your comments, suggestions and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!
OBOUT Grid - Export to Excel and Word Client Side in JavaScript Reviewed by Ravi Kumar on 10:58:00 AM Rating: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.