Embed React Router Dom Link in Grid Cell Template

[Freddy Reyes]

Hello,

I was wondering if you had an example on embedding a React Router Dom Link inside a Grid Cell Template? Anchor tags work but that refreshes the whole page.

Thanks

[Mohammed Farook J]

Hi Freddy, 

 

Thanks for contacting Syncfusion support. 

  

  

Based on your request we have created a sample  “Grid with React Router Dom link inside the Grid cell template”.  

  

We have imported Router, Switch from “react-router-dom” initialized Routing Component.  Please find the code example. 

 

 

[App.tsx] 

 

import * as React from "react"; 

import * as ReactDOM from 'react-dom'; 

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; 

import Grid from './Grid'; 

import Home from './Home'; 

import Nav from './navpage'; 

 

export default class App extends React.Component<{}, {}> { 

    render() { 

        return ( 

            <Router> 

                <div> 

                    <ul> 

                        <li><Link to={'/'}>Home</Link></li> 

                        <li><Link to={'/Grid'}>Grid</Link></li> 

 

                    </ul> 

                    <hr /> 

                    <Switch> 

                        <Route exact path='/' component={Home}></Route> 

                        <Route exact path='/Grid' component={Grid}></Route> 

                        <Route exact path='/navpage' component={Nav}></Route> 

                    </Switch> 

                </div> 

            </Router> 

 

        ); 

    } 

} 

ReactDOM.render(<App />, document.getElementById('grid')); 

 

 

 

We have created a link element inside the Grid cell by using ‘queryCellInfo’ event. When click the link element we navigate to ‘navpage.tsx’. please find the code example . 

  

 

 

[Grid.tsx] 

 

import * as React from 'react'; 

import * as ReactDOM from 'react-dom'; 

 

import { 

    GridComponent, Sort, ColumnsDirective, ColumnDirective, 

    Inject, Page 

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

import './App.css'; 

import { orderDetails } from './data'; 

 

 

export default class Grid extends React.Component<{}, {}> { 

 

    public gridObj: GridComponent | null; 

 

    public load(args: any): void { 

 

    } 

    public myEvent(): void { 

        debugger; 

    } 

 

    public renderAnchor(args: any): void { 

        if (args.column.field == "CustomerID") { 

            //template create 

            ReactDOM.render(<a className='acrele' onClick={this.onChange.bind(this)} rel='nofollow' href='#'>{args.cell.innerText}</a>, args.cell) 

        } 

    } 

    public onChange(args: any) { 

        //call event when click the link 

        if (args.target.classList.contains('acrele')) { 

            let rowData: Object | null = this.gridObj ? this.state = { rData: this.gridObj.getRowInfo(args.target.parentElement).rowData } : null; 

            this.setState({ rData: rowData });  

            (this.props as any).history.push('/navpage') //navigate to new page 

        } 

 

    } 

    render() { 

        // let myEvent = this.myEvent; 

        return ( 

            <div> 

                <GridComponent dataSource={orderDetails} queryCellInfo={this.renderAnchor.bind(this)} ref={grid => this.gridObj = grid} allowPaging={true} load={this.load} allowSorting={true}> 

                    <ColumnsDirective> 

                        <ColumnDirective field='OrderID' headerText='ID' width='120' ></ColumnDirective> 

                        <ColumnDirective field='CustomerID' headerText='CustomerID' width='160'></ColumnDirective> 

                        <ColumnDirective field='Freight' headerText='Freight' width='160'></ColumnDirective> 

                    </ColumnsDirective> 

                    <Inject services={[Page, Sort]} /> 

                </GridComponent> 

            </div> 

        ); 

    } 

} 

ReactDOM.render(<Grid />, document.getElementById('grid')); 

 

 

 

 

 

Please find the sample and documentation for your reference. 

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/Client-2138704399.zip  

 

querycellInfo:  https://ej2.syncfusion.com/16.1.37/react/documentation/grid/api-gridComponent.html#querycellinfo  

 

render component inside cell : https://ej2.syncfusion.com/16.1.37/react/documentation/grid/how-to.html#render-react-component-in-column 

 

 

Regards, 

J.Mohammed Farook 

 

[Freddy Reyes]

This definitely lead me in the right direction. Thank you. 

[Mohammed Farook J]

Hi Freddy,

Thanks for your update.  

Please get back to us if you need further assistance. 

Regards, 

J Mohammed Farook 

[Bjørn Fridal]

Hi,

Just want to chime in with, what I think is, a less complex way of adding a custom navigation button to the React DataGrid. I am using React Router.

      <GridComponent dataSource={data.myDataSource}>

        <ColumnsDirective>

          <ColumnDirective

            template={({ taskId }) => (

              <Button onClick={() => history.push(`/task${taskId}`)}>

                Go to task

              </Button>

            )}

          />

        </ColumnsDirective>

      </GridComponent>

Regards Bjørn

[Thavasianand Sankaranarayanan]

Hi Bjørn, 

 

Thanks for your update and suggestion 

 

Regards, 

Thavasianand S.