Grid Column using template string dynamic with value of the column

[Emileydis Rodriguez]

I have a array of the columns to generate the columns of the grid .

I want to do something like this because I pass that array of columns to an own component that is responsible for creating the GridComponent synfusion

const columns = [ 

    { field: 'colleges', headerText: 'Colleges', width: '120',  textAlign: 'Right', template:`<a rel='nofollow' href="">${colleges}</a>` }

  ];

[Prasanna Kumar Viswanathan]

Hi Emileydis, 

 

We have validated your query. We have achieved your requirement by analyzing the HOC Concept in React and used it in EJ2 Grid.  In below code example, we have defined the Grid wrapper codes in “Parent.js” file and create a container component in “App.js” and defined the columns using ComponentDidMount event of EJ2 Grid. We can pass the Grid properties value from the Container component(App.js) and it can access in wrapper component using Props. Please refer the below code example and sample for more information.   

 

[App.js] 

class App extends Component { 

  constructor(props) { 

    super(props); 

  } 

   

  columns=[ 

    { field: 'OrderID', headerText: 'Order ID', width: 120, type: 'number', editType:"numericedit" }, 

    { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string'}, 

    { field: 'ShipCity', width: 140, headerText: 'Ship City', allowFiltering:false, allowSorting:false }, 

    { field: 'OrderDate', width: 140, headerText: 'Order Date', type: 'date',format:'yMd', editType:"datetimepickeredit" } 

]; 

componentDidMount() { 

  this.pGrid.gridInstance.columns=this.columns; 

  this.pGrid.gridInstance.dataSource=orderData; 

  this.pGrid.gridInstance.toolbarClick = this.toolbarClick.bind(this); 

} 

[Parent.js] 

// Here, we have defined the Grid wrapper code  

class Parent extends React.Component { 

    constructor(props) { 

        super(props);          

        this.toolbarOptions = ['ExcelExport', 'PdfExport', 'CsvExport']; 

        this.editOptions = { allowEditing: true, allowAdding: true, allowDeleting: true,mode:"Normal" }; 

         

    }; 

    render() { 

        return ( 

            <div className="Parent" > 

                <div className='control-section'> 

                    <GridComponent ref={grid => this.gridInstance = grid} columns={this.props.columns} allowFiltering={this.props.isFilter} allowPaging={this.props.isPage} allowSorting={true} 

                        toolbar={this.toolbarOptions} allowExcelExport={true} allowPdfExport={true}  allowSelection={true} 

                        editSettings={this.editOptions}> 

                        <Inject services={[Filter, Page, Edit, Toolbar, ExcelExport, PdfExport, Sort]} /> 

                    </GridComponent> 

                </div> 

            </div> 

        ); 

    } 

} 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/151492/ze/ReactHocColumns-1161592386.zip 

 

Please get back to us if you need further assistance. 

 

Regards, 

Prasanna Kumar N.S.V