React
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Render ListView with hyper link navigation in React ListView component

We can use anchor tag along with href attribute in our ListView template property for navigation.

In the below sample, we have rendered ListView with search engines URL.

Source
Preview
index.tsx
index.html
index.css
index.jsx
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

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

//Define an array of JSON data
public dataSource: { [key: string]: Object }[] = [
    { name: 'Google', url: 'https://www.google.com' },
    { name: 'Bing', url: 'https://www.bing.com' },
    { name: 'Yahoo', url: 'https://www.yahoo.com' },
    { name: 'Ask.com', url: 'https://www.ask.com' },
    { name: 'AOL.com', url: 'https://www.aol.com' }
];

anchor_template(data: any): JSX.Element {
    return (
        <a target='_blank' href={data.url}>{data.name}</a>
    )};

    render() {
        return (
        <ListViewComponent id='list'
                dataSource={this.dataSource}
                headerTitle = 'Search engines'
                showHeader = {true}
                template= {this.anchor_template as any} >
                </ListViewComponent>
        )
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
top: 45%;
left: 45%;
}

#list {
  display: block;
  max-width: 350px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}

#list a {
  text-decoration: none;
}

#list .e-list-header {
    background: rgb(2, 120, 215);
    color: white;
    font-size: 19px;
    font-weight: 500;
}
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        //Define an array of JSON data
        this.dataSource = [
            { name: 'Google', url: 'https://www.google.com' },
            { name: 'Bing', url: 'https://www.bing.com' },
            { name: 'Yahoo', url: 'https://www.yahoo.com' },
            { name: 'Ask.com', url: 'https://www.ask.com' },
            { name: 'AOL.com', url: 'https://www.aol.com' }
        ];
    }
    anchor_template(data) {
        return (<a target='_blank' href={data.url}>{data.name}</a>);
    }
    ;
    render() {
        return (<ListViewComponent id='list' dataSource={this.dataSource} headerTitle='Search engines' showHeader={true} template={this.anchor_template}>
                </ListViewComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
Previous
Next