Search results

Render ListView with hyper link navigation in React ListView component

25 Jan 2023 / 1 minute to read

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.jsx
index.html
index.css
index.tsx
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
    //Define an array of JSON data
    let 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' }
    ];
    function anchor_template(data) {
        return (<a target='_blank' href={data.url}>{data.name}</a>);
    }
    ;
    return (<ListViewComponent id='list' dataSource={dataSource} headerTitle='Search engines' showHeader={true} template={anchor_template}>
            </ListViewComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!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/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/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>
Copied to clipboard
#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;
}
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

function App() {

//Define an array of JSON data
let 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' }
];

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

    return (
    <ListViewComponent id='list'
            dataSource={dataSource}
            headerTitle = 'Search engines'
            showHeader = {true}
            template= {anchor_template as any} >
            </ListViewComponent>
    )
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));