Export to Excel possible with list from model in view ASP.NET MVC?

I’m working on a ASP.NET MVC application where I have a custom made table with data from a list in the model that I pass into the view. This data is not in a grid of Infragistics. I want to export this data to Excel.

Currently I have this in my Javascript:

$("#btnExportToExcel").click(function () {

console.log("exporting to Excel");
$.ig.GridExcelExporter.exportGrid("@Model.labortimeReports)",
{ fileName: "bookreport_" + $('#startDateDatePicker').val() }, { } );

});

 

I’m trying to pass the list from my model for exporting it to Excel, but is does not work.

Is it possible to export this list to Excel without having to create a grid for this?

Or am I using the wrong version(s)? I’m currently using these:

<!-- Ignite UI Required Combined CSS Files -->
<link href="">cdn-na.infragistics.com/.../infragistics.theme.css" rel="stylesheet">
<link href="">cdn-na.infragistics.com/.../infragistics.css" rel="stylesheet">

<!--Required scripts-->
<script src="">igniteui.com/.../script>
<script src="">code.jquery.com/.../script>
<script src="">code.jquery.com/.../script>

<!-- External files for exporting -->
<script src="">www.igniteui.com/.../script>
<script src="">www.igniteui.com/.../script>

<script type="text/javascript" src="">cdn-na.infragistics.com/.../script>
<script type="text/javascript" src="">cdn-na.infragistics.com/.../script>
<script type="text/javascript" src="">cdn-na.infragistics.com/.../script>
<script type="text/javascript" src="">cdn-na.infragistics.com/.../script>
<script type="text/javascript" src="">cdn-na.infragistics.com/.../script>
<script type="text/javascript" src="">cdn-na.infragistics.com/.../script>

 

I also have tried to create an igGrid with this data and hide this. But I still can’t export to excel. I get this error:

Any solution to this?

Hello Rony,

Thank you for contacting the infragistics support.

Yes, you are able to build a custom workbook where you can place your data as you want.

You can see from the example here how you could achieve this.

Thank you for the answer.

In this example, the number of rows are predefined and you already know the content of the columns. Is there a way to provide a list of which you do not know in advance how many records it will contain? And where you can easily fill all rows with the correct data?

Hello Ronny,

This was just an example.

It all depends on you. Fell free to experiment and modify the example as you want. It really depends on the context of the application. Where the data is persisted. Does this data comes from a http request.

The simplest modification I can think of, is to pass a reference to the createTableWorkbook(data) to your data and create a workbook by going through it.

Our goal is to show how you could achieve something and then it is your responsibility to adapt it in your application scenario.

I have an array that I fill with data from a list in my view (MVC):

var List = [ ];

@foreach (var l in Model.LabortimeReports.AsQueryable())
{
<text>
List.push({
LAST_DATE: "@l.LAST_DATE",
GTC_DESCRIPTION: "@l.GTC_DESCRIPTION",
ITEM: "@l.ITEM",
REVISION: "@l.REVISION",
PRODUCTCODE: "@l.PRODUCTCODE",
ITEM_DESCRIPTION: "@l.ITEM_DESCRIPTION",
REF: "@l.REF",
NAME: "@l.NAME",
OK: "@(l.OK != null ? decimal.Round((decimal) l.OK) : 0)",
NOK: "@(l.NOK != null ? decimal.Round((decimal) l.NOK) : 0)",
DESC_: "@l.DESC_",
WC_LOC: "@l.WC_LOC",
ANALYST: "@l.ANALYST"
});
</text>
}

 

I have adjusted the funtion to this:

function createTableWorkbook(data, date) {
var workbook = new $.ig.excel.Workbook($.ig.excel.WorkbookFormat.excel2007);
var sheet = workbook.worksheets().add('bookreport1');
sheet.columns(0).setWidth(72, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(1).setWidth(275, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(2).setWidth(110, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(3).setWidth(275, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(4).setWidth(275, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(5).setWidth(275, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(6).setWidth(275, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(7).setWidth(275, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(8).setWidth(275, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(9).setWidth(275, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(10).setWidth(275, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(11).setWidth(275, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(12).setWidth(275, $.ig.excel.WorksheetColumnWidthUnit.pixel);

// Create a to-do list table with columns for tasks and their priorities.
sheet.getCell('A1').value('LAST DATE');
sheet.getCell('B1').value('PROJECT');
sheet.getCell('C1').value('ITEM');
sheet.getCell('D1').value('REVISION');
sheet.getCell('E1').value('CODE');
sheet.getCell('F1').value('DESCRIPTION');
sheet.getCell('G1').value('WO');
sheet.getCell('H1').value('NAME');
sheet.getCell('I1').value('OK');
sheet.getCell('J1').value('NOK');
sheet.getCell('K1').value('REASON');
sheet.getCell('L1').value('WC');
sheet.getCell('M1').value('ANALYST');

var count = data.length;
var table = sheet.tables().add('A1:M'+count, true);

// Specify the style to use in the table (this can also be specified as an optional 3rd argument to the 'add' call above).
table.style(workbook.standardTableStyles('TableStyleMedium2'));

// Populate the table with data
var row = 2;
for (var i = 0; i < count; i++) {
sheet.getCell('A' + row).value(data[i].LAST_DATE);
sheet.getCell('B' + row).value(data[i].PROJECT);
sheet.getCell('C' + row).value(data[i].ITEM);
sheet.getCell('D' + row).value(data[i].REVISION);
sheet.getCell('E' + row).value(data[i].CODE);
sheet.getCell('F' + row).value(data[i].DESCRIPTION);
sheet.getCell('G' + row).value(data[i].WO);
sheet.getCell('H' + row).value(data[i].NAME);
sheet.getCell('I' + row).value(data[i].OK);
sheet.getCell('J' + row).value(data[i].NOK);
sheet.getCell('K' + row).value(data[i].REASON);
sheet.getCell('L' + row).value(data[i].WC);
sheet.getCell('M' + row).value(data[i].ANALYST);
row++;
}
// Sort the table
table.columns('LAST DATE').sortCondition(new $.ig.excel.OrderedSortCondition());

// Save the workbook
saveWorkbook(workbook, "BookReport_" + date + ".xlsx");
}

 

I call this function:

createTableWorkbook(List, "@date");

 

The date that I pass here is a string, defined in my view.

It does not work, even after adding all the same cdns.

I get an error on this line: var workbook = new $.ig.excel.Workbook($.ig.excel.WorkbookFormat.excel2007);

I don’t see what I’m doing wrong?

I found an other solution for my problem. It works now [emoticon:c4563cd7d5574777a71c318021cbbcc8]

Hello Ronny,

This is great! 

If you have further questions, please do not hesitate to contact us again.