React

Search results

ListViewComponent

Represents ListView component for React

<ListViewComponent dataSource={data}/>

Properties

animation
`AnimationSettings`

The animation property provides an option to apply the different animations on the ListView component.

    import { render } from "react-dom";
    import "./index.css";
    import * as React from "react";
   import { ListViewComponent } from '@syncfusion/ej2-react-lists';
    import { SampleBase } from "./sample-base";

    export class Default extends SampleBase {
      arts = [{
        'text': 'Asia',
        'id': '01',
        'category': 'Continent',
        'child': [{
            'text': 'India',
            'id': '1',
            'category': 'Asia',
            'child': [{
                'text': 'Delhi',
                'id': '1001',
                'category': 'India',
            },
            {
                'text': 'Kashmir',
                'id': '1002',
                'category': 'India',
            }
            ]
        },
        {
            'text': 'China',
            'id': '2',
            'category': 'Asia',
            'child': [{
                'text': 'Zhejiang',
                'id': '2001',
                'category': 'China',
            },
            {
                'text': 'Shandong',
                'id': '2003',
                'category': 'China',
            }]
        }]
     },
     {
        'text': 'North America',
        'id': '02',
        'category': 'Continent',
        'child': [{
            'text': 'USA',
            'id': '3',
            'category': 'North America',
            'child': [{
                'text': 'California',
                'id': '3001',
                'category': 'USA',
            },
            {
                'text': 'New York',
                'id': '3002',
                'category': 'USA',
            }]
        },
        {
            'text': 'Canada',
            'id': '4',
            'category': 'North America',
            'child': [{
                'text': 'Ontario',
                'id': '4001',
                'category': 'Canada',
            },
            {
                'text': 'Alberta',
                'id': '4002',
                'category': 'Canada',
            },
            {
                'text': 'Manitoba',
                'id': '4003',
                'category': 'Canada',
            }]
        }]
      },
      {
        'text': 'Australia',
        'id': '04',
        'category': 'Continent',
        'child': [{
            'text': 'Australia',
            'id': '7',
            'category': 'Australia',
            'child': [{
                'text': 'Sydney',
                'id': '7001',
                'category': 'Australia',
            },
            {
                'text': 'Melbourne',
                'id': '7002',
                'category': 'Australia',
            },
            {
                'text': 'Brisbane',
                'id': '7003',
                'category': 'Australia',
            }]
        }]
   
      }
        ];
        //Map the appropriate columns to fields property
        fields = { groupBy: 'category' };
        animation = {ease:"ease", duration:400, effect:"Zoom"}
  
        render() {
            return (
            <ListViewComponent id="list" dataSource={this.arts} fields={this.fields} showHeader={true} headerTitle="Continent" animation={this.animation}/>
        );}
    }

    render(<Default />, document.getElementById("sample"));

Defaults to { effect: ‘SlideLeft’, duration: 400, easing: ‘ease’ }

checkBoxPosition
`checkBoxPosition`

The checkBoxPosition is used to set the position of check box in a list item. By default, the checkBoxPosition is Left, which will appear before the text content in a list item.

    import { render } from "react-dom";
    import "./index.css";
    import * as React from "react";
    import { ListViewComponent } from '@syncfusion/ej2-react-lists';
    import { SampleBase } from "./sample-base";

    export class Default extends SampleBase {
       data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
       checkBoxPosition = "Right";
  
     render() {
        return (
            <ListViewComponent id="list" dataSource={this.data} showCheckBox={true} checkBoxPosition={this.checkBoxPosition} />
        );
       }
     }

    render(<Default />, document.getElementById("sample"));

Defaults to ‘Left’

cssClass
`string`

The cssClass property is used to add a user-preferred class name in the root element of the ListView, using which we can customize the component (both CSS and functionality customization)

     <style>
      .custom
       {
        font-style: italic;
       }
    </style>

    import { render } from "react-dom";
    import "./index.css";
    import * as React from "react";
    import { ListViewComponent } from '@syncfusion/ej2-react-lists';
    import { SampleBase } from "./sample-base";

    export class Default extends SampleBase {
       data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
       cssClass = "custom";
  
     render() {
        return (
             <ListViewComponent id="list" dataSource={this.data} cssClass={this.cssClass} />
        );
       }
     }

    render(<Default />, document.getElementById("sample"));

Defaults to ”

dataSource
`{ [key: string]: Object }[]` | `string[]` | `number[]` | `DataManager`

The dataSource provides the data to render the ListView component which is mapped with the fields of ListView.

Defaults to []

enable
`boolean`

If enable set to true, the list items are enabled. And, we can disable the component using this property by setting its value as false.

    import { render } from "react-dom";
    import "./index.css";
    import * as React from "react";
    import { ListViewComponent } from '@syncfusion/ej2-react-lists';
    import { SampleBase } from "./sample-base";

    export class Default extends SampleBase {
       data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];

     render() {
        return (
            <ListViewComponent id="list" dataSource={this.data} enable= {false} />
        );
       }
     }

    render(<Default />, document.getElementById("sample"));

Defaults to true

enableHtmlSanitizer
`boolean`

Specifies whether HTML content should be sanitized or escaped. When set to true, any HTML content will be sanitized to remove potentially harmful elements.

    import { render } from "react-dom";
    import "./index.css";
    import * as React from "react";
    import { ListViewComponent } from '@syncfusion/ej2-react-lists';
    import { SampleBase } from "./sample-base";

    export class Default extends SampleBase {
       data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
  
     render() {
        return (
            <ListViewComponent id="list" dataSource={this.data} enableHtmlSanitizer= {true} />
        );
       }
     }

    render(<Default />, document.getElementById("sample"));

Defaults to false

enablePersistence
`boolean`

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl
`boolean`

Enable or disable rendering component in right to left direction.

Defaults to false

enableVirtualization
`boolean`

If enableVirtualization set to true, which will increase the ListView performance, while loading a large amount of data.

    import { render } from "react-dom";
    import "./index.css";
    import * as React from "react";
    import { ListViewComponent,Inject, Virtualization } from '@syncfusion/ej2-react-lists'; /*Inject Virtualization*/
    import { SampleBase } from "./sample-base";

    export class Default extends SampleBase {
      constructor(props) {
        super(props);
        this.listData = [
            { text: "Nancy", id: "0" },
            { text: "Andrew", id: "1" },
            { text: "Janet", id: "2" },
            { text: "Margaret", id: "3" },
            { text: "Steven", id: "4" },
            { text: "Laura", id: "5" },
            { text: "Robert", id: "6" },
            { text: "Michael", id: "7" },
            { text: "Albert", id: "8" },
            { text: "Nolan", id: "9" }
        ];
        for (let i = 10; i <= 1010; i++) {
            let index = parseInt((Math.random() * 10).toString());
            this.listData.push({ text: this.listData[index].text, id: i.toString() });
        }
    }
  
     render() {
        return (
             <ListViewComponent id="list" dataSource={this.listData} enableVirtualization={true}>
                <Inject services={[Virtualization]}/>
            </ListViewComponent>
        );
       }
     }

    render(<Default />, document.getElementById("sample"));

Defaults to false

groupTemplate
`string` | `function` | `JSX.Element`

The ListView has an option to custom design the group header title with the help of groupTemplate property.

Defaults to null

headerTemplate
`string` | `function` | `JSX.Element`

The ListView has an option to custom design the ListView header title with the help of headerTemplate property.

Defaults to null

headerTitle
`string`

The headerTitle is used to set the title of the ListView component.

    import { render } from "react-dom";
    import "./index.css";
    import * as React from "react";
    import { ListViewComponent } from '@syncfusion/ej2-react-lists';
    import { SampleBase } from "./sample-base";

    export class Default extends SampleBase {
       data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
      render() {
        return (
           <div>
                <ListViewComponent id='list' dataSource={this.data} headerTitle="List of Arts" showHeader={true}>
                </ListViewComponent>
            </div>
        );
       }
     }

    render(<Default />, document.getElementById("sample"));

Defaults to ""

height
`number` | `string`

Defines the height of the ListView component which accepts both string and number values.

    import { render } from "react-dom";
    import "./index.css";
    import * as React from "react";
    import { ListViewComponent } from '@syncfusion/ej2-react-lists';
    import { SampleBase } from "./sample-base";

    export class Default extends SampleBase {
       data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
  
     render() {
        return (
            <ListViewComponent id="list" dataSource={this.data} height="200px" />
        );
       }
     }

    render(<Default />, document.getElementById("sample"));

Defaults to ”

htmlAttributes
`{ [key: string]: string }`

The htmlAttributes allows additional attributes such as id, class, etc., and accepts n number of attributes in a key-value pair format.

    import { render } from "react-dom";
    import "./index.css";
    import * as React from "react";
    import { ListViewComponent } from '@syncfusion/ej2-react-lists';
    import { SampleBase } from "./sample-base";

    export class Default extends SampleBase {
      data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
      htmlAttributes = {style: "border: 1px solid black"};

      render() {
        return (
            <ListViewComponent id="list" dataSource={this.data}  htmlAttributes={this.htmlAttributes} />
        );
       }
     }

    render(<Default />, document.getElementById("sample"));

Defaults to {}

locale
`string`

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

query
`Query`

The query is used to fetch the specific data from dataSource by using where and select keywords.

    import { render } from "react-dom";
    import "./index.css";
    import * as React from "react";
    import { ListViewComponent } from '@syncfusion/ej2-react-lists';
    import { SampleBase } from "./sample-base";
    import { DataManager, Query } from '@syncfusion/ej2-data'; /* Import datamanager and query*/

    export class Default extends SampleBase {
       data = new DataManager({ url:"//js.syncfusion.com/ejServices/Wcf/Northwind.svc/", crossDomain: true });
        //bind the Query instance to query property
       query = new Query()
            .from("Products")
            .select("ProductID,ProductName")
            .take(6);
        //map the appropriate columns to fields property
      fields = { id: "ProductID", text: "ProductName" };
      render() {
        return (
            <ListViewComponent id="list" dataSource={this.data} fields={this.fields} query={this.query} showHeader={true} headerTitle="Product Name"/>
        );
       }
     }

    render(<Default />, document.getElementById("sample"));

Defaults to null

showCheckBox
`boolean`

If showCheckBox set to true, which will show or hide the checkbox.

    import { render } from "react-dom";
    import "./index.css";
    import * as React from "react";
    import { ListViewComponent } from '@syncfusion/ej2-react-lists';
    import { SampleBase } from "./sample-base";

    export class Default extends SampleBase {
       data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
  
     render() {
        return (
            <ListViewComponent id="list" dataSource={this.data} showCheckBox={true} />
        );
       }
     }

    render(<Default />, document.getElementById("sample"));

Defaults to false

showHeader
`boolean`

If showHeader set to true, which will show or hide the header of the ListView component.

    import { render } from "react-dom";
    import "./index.css";
    import * as React from "react";
    import { ListViewComponent } from '@syncfusion/ej2-react-lists';
    import { SampleBase } from "./sample-base";

    export class Default extends SampleBase {
       data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
 
     render() {
        return (
            <ListViewComponent id="list" dataSource={this.data} showHeader={true} headerTitle="List of Items" />
        );
       }
     }

    render(<Default />, document.getElementById("sample"));

Defaults to false

showIcon
`boolean`

If showIcon set to true, which will show or hide the icon of the list item.

     <style>
      .e-listview .e-list-icon {
        height: 24px;
        width: 30px;
      }
      .folder {
        background-repeat: no-repeat;
        background-image: url("css/listview/images/file_icons.png");
        background-position: -5px -466px;
        background-size: 302%;
      }
  </style>

    import { render } from "react-dom";
    import "./index.css";
    import * as React from "react";
    import { ListViewComponent } from '@syncfusion/ej2-react-lists';
    import { SampleBase } from "./sample-base";

    export class Default extends SampleBase {
       data = [{
          'Name': 'Music',
          'id': 'list-01',
          'icon':'folder'
        },
        {
          'Name': 'Videos',
          'id': 'list-02',
          'icon':'folder'
        },
        {
          'Name': 'Documents',
          'id': 'list-03',
          'icon': 'folder'
        }];
     fields= { text: 'Name', tooltip: 'Name', id:'id',iconCss:'icon'}
     render() {
        return (
            <ListViewComponent id="list" dataSource={this.data} fields={this.fields} showIcon={true}/>
        );
       }
     }

    render(<Default />, document.getElementById("sample"));

Defaults to false

template
`string` | `function` | `JSX.Element`

The ListView component supports to customize the content of each list items with the help of template property.

    import { render } from "react-dom";
    import "./index.css";
    import * as React from "react";
    import { ListViewComponent } from '@syncfusion/ej2-react-lists';
    import { SampleBase } from "./sample-base";

    export class Default extends SampleBase {
       data = [
            { Name: 'Janet', contact: '(206) 555-3412', id: '2', image: 'https://ej2.syncfusion.com/demos/src/grid/images/3.png', category: 'Fresher' },
            { Name: 'Margaret', contact: '(206) 555-8122', id: '4', image: 'https://ej2.syncfusion.com/demos/src/grid/images/4.png', category: 'Experience' },
            { Name: 'Andrew ', contact: '(206) 555-9482', id: '5', image: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', category: 'Experience' },
            { Name: 'Robert', contact: '(71) 555-5598', id: '8', image: 'https://ej2.syncfusion.com/demos/src/grid/images/7.png', category: 'Fresher' }
        ];
      fields = { text: 'Name', groupBy: 'category' };
      listTemplate(data) {
        return (<div className="e-list-wrapper e-list-multi-line e-list-avatar">
                <img className="e-avatar e-avatar-circle" src={data.image}/>
                <span className="e-list-item-header">{data.Name}</span>
                <span className="e-list-content">{data.contact}</span>
            </div>);
     }
      render() {
        return (
           <div>
                <ListViewComponent id='list' dataSource={this.data} fields={this.fields} template={this.listTemplate} width='350px' cssClass='e-list-template'>
                </ListViewComponent>
            </div>
        );
       }
     }

    render(<Default />, document.getElementById("sample"));

Defaults to null

width
`number` | `string`

Defines the width of the ListView component which accepts both string and number values.

    import { render } from "react-dom";
    import "./index.css";
    import * as React from "react";
    import { ListViewComponent } from '@syncfusion/ej2-react-lists';
    import { SampleBase } from "./sample-base";

    export class Default extends SampleBase {
       data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
  
     render() {
        return (
            <ListViewComponent id="list" dataSource={this.data} width="300px" />
        );
       }
     }

    render(<Default />, document.getElementById("sample"));

Defaults to ”

Methods

addItem

Adds the new list item(s) to the current ListView. To add a new list item(s) in the ListView, we need to pass the data as an array of items that need to be added and fields as the target item to which we need to add the given item(s) as its children. For example fields: { text: ‘Name’, tooltip: ‘Name’, id:‘id’}

Returns void

back

Switches back from the navigated sub list item.

Returns void

checkAllItems

Checks all the unchecked items in the ListView.

Returns void

checkItem

Checks the specific list item by passing the unchecked fields as an argument to this method.

Parameter	Type	Description
item	`Fields` \| `HTMLElement` \| `Element`	It accepts Fields or HTML list element as an argument.

Returns void

destroy

It is used to destroy the ListView component.

Returns void

disableItem

Disables the list items by passing the Id and text fields.

Parameter	Type	Description
item	`Fields` \| `HTMLElement` \| `Element`	We can pass element Object or Fields as Object with ID and Text fields.

Returns void

enableItem

Enables the disabled list items by passing the Id and text fields.

Parameter	Type	Description
item	`Fields` \| `HTMLElement` \| `Element`	We can pass element Object or Fields as Object with ID and Text fields.

Returns void

findItem

Finds out an item details from the current list.

Parameter	Type	Description
item	`Fields` \| `HTMLElement` \| `Element`	We can pass element Object or Fields as Object with ID and Text fields.

Returns SelectedItem

getSelectedItems

Gets the details of the currently selected item from the list items.

Returns SelectedItem | SelectedCollection | UISelectedItem | NestedListData

hideItem

Hides an list item from the ListView.

Parameter	Type	Description
item	`Fields` \| `HTMLElement` \| `Element`	We can pass element Object or Fields as Object with ID and Text fields.

Returns void

refreshItemHeight

Refresh the height of the list item only on enabling the virtualization property.

Returns void

removeItem

Removes the list item from the data source based on a passed element like fields: { text: ‘Name’, tooltip: ‘Name’, id:‘id’}

Parameter	Type	Description
item	`Fields` \| `HTMLElement` \| `Element`	We can pass element Object or Fields as Object with ID and Text fields.

Returns void

removeMultipleItems

Removes multiple items from the ListView by passing the array of elements or array of field objects.

Parameter	Type	Description
item	`HTMLElement[]` \| `Element[]` \| `Fields[]`	We can pass array of elements or array of field Object with ID and Text fields.

Returns void

selectItem

Selects the list item from the ListView by passing the elements or field object.

Parameter	Type	Description
item	`Fields` \| `HTMLElement` \| `Element`	We can pass element Object or Fields as Object with ID and Text fields.

Returns void

selectMultipleItems

Selects multiple list items from the ListView.

Parameter	Type	Description
item	`Fields[]` \| `HTMLElement[]` \| `Element[]`	We can pass array of elements or array of fields Object with ID and Text fields.

Returns void

showItem

Shows the hide list item from the ListView.

Parameter	Type	Description
item	`Fields` \| `HTMLElement` \| `Element`	We can pass element Object or Fields as Object with ID and Text fields.

Returns void

uncheckAllItems

Uncheck all the checked items in ListView.

Returns void

uncheckItem

Uncheck the specific list item by passing the checked fields as an argument to this method.

Parameter	Type	Description
item	`Fields` \| `HTMLElement` \| `Element`	It accepts Fields or HTML list element as an argument.

Returns void

Events

actionBegin
`EmitType<any>`

Triggers when every ListView action starts.

actionComplete
`EmitType<MouseEvent>`

Triggers when every ListView actions completed.

actionFailure
`EmitType<MouseEvent>`

Triggers, when the data fetch request from the remote server, fails.

select
`EmitType<SelectEventArgs>`

Triggers when we select the list item in the component.

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

ListViewComponent

Properties

animation AnimationSettings

checkBoxPosition checkBoxPosition

cssClass string

dataSource { [key: string]: Object }[] | string[] | number[] | DataManager

enable boolean

enableHtmlSanitizer boolean

enablePersistence boolean

enableRtl boolean

enableVirtualization boolean

fields FieldSettingsModel

groupTemplate string | function | JSX.Element

headerTemplate string | function | JSX.Element

headerTitle string

height number | string

htmlAttributes { [key: string]: string }

locale string

query Query

showCheckBox boolean

showHeader boolean

showIcon boolean

sortOrder SortOrder

template string | function | JSX.Element

width number | string

Methods

addItem

back

checkAllItems

checkItem

destroy

disableItem

enableItem

findItem

getSelectedItems

hideItem

refreshItemHeight

removeItem

removeMultipleItems

selectItem

selectMultipleItems

showItem

uncheckAllItems

uncheckItem

Events

actionBegin EmitType<any>

actionComplete EmitType<MouseEvent>

actionFailure EmitType<MouseEvent>

select EmitType<SelectEventArgs>

animation
`AnimationSettings`

checkBoxPosition
`checkBoxPosition`

cssClass
`string`

dataSource
`{ [key: string]: Object }[]` | `string[]` | `number[]` | `DataManager`

enable
`boolean`

enableHtmlSanitizer
`boolean`

enablePersistence
`boolean`

enableRtl
`boolean`

enableVirtualization
`boolean`

fields
`FieldSettingsModel`

groupTemplate
`string` | `function` | `JSX.Element`

headerTemplate
`string` | `function` | `JSX.Element`

headerTitle
`string`

height
`number` | `string`

htmlAttributes
`{ [key: string]: string }`

locale
`string`

query
`Query`

showCheckBox
`boolean`

showHeader
`boolean`

showIcon
`boolean`

sortOrder
`SortOrder`

template
`string` | `function` | `JSX.Element`

width
`number` | `string`

actionBegin
`EmitType<any>`

actionComplete
`EmitType<MouseEvent>`

actionFailure
`EmitType<MouseEvent>`

select
`EmitType<SelectEventArgs>`