How to create wrapper Component for ColumnsDirective and ColumnDirective

[Marac]

I am trying to create a wrapper component for ColumnsDirective and ColumnDirective. But when I do it like this 

const CustomColumns = ({ children }) => {

return (<ColumnsDirective>{children}</ColumnsDirective>);

};

It does not work, but if I directly use ColumnsDirective it renders correctly. So how would I make Wrapper components for Both of these Components?

[Pavithra Subramaniyam]

Hi Marac,

Thanks for contacting Syncfusion support.

You can achieve your requirement by defining the custom ColumnsDirective wrapper in the below way. Please refer to the below code example and sample link for more information.

constructor() {

    super(...arguments);

    this.CustomColumns = (

      <ColumnsDirective>

        <ColumnDirective

          field={'OrderID'}

          headerText={'Order ID'}

        ></ColumnDirective>

        <ColumnDirective

          field={'CustomerID'}

          headerText={'Customer ID'}

        ></ColumnDirective>

      </ColumnsDirective>

    );

  }

  render() {

    return (

      <div className="control-pane">

        <div className="control-section">

          <GridComponent dataSource={orderDetails} height="350">

            {this.CustomColumns}

          </GridComponent>

        </div>

      </div>

    );

  }

}

 

Sample : https://stackblitz.com/edit/react-lyzkbm

Please get back to us if you need further assistance on this.

Regards,

Pavithra S