Use a template with Excel export

[Jonathan Payet]

Hello,

Is it possible to export an excel file with a template directly in ColumnDirective  ? Please take a look at the example above.

const columns = [
  ...{
    title: i18n.t("my_object.fields.status"), // using i18n for translation...
    field: "status", // value for this field could be : POSTPONED / PLANNED / CANCELED ...
    template: rowData => {
      return <Chip>{i18n.t("statuses." + rowData.status)}</Chip>; // Will return a Chip component with value "Postponed" for example in the grid
    },
    excelTemplate: rowData => {
      // Issue is here, I know excelTemplate doesn't exist, but i need to send a formmated string to excel without use some trick with excelQueryCellInfo.
      return i18n.t("statuses." + rowData.status);
    }
  }
];

...

{columns.map((column, key) => (
  <ColumnDirective
    headerText={column.title}
    key={"columnDirective_" + key}
    width={190}
    {...column}
  />
))}

Regards,

[Balaji Sekar]

Hi Jonathan, 

 

We have validated your requirement. Unfortunately, we do not have support for exporting templates to excel. We have already added this to our feature list , but we don’t have any immediate plans to implement this feature. At the planning stage for every release cycle, we review all open features. We will let you know when this feature is implemented. 

 

Regards,
Balaji Sekar. 

[Jonathan Payet]

Hi , i solved this by doing this : ( https://stackblitz.com/edit/react-w5c9c9-ts5vda?file=index.js )

import { render } from "react-dom";

import "./index.css";

import * as React from "react";

import {

  ColumnDirective,

  ColumnsDirective,

  ExcelExport,

  GridComponent,

  Group,

  Inject,

  Page,

  Toolbar

} from "@syncfusion/ej2-react-grids";

import { orderDetails } from "./data";

import { SampleBase } from "./sample-base";

import { has, toString } from "lodash";

export class Exporting extends SampleBase {

  constructor() {

    super(...arguments);

    this.toolbarOptions = [

      {

        text: "ExcelExport",

        align: "right",

        click: () => this.gridInstance.excelExport()

      }

    ];

  }

  excelQueryCellInfo = args => {

    if (has(args.column, "customExcelTemplate")) {

      args.value = toString(args.column.customExcelTemplate(args.data));

    }

  };

  render() {

    return (

      <div className="control-pane">

        <div className="control-section">

          <GridComponent

            dataSource={orderDetails}

            ref={grid => (this.gridInstance = grid)}

            toolbar={this.toolbarOptions}

            allowPaging={true}

            allowExcelExport={true}

            excelQueryCellInfo={this.excelQueryCellInfo}

            allowPdfExport={true}

            load={this.load}

          >

            <ColumnsDirective>

              <ColumnDirective

                field="OrderID"

                headerText="Order ID"

                width="120"

                textAlign="Right"

                customExcelTemplate={rowData => "excel: " + rowData.OrderID}

                template={rowData => (

                  <span style={{ color: "red" }}> Grid: {rowData.OrderID}</span>

                )}

              />

              <ColumnDirective

                field="CustomerID"

                headerText="Customer ID"

                width="150"

              />

              <ColumnDirective

                field="OrderDate"

                headerText="Order Date"

                width="150"

                format="yMd"

                textAlign="Right"

              />

              <ColumnDirective

                field="Freight"

                headerText="Freight"

                width="120"

                format="C2"

                textAlign="Right"

              />

              <ColumnDirective

                field="ShipCountry"

                headerText="Ship Country"

                width="150"

              />

            </ColumnsDirective>

            <Inject services={[Page, Toolbar, ExcelExport, Group]} />

          </GridComponent>

        </div>

      </div>

    );

  }

}

render(<Exporting />, document.getElementById("sample"));

[Balaji Sekar]

Hi Jonathan, 

 

Currently we do not have support for  exporting templates to Excel file format however you have achieved your requirement through the workaround solution but we have not assured that solution working in all the cases 

Regards, 

Balaji Sekar