Export to PDF and Excel
Hi,
Following the instructions on help page (https://help.syncfusion.com/js/grid/exporting) about how to export the grid data to PDF or Excel, when I try the example informed in the help page, this example only redirect me to other page that doesn't exists (http://js.syncfusion.com/demos/web/ExportingServices/api/JSGridExport/ExcelExport).
May you please show me how can I export data to PDF and Excel using JS?
Example Code
var len = dataJSON.length;
var data = ej.DataManager({json: dataJSON}).executeLocal(ej.Query().take(len));
$("#viewLista").ejGrid({
dataSource: data,
allowPaging: true,
isResponsive: true,
//exportToExcelAction: 'http://js.syncfusion.com/ExportingServices/api/JSGridExport/ExcelExport',
//exportToPdfAction: 'http://js.syncfusion.com/ExportingServices/api/JSGridExport/PdfExport',
pageSettings: { pageSize: 12, printMode:ej.Grid.PrintMode.AllPages },
toolbarSettings : { showToolbar : true, toolbarItems : [ej.Grid.ToolBarItems.PrintGrid, ej.Grid.ToolBarItems.ExcelExport, ej.Grid.ToolBarItems.PdfExport,ej.Grid.ToolBarItems.Search] },
toolbarClick: function (args) {
if (args.itemName == "Print") {
var gridObj = $("#viewLista").data("ejGrid");
gridObj.hideColumns("Foto");
gridObj.hideColumns("BCI");
gridObj.hideColumns("Mapa");
gridObj.hideColumns("Croqui");
$("#viewLista").ejGrid("print");
args.cancel = true;
gridObj.showColumns("Foto");
gridObj.showColumns("BCI");
gridObj.showColumns("Mapa");
gridObj.showColumns("Croqui");
//args.cancel = true;
}
if (args.itemName == "Excel Export") {
showMessage('Exportar para Excel');
args.cancel = true;
//this.export("api/Export/ExcelExport"); // Excel Export method.
}
if (args.itemName == "PDF Export") {
showMessage('Exportar para Pdf');
args.cancel = true;
//this.export("api/Export/PdfExport"); // PDF Export method.
}
},
columns: [
{ headerText: "Inscrição", width: 30 , height:20, headerTextAlign: "center", template:"{{:insc_munic}}"
},
{ field: "nome_g", headerText: "Proprietário", width: 80, priority: 2, headerTextAlign: "center" },
{ headerText: "Endereço", template:"{{:tipo_logradouro_cnt+' '+logradouro_cnt}}", width: 60, priority: 2, headerTextAlign: "center" },
{ field: "branco", headerText: "Uso", width: 20, priority: 2, headerTextAlign: "center" },
{ field: "", width: 17, headerText: "Foto", headerTextAlign: "center", tooltip: "Fotos Fachada",
commands: [
{ type: "details", buttonOptions: { text: "Foto Frontal", contentType: "imageonly", prefixIcon:"e-icon e-image_01", click:"setPhotoAction", textAlign:"center", visible:false }}
],
isUnbound: true
},
{ field: "", headerText: "Croqui", width: 17, headerTextAlign: "center", tooltip: "Croqui Imóvel",
commands: [
{ type: "details", buttonOptions: { text: "Croqui Digital",contentType: "imageonly", prefixIcon:"e-icon e-paste_01", click:"setCroquiAction", visible:false}}
],
isUnbound: true
},
{ field: "", headerText: "BCI", width: 17, headerTextAlign: "center", tooltip: "Ficha Cadastral",
commands: [
{ type: "details", buttonOptions: { text: "Imprimir Ficha",contentType: "imageonly", prefixIcon:"e-icon e-print_01", click:"setPrintAction", visible:false}},
],
isUnbound: true
},
{ field: "", headerText: "Mapa", width: 17, headerTextAlign: "center", tooltip: "Mapa",
commands: [
{ type: "details", buttonOptions: { text: "Mapa",contentType: "imageonly", prefixIcon:"e-icon e-image", click:"setMapAction", visible:false}}
],
isUnbound: true
}
],
recordClick: function (args) {
argsData = args.data;
if(actionSel==1){
openPhoto();
}
else if (actionSel==2) {
showDownload();
}
else if (actionSel==3) {
showPrint();
}
else if (actionSel==4) {
showMap();
}
else{
detalharArquivo(argsData);
}
actionSel = 0;
},
actionComplete: function (args) {
//Aplicar mascára para Inscrição estadual ao realizar a paginação
$('.inscricao').mask('00.00.000.0000.0000');
}
});
Thanks.
SIGN IN To post a reply.
3 Replies
FS
Farveen Sulthana Thameeztheen Basha
Syncfusion Team
October 23, 2017 12:28 PM UTC
Hi Rodrigo,
Thanks for contacting Syncfusion Support.
We have checked your query and as per your requirement we have prepared the sample with “Excel and PDF Exporting with Grid JS”. On toolbarClick event of the Grid, we need to defined equivalent server action mapper ExportToExcel, ExportToWord, and ExportToPdf to perform Exporting. Please refer to the code example:-
|
<script type="text/javascript">
$(function () {
// the datasource "window.gridData" is referred from jsondata.min.js
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
allowSorting: true,
allowGrouping: true,
allowFiltering: true,
allowReordering: true,
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.ExcelExport, ej.Grid.ToolBarItems.WordExport, ej.Grid.ToolBarItems.PdfExport] },
showStackedHeader: true,
isResponsive: true,
columns: [
{ field: "OrderID", headerText: "Order ID", width: 80 },
. . .
],
toolbarClick: function (e) {
this.exportGrid = this["export"];
if (e.itemName == "Excel Export") {
this.exportGrid('/Grid/ExportToExcel')
e.cancel = true;
}
else if (e.itemName == "Word Export") {
this.exportGrid('/Grid/ExportToWord')
e.cancel = true;
}
else if (e.itemName == "PDF Export") {
this.exportGrid('/Grid/ExportToPdf')
e.cancel = true;
}
},
});
});
</script>
Server side:-
public void ExportToExcel(string GridModel)
{
ExcelExport exp = new ExcelExport();
var DataSource = new NorthwindDataContext().OrdersViews.Take(100).ToList();
GridProperties obj = ConvertGridObject(GridModel);
exp.Export(obj, DataSource, "Export.xlsx", ExcelVersion.Excel2016, false, false, "flat-saffron");
}
public void ExportToWord(string GridModel)
{
WordExport exp = new WordExport();
var DataSource = new NorthwindDataContext().OrdersViews.Take(100).ToList();
GridProperties obj = ConvertGridObject(GridModel);
exp.Export(obj, DataSource, "Export.docx", false, false, "flat-saffron");
}
public void ExportToPdf(string GridModel)
{
PdfExport exp = new PdfExport();
var DataSource = new NorthwindDataContext().OrdersViews.Take(100).ToList();
GridProperties obj = ConvertGridObject(GridModel);
exp.Export(obj, DataSource, "Export.pdf", false, false, "flat-saffron");
}
private GridProperties ConvertGridObject(string gridProperty)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
IEnumerable div = (IEnumerable)serializer.Deserialize(gridProperty, typeof(IEnumerable));
GridProperties gridProp = new GridProperties();
foreach (KeyValuePair<string, object> ds in div)
{
var property = gridProp.GetType().GetProperty(ds.Key, BindingFlags.Instance | BindingFlags.Public | BindingFlags.IgnoreCase);
if (property != null)
{
Type type = property.PropertyType;
string serialize = serializer.Serialize(ds.Value);
object value = serializer.Deserialize(serialize, type);
property.SetValue(gridProp, value, null);
}
}
return gridProp;
} |
Please refer to the sample Link:-
Please refer to the Online Demo link and Documentation Link:-
Please get back to us if you need any further assistance.
Regards,
Farveen sulthana T
RC
Rodrigo Carrapeta
October 24, 2017 02:16 PM UTC
Thank you for the answer.
So there is no other way besides create an WebApi, right?
FS
Farveen Sulthana Thameeztheen Basha
Syncfusion Team
October 25, 2017 04:58 PM UTC
Yes, while using Exporting in your projects, it is required to create a server with any of the following web services such as Web API, ASP.NET controller action or ASP.NET method. Because Exporting actions are performed based on server side. So we suggested you to use any one of the services mention for Exporting the Grid.
Please get back to us if you need any further assistance.
Regards,
Farveen sulthana T
SIGN IN To post a reply.
- 3 Replies
- 2 Participants
-
RC Rodrigo Carrapeta
- Oct 21, 2017 07:11 PM UTC
- Oct 25, 2017 04:58 PM UTC
