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:
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 AM
Rating:
Reviewed by Ravi Kumar
on
10:58 AM
Rating:
No comments: