ListViewModel
23 Sep 202524 minutes to read
Interface for a class ListView
Properties
actionBegin EmitType<object>
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.
scroll EmitType<ScrolledEventArgs>
Triggers when scrollbar of the ListView component reaches to the top or bottom.
select EmitType<SelectEventArgs>
Triggers when we select the list item in the component.
animation AnimationSettings
The animation property provides an option to apply the different
animations on the ListView component.
<div id='list'></div> import {ListView} from '@syncfusion/ej2-lists';
let continent: { [key: string]: Object }[] = [
{
'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',
}]
}]
}
];
//Initialize ListView control
let listviewObject: ListView = new ListView({
//set the data to datasource property
dataSource: continent,
// map the fields
fields: { tooltip: 'text' , groupBy:'category',text:'text',id:'id'},
headerTitle: 'Continent',
showHeader: true,
animation : {effect: 'Zoom', duration: 300, easing: 'ease' }
});
//Render initialized ListView
listviewObject.appendTo("#list");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.
<div id='list'></div> import {ListView} from '@syncfusion/ej2-lists';
let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
//Initialize ListView control
let listviewObject: ListView = new ListView({
//set the data to datasource property
dataSource: arts,
showCheckBox:true,
checkBoxPosition: "Right"
});
//Render initialized ListView
listviewObject.appendTo("#list");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)
<div id='list'></div>
<style>
.custom
{
font-style: italic;
}
</style> import {ListView} from '@syncfusion/ej2-lists';
let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
//Initialize ListView control
let listviewObject: ListView = new ListView({
//set the data to datasource property
dataSource: arts,
cssClass: "custom"
});
//Render initialized ListView
listviewObject.appendTo("#list");dataSource { : }[]|string[]|number[]|DataManager
The dataSource provides the data to render the ListView component which is mapped with the fields of ListView.
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.
<div id='list'></div> import {ListView} from '@syncfusion/ej2-lists';
let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
//Initialize ListView control
let listviewObject: ListView = new ListView({
//set the data to datasource property
dataSource: arts,
enable: false
});
//Render initialized ListView
listviewObject.appendTo("#list");enableHtmlSanitizer boolean
Specifies whether to display or remove the untrusted HTML values in the ListView component.
If ‘enableHtmlSanitizer’ set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
<div id='list'></div> import {ListView} from '@syncfusion/ej2-lists';
let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
//Initialize ListView control
let listviewObject: ListView = new ListView({
//set the data to datasource property
dataSource: arts,
enableHtmlSanitizer: true
});
//Render initialized ListView
listviewObject.appendTo("#list");enablePersistence boolean
Enable or disable persisting component’s state between page reloads.
enableRtl boolean
Enable or disable rendering component in right to left direction.
enableVirtualization boolean
If enableVirtualization set to true, which will increase the ListView performance, while loading a large amount of data.
<div id='list'></div>import { ListView, Virtualization } from '@syncfusion/ej2-lists';
ListView.Inject(Virtualization);/*Inject Virtualization*/
let listData: { [key: string]: string | object }[] = [];
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: number = 10; i <= 1010; i++) {
let index: number = parseInt((Math.random() * 10).toString());
listData.push({ text: listData[index].text, id: i.toString() });
}
let listviewObject: ListView = new ListView({
//Set defined data to dataSource property.
dataSource: listData,
//Set height
height: 500,
//enable UI virtualization
enableVirtualization: true,
});
//Render initialized ListView component
listviewObject.appendTo('#list');fields FieldSettingsModel
The fields is used to map keys from the dataSource which extracts the appropriate data from the dataSource
with specified mapped with the column fields to render the ListView.
<div id='list'></div> import {ListView} from '@syncfusion/ej2-lists';
let cars: { [key: string]: Object }[] = [
{
'text': 'Audi A4',
'id': '9bdb',
'enabled':true,
'Icon': "file",
'check':true,
'visible':true,
'category': 'Audi'
},
{
'text': 'Audi A5',
'id': '4589',
'Icon': "file",
'enabled':'true',
'check':false,
'category': 'Audi'
},
{
'text': 'Audi A6',
'id': 'e807',
'Icon': "file",
'enabled':'false',
'check':false,
'visible':true,
'category': 'Audi'
},
{
'text': 'BMW 501',
'id': 'f849',
'enabled':true,
'Icon': "file",
'visible':true,
'check':true,
'category': 'BMW'
},
{
'text': 'BMW 502',
'id': '7aff',
'Icon': "file",
'enabled':false,
'check':false,
'visible':true,
'category': 'BMW'
},
{
'text': 'BMW 503',
'id': 'b1da',
'Icon': "file",
'enabled':true,
'visible':false,
'check':false,
'category': 'BMW'
}
];
//Initialize ListView control
let listviewObject: ListView = new ListView({
//set the data to datasource property
dataSource: cars,
// map the fields with corresponding value
fields: { groupBy: 'category', tooltip: 'text' , text:'text', id:'id', enabled:'enabled',isVisible:'visible', isChecked:'check', iconCss:'Icon'},
showCheckBox:true,
showIcon:true
});
//Render initialized ListView
listviewObject.appendTo("#list");groupTemplate string|Function
The ListView has an option to custom design the group header title with the help of groupTemplate property.
headerTemplate string|Function
The ListView has an option to custom design the ListView header title with the help of headerTemplate property.
headerTitle string
The headerTitle is used to set the title of the ListView component.
<div id='list'></div> import { ListView } from '@syncfusion/ej2-lists';
let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
// Initialize the ListView control
let listviewObject: ListView = new ListView({
//Set the defined data to the data source property
dataSource: arts,
showHeader: true,
headerTitle: "List of Items"
});
//Render the initialized ListView control
listviewObject.appendTo('#List');height number|string
Defines the height of the ListView component which accepts both string and number values.
<div id='list'></div> import {ListView} from '@syncfusion/ej2-lists';
let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
//Initialize ListView control
let listviewObject: ListView = new ListView({
//set the data to datasource property
dataSource: arts,
height:200
});
//Render initialized ListView
listviewObject.appendTo("#list");htmlAttributes { : }
The htmlAttributes allows additional attributes such as id, class, etc., and
accepts n number of attributes in a key-value pair format.
<div id='list'></div> import {ListView} from '@syncfusion/ej2-lists';
let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
//Initialize ListView control
let listviewObject: ListView = new ListView({
//set the data to datasource property
dataSource: arts,
htmlAttributes:{style: "border: 1px solid black"}
});
//Render initialized ListView
listviewObject.appendTo("#list");locale string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
query Query
The query is used to fetch the specific data from dataSource by using where and select keywords.
<div id='list'></div> import {ListView} from '@syncfusion/ej2-lists';
import { DataManager, Query } from '@syncfusion/ej2-data'; /* Import datamanager and query*/
//Initialize ListView control
let listviewObject: ListView = new ListView({
//bind the DataManager instance to dataSource property
dataSource: 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 the initialized ListView control
listviewObject.appendTo('#List');showCheckBox boolean
If showCheckBox set to true, which will show or hide the checkbox.
<div id='list'></div> import {ListView} from '@syncfusion/ej2-lists';
let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
//Initialize ListView control
let listviewObject: ListView = new ListView({
//set the data to datasource property
dataSource: arts,
showCheckBox:true
});
//Render initialized ListView
listviewObject.appendTo("#list");showHeader boolean
If showHeader set to true, which will show or hide the header of the ListView component.
<div id='list'></div> import {ListView} from '@syncfusion/ej2-lists';
let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
//Initialize ListView control
let listviewObject: ListView = new ListView({
//set the data to datasource property
dataSource: arts,
showHeader:true,
headerTitle:"List of Arts"
});
//Render initialized ListView
listviewObject.appendTo("#list");showIcon boolean
If showIcon set to true, which will show or hide the icon of the list item.
<div id='list'></div>
<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 { ListView } from '@syncfusion/ej2-lists';
let settings: { [key: string]: Object }[] = [
{
'Name': 'Music',
'id': 'list-01',
'icon':'folder'
},
{
'Name': 'Videos',
'id': 'list-02',
'icon':'folder'
},
{
'Name': 'Documents',
'id': 'list-03',
'icon': 'folder'
}
];
//Initialize ListView control
let listviewObject: ListView = new ListView({
//set the data to datasource property
dataSource: settings,
//map the appropriate columns to fields property
fields: { text: 'Name', tooltip: 'Name', id:'id',iconCss:'icon'},
showIcon: true
});
//Render the initialized ListView control
listviewObject.appendTo('#List');sortOrder SortOrder
The sortOrder is used to sort the data source. The available type of sort orders are,
-
None- The data source is not sorting. -
Ascending- The data source is sorting with ascending order. -
Descending- The data source is sorting with descending order.
<div id='list'></div> import { ListView } from '@syncfusion/ej2-lists';
let settings: { [key: string]: Object }[] = [
{
'Name': 'Display',
'id': 'list-01'
},
{
'Name': 'Notification',
'id': 'list-02'
},
{
'Name': 'Sound',
'id': 'list-03'
},
{
'Name': 'Apps',
'id': 'list-04'
},
{
'Name': 'Storage',
'id': 'list-05'
},
{
'Name': 'Battery',
'id': 'list-06'
}
];
//Initialize ListView control
let listviewObject: ListView = new ListView({
//set the data to datasource property
dataSource: settings,
//map the appropriate columns to fields property
fields: { text: 'Name', tooltip: 'Name', id:'id', sortBy:"Name"},
sortOrder:"Descending"
});
//Render the initialized ListView control
listviewObject.appendTo('#List');template string|Function
The ListView component supports to customize the content of each list items with the help of template property.
<div id='list'></div> import { ListView } from '@syncfusion/ej2-lists';
let template: string = '<div class="e-list-wrapper e-list-multi-line e-list-avatar">' +
'<img class="e-avatar e-avatar-circle" src=${image} style="background:#BCBCBC" />' +
'<span class="e-list-item-header">${Name}</span>' +
'<span class="e-list-content">${contact}</span>' +
'</div>';
//Define an array of JSON data
let dataSource = [
{ Name: 'Nancy', contact:'(206) 555-985774', id: '1', image: 'https://ej2.syncfusion.com/demos/src/grid/images/1.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: 'Steven', contact:'(71) 555-4848', id: '6', image: 'https://ej2.syncfusion.com/demos/src/grid/images/5.png', category: 'Fresher' },
{ Name: 'Robert', contact:'(71) 555-5598', id: '8', image: 'https://ej2.syncfusion.com/demos/src/grid/images/7.png', category: 'Fresher' }
];
// Initialize the ListView control
let listviewObject: ListView = new ListView({
//Set the defined data to the data source property
dataSource: dataSource,
//Map the appropriate columns to the fields property
fields: { text: 'Name'},
//set cssClass for template customization
cssClass: 'e-list-template',
//Set the customized template
template: template
});
//Render the initialized ListView control
listviewObject.appendTo('#List');width number|string
Defines the width of the ListView component which accepts both string and number values.
<div id='list'></div> import {ListView} from '@syncfusion/ej2-lists';
let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
//Initialize ListView control
let listviewObject: ListView = new ListView({
//set the data to datasource property
dataSource: arts,
width:250
});
//Render initialized ListView
listviewObject.appendTo("#list");