Link inside grid cell

[Samuel]

Hello,
Trying to figure out how I can put clickable links in the Grid component, can't get it to work.
Any ideas?
Thanks.

class Classname extends React.Component {

constructor() {

super(...arguments);

};

this.data = [

{

urlColumn: http://www.example.com,

otherData: 'someData'

}

];

}

grid = () => {

return (

<div style={{ "height": "100%", "width": "100%" }}>

<GridComponent dataSource={this.data}>

<ColumnsDirective>

<ColumnDirective field='urlColumn' headerText='URLs' width='110'/>

<ColumnDirective field='otherData' headerText='Field 2' width='110'/>

</ColumnsDirective>

</GridComponent>

</div>

);

}

[Vignesh Sivagnanam]

Hi Samuel 

  

Greetings from Syncfusion support 

  

Based on your query we found that you want to render link inside the Grid cell. You can achieve your requirement by using the EJ2 Grid columnTemplate feature to render the link inside the grid cell. 

  

Please refer the below code example and sample for your reference, 

  

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

  

constructor() { 

    super(...arguments); 

    this.template = this.gridTemplate; 

    this.data = [ 

      { 

        urlColumn: 'http://www.example.com', 

        otherData: 'someData' 

      } 

    ]; 

  } 

  gridTemplate(props) { 

    return ( 

      <div className="image"> 

        <a rel='nofollow' href={props.urlColumn}>{props.urlColumn}</a> 

      </div> 

    ); 

  } 

  render() { 

    return ( 

      <div className="control-pane"> 

        <div style={{ height: '100%', width: '100%' }}> 

          <GridComponent dataSource={this.data}> 

            <ColumnsDirective> 

              <ColumnDirective 

                field="urlColumn" 

                headerText="URLs" 

                template={this.template} 

                width="110" 

              /> 

              <ColumnDirective 

                field="otherData" 

                headerText="Field 2" 

                width="110" 

              /> 

            </ColumnsDirective> 

          </GridComponent> 

        </div> 

      </div> 

    ); 

  } 

  

Regards 

Vignesh Sivagnanam