
# layout export

Convert the dataset to an Excel file according to the column structure displayed in the current grid and save it as a local file or upload it to the server.

#### Excel export

Exports the appearance and data of the current grid to an external document according to the settings specified with the [exportGrid()](/refs/Class/GridBase#exportgrid) function.

```js
const fields = [
  { fieldName: 'OrderID', dataType: 'text' },
  { fieldName: 'CustomerID', dataType: 'text' },
  { fieldName: 'EmployeeID', dataType: 'text' },
  { fieldName: 'OrderDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'CompanyName', dataType: 'text' },
  { fieldName: 'Country', dataType: 'text' },
  { fieldName: 'Phone', dataType: 'text' },
  { fieldName: 'ProductName', dataType: 'text' },
  { fieldName: 'QuantityPerUnit', dataType: 'text' },
  { fieldName: 'Quantity', dataType: 'number' },
  { fieldName: 'UnitPrice', dataType: 'number' }
];

const columns = [
  { name: 'Country', fieldName: 'Country', type: 'data', width: '100', header: { text: 'Country' } },
  { name: 'CompanyName', fieldName: 'CompanyName', type: 'data', width: '120', styleName: 'blue-column', header: { text: 'Company Name' } },
  { name: 'UnitPrice2', fieldName: 'UnitPrice', type: 'data', width: '100', renderer: { type: 'bar', origin: 'left', barWidth: '80%' }, header: { text: 'UnitPrice2' }, footer: { expression: 'sum' } },
  { name: 'OrderID', fieldName: 'OrderID', type: 'data', width: '80', header: { text: 'Order ID' }, footer: { expression: 'max', groupExpression: 'max' } },
  { name: 'CustomerID', fieldName: 'CustomerID', type: 'data', width: '90', header: { text: 'Customer ID' } },
  { name: 'EmployeeID', fieldName: 'EmployeeID', type: 'data', width: '90', header: { text: 'Employee ID' }, footer: { expression: 'min', groupExpression: 'min' } },
  { name: 'OrderDate', fieldName: 'OrderDate', type: 'data', width: '130', header: { text: 'Order Date' } },
  { name: 'Phone', fieldName: 'Phone', type: 'data', width: '90', renderer: { type: 'button' }, header: { text: 'Button' } },
  { name: 'Phone2', fieldName: 'Phone', type: 'data', width: '90', header: { text: 'Phone2' } },
  { name: 'ProductName', fieldName: 'ProductName', type: 'data', width: '200', header: { text: 'Product Name' } },
  { name: 'QuantityPerUnit', fieldName: 'QuantityPerUnit', type: 'data', width: '100', header: { text: 'Quantity / Unit' } },
  { name: 'Quantity', fieldName: 'Quantity', type: 'data', width: '100', header: { text: 'Quantity' }, footer: { expression: 'sum' } },
  { name: 'UnitPrice', fieldName: 'UnitPrice', type: 'data', width: '100', header: { text: 'Unit Price' }, footer: { expression: 'avg', groupExpression: 'max' } },
  { name: 'Country2', fieldName: 'Country', type: 'data', width: '100', header: { text: 'Country2' } }
];

const layout1 = [
  {
    name: 'companyGroup',
    direction: 'horizontal',
    items: ['Country', 'CompanyName'],
    header: { text: 'Company' }
  },
  'OrderID',
  'CustomerID',
  'EmployeeID',
  'OrderDate',
  'Phone'
];

const layout2 = [
  'OrderID',
  { column: 'CustomerID', width: 200 },
  {
    name: 'companyGroup',
    direction: 'horizontal',
    items: ['Country', 'CompanyName'],
    header: { text: 'Company' }
  },
  { column: 'EmployeeID' },
  'OrderDate',
  'Phone'
];

const layout3 = [
  'OrderID',
  'CustomerID',
  {
    name: 'companyGroup',
    direction: 'vertical',
    width: 250,
    items: ['Country', 'CompanyName'],
    header: { text: 'Company' }
  },
  'EmployeeID',
  'OrderDate',
  'Phone'
];

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        grid.setColumnLayout(layout1);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;

function btnSetColumnLayout1() {
  gridView.setColumnLayout(layout1);
}

function btnSetColumnLayout2() {
  gridView.setColumnLayout(layout2);
}

function btnSetColumnLayout3() {
  gridView.setColumnLayout(layout3);
}

function excelExport() {
  const excelType = Boolean(document.querySelector('input[name="excelType"]:checked').value);
  const showProgress = document.getElementById('chkShowProgress').checked;
  const indicator = document.querySelector('input[name="indicator"]:checked').value;
  const header = document.querySelector('input[name="header"]:checked').value;
  const footer = document.querySelector('input[name="footer"]:checked').value;

  gridView.exportGrid({
    type: 'excel',
    target: 'local',
    fileName: 'gridExportSample.xlsx',
    showProgress: showProgress,
    progressMessage: 'Exporting to Excel.',
    indicator: indicator,
    header: header,
    footer: footer,
    compatibility: excelType,
    exportShape: true,
    done: function () {
      alert('done excel export');
    }
  });
}
```

Specify whether to include the area in the document.

* default - Prints as is currently displayed in the grid.
* visible - The output includes the relevant area unconditionally.
* hidden - Do not include unconditionally.
In the [GridExportOptions](/refs/Interface/GridExportOptions) API document, you can check the setting model specified when exporting the grid displayed on the screen to an external document such as Excel.

```js
//layout settings
layout1 = [
   {
     name: "companyGroup",
     direction: "horizontal",
     items: [
       "Country",
       "CompanyName"
     ],
     header: {
       text: "Company",
     }
   },
   "OrderID",
   "CustomerID",
   "EmployeeID",
   "OrderDate",
   "Phone"
]

layout2 = [
   "OrderID",
   {
     column: "CustomerID",
     width: 200
   },
   {
     name: "companyGroup",
     direction: "horizontal",
     items: [
       "Country",
       "CompanyName"
     ],
     header: {
       text: "Company"
     }
   },
   {
     column: "EmployeeID"
   },
   "OrderDate",
   "Phone"
]

layout3 = [
   "OrderID",
   "CustomerID",
   {
     name: "companyGroup",
     direction: "vertical",
     width: 250,
     items: [
       "Country",
       "CompanyName"
     ],
     header: {
       text: "Company"
     }
   },
   "EmployeeID",
   "OrderDate",
   "Phone"
];

   //export settings
   var excelType = Boolean(document.querySelector('input[name="excelType"]:checked').value);
   var showProgress = document.getElementById("chkShowProgress").checked;
   var indicator = document.querySelector('input[name="indicator"]:checked').value;
   var header = document.querySelector('input[name="header"]:checked').value;
   var footer = document.querySelector('input[name="footer"]:checked').value;

   gridView.exportGrid({
       type: "excel",
       target: "local",
       fileName: "gridExportSample.xlsx",
       showProgress: showProgress,
       progressMessage: "Exporting to Excel.",
       indicator: indicator,
       header: header,
       footer: footer,
       compatibility: excelType,
       done: function () { //Function to be executed after export is complete
           alert("done excel export")
       }
   });
```