Interface for a class ListView
EmitType<any>
Triggers when every ListView action starts.
EmitType<MouseEvent>
Triggers when every ListView actions completed.
EmitType<MouseEvent>
Triggers, when the data fetch request from the remote server, fails.
Triggers when scrollbar of the ListView component reaches to the top or bottom.
Triggers when we select the list item in the component.
The animation
property provides an option to apply the different
animations on the ListView component.
<template>
<div>
<ejs-listview id='list' :dataSource='data' :fields='fields' :headerTitle='headerTitle' showHeader='true' :animation='animation'></ejs-listview>
</div>
</template>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
Vue.use(ListViewPlugin);
export default {
data: function() {
return {
data: [{
'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',
}]
}]
}
],
fields: { groupBy: 'category'},
//set the header tittle for the list
headerTitle: ' Continent',
animation: {ease:"ease", duration:400, effect:"Zoom"}
};
}
};
</script>
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.
<template>
<div>
<ejs-listview
id="list"
:dataSource="data"
:showCheckBox="true"
:checkBoxPosition="position">
</ejs-listview>
</div>
</template>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
Vue.use(ListViewPlugin);
export default {
data: function() {
return {
data: [
"Artwork",
"Abstract",
"Modern Painting",
"Ceramics",
"Animation Art",
"Oil Painting"
],
position: "Right"
};
}
};
</script>
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)
<template>
<div>
<ejs-listview id="list" :dataSource="data" :cssClass="customclass"></ejs-listview>
</div>
</template>
<style>
.custom{
font-style : italic;
}
</style>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
Vue.use(ListViewPlugin);
export default {
data: function() {
return {
data: [
"Artwork",
"Abstract",
"Modern Painting",
"Ceramics",
"Animation Art",
"Oil Painting"
],
customclass: "custom"
};
}
};
</script>
{ [key: string]: Object }[]
| string[]
| number[]
| DataManager
The dataSource
provides the data to render the ListView component which is mapped with the fields of ListView.
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.
<template>
<div>
<ejs-listview id="list" :dataSource="data" :enable="false"></ejs-listview>
</div>
</template>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
Vue.use(ListViewPlugin);
export default {
data: function() {
return {
data: [
"Artwork",
"Abstract",
"Modern Painting",
"Ceramics",
"Animation Art",
"Oil Painting"
]
};
}
};
</script>
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.
<template>
<div>
<ejs-listview id="list" :dataSource="data" :enableHtmlSanitizer="true"></ejs-listview>
</div>
</template>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
Vue.use(ListViewPlugin);
export default {
data: function() {
return {
data: [
"Artwork",
"Abstract",
"Modern Painting",
"Ceramics",
"Animation Art",
"Oil Painting"
]
};
}
};
</script>
boolean
Enable or disable persisting component’s state between page reloads.
boolean
Enable or disable rendering component in right to left direction.
boolean
If enableVirtualization
set to true, which will increase the ListView performance, while loading a large amount of data.
<template>
<div>
<ejs-listview id="list" :dataSource="listData" :enableVirtualization="enableUi"></ejs-listview>
</div>
</template>
<style>
#list {
display: block;
max-width: 400px;
margin: auto;
border-radius: 3px;
cursor: pointer;
}
</style>
<script>
import Vue from "vue";
import { ListViewPlugin, Virtualization } from "@syncfusion/ej2-vue-lists"; /*Import Virtualization*/
Vue.use(ListViewPlugin);
let listData = [];
export default {
beforeCreate: function() {
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 <= 1000; i++) {
let index = parseInt((Math.random() * 10).toString());
listData.push({ text: listData[index].text, id: i.toString() });
}
},
data: function() {
return {
listData: listData,
enableUi: true
};
},
provide: {
listview: [Virtualization]
}
};
</script>
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.
<template>
<div>
<ejs-listview id="list" :dataSource="data" :fields="fields"></ejs-listview>
</div>
</template>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
Vue.use(ListViewPlugin);
export default {
data: function() {
return {
data: [
{
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"
}
],
fields: {
groupBy: "category",
tooltip: "text",
text: "text",
id: "id",
enabled: "enabled",
isVisible: "visible",
isChecked: "check",
iconCss: "Icon"
}
};
}
};
</script>
string
| function
The ListView has an option to custom design the group header title with the help of groupTemplate
property.
string
| function
The ListView has an option to custom design the ListView header title with the help of headerTemplate
property.
string
The headerTitle
is used to set the title of the ListView component.
<template>
<div>
<ejs-listview id="list" :dataSource="data" :headerTitle="title" :showHeader='true'></ejs-listview>
</div>
</template>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
Vue.use(ListViewPlugin);
export default {
data: function() {
return {
data: [
"Artwork",
"Abstract",
"Modern Painting",
"Ceramics",
"Animation Art",
"Oil Painting"
],
title: "List of Arts"
};
}
};
</script>
number
| string
Defines the height of the ListView component which accepts both string and number values.
<template>
<div>
<ejs-listview
id="list"
:dataSource="data"
:height=200
></ejs-listview>
</div>
</template>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
Vue.use(ListViewPlugin);
export default {
data: function() {
return {
data: [
"Artwork",
"Abstract",
"Modern Painting",
"Ceramics",
"Animation Art",
"Oil Painting"
]
};
}
};
</script>
{ [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.
<template>
<div>
<ejs-listview id="list" :dataSource="data" :htmlAttributes="attributes"></ejs-listview>
</div>
</template>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
Vue.use(ListViewPlugin);
export default {
data: function() {
return {
data: [
"Artwork",
"Abstract",
"Modern Painting",
"Ceramics",
"Animation Art",
"Oil Painting"
],
attributes: { style: "border:1px solid black" }
};
}
};
</script>
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Query
The query
is used to fetch the specific data from dataSource by using where and select keywords.
<template>
<div>
<!-- ListView element -->
<ejs-listview id='list' :dataSource='data' :query='query' :fields='fields' :headerTitle='headerTitle' showHeader='true'></ejs-listview>
</div>
</template>
<script>
import Vue from "vue";
import { DataManager, Query } from '@syncfusion/ej2-data'; /* Import datamanager and query*/
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
Vue.use(ListViewPlugin);
export default {
data: function() {
return {
data: new DataManager({
url: '//js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/',
crossDomain: true
}),
query: new Query().from('Products').select('ProductID,ProductName').take(6),
fields: { id: 'ProductID', text: 'ProductName' },
headerTitle: 'Products',
};
}
}
</script>
boolean
If showCheckBox
set to true, which will show or hide the checkbox.
<template>
<div>
<ejs-listview
id="list"
:dataSource="data"
:showCheckBox="true">
</ejs-listview>
</div>
</template>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
Vue.use(ListViewPlugin);
export default {
data: function() {
return {
data: [
"Artwork",
"Abstract",
"Modern Painting",
"Ceramics",
"Animation Art",
"Oil Painting"
]
};
}
};
</script>
boolean
If showHeader
set to true, which will show or hide the header of the ListView component.
<template>
<div>
<ejs-listview id="list" :dataSource="data" :headerTitle="title" :showHeader='true'></ejs-listview>
</div>
</template>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
Vue.use(ListViewPlugin);
export default {
data: function() {
return {
data: [
"Artwork",
"Abstract",
"Modern Painting",
"Ceramics",
"Animation Art",
"Oil Painting"
],
title: "List of Items"
};
}
};
</script>
boolean
If showIcon
set to true, which will show or hide the icon of the list item.
<template>
<div>
<ejs-listview id="list" :dataSource="data" :fields="fields" :showIcon="true"></ejs-listview>
</div>
</template>
<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>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
Vue.use(ListViewPlugin);
export default {
data: function() {
return {
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" }
};
}
};
</script>
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.<template>
<div>
<ejs-listview id="list" :dataSource="data" :fields="fields" :sortOrder="order"></ejs-listview>
</div>
</template>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
Vue.use(ListViewPlugin);
export default {
data: function() {
return {
data: [
{
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"
}
],
fields: { text: "Name", tooltip: "Name", id: "id", sortBy: "Name" },
order: "Descending"
};
}
};
</script>
string
| function
The ListView component supports to customize the content of each list items with the help of template
property.
<template>
<div class="control-section">
<div id="flat-list">
<!-- ListView element -->
<ejs-listview
id="List"
:dataSource="data"
headerTitle="Contacts"
showHeader="true"
cssClass="e-list-template"
:template="template"
width="350px"
></ejs-listview>
</div>
</div>
</template>
<style>
#List .e-list-header {
background: rgb(2, 120, 215);
color: white;
}
#List #info,
#List .name {
font-size: 14px;
margin: 0 60px;
line-height: 20px;
}
#List .name {
padding-top: 8px;
font-weight: 500;
}
.pic01 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/1.png");
}
.pic02 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/3.png");
}
.pic03 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/5.png");
}
#List .e-list-item:nth-child(1) .e-avatar {
background-color: #039be5;
}
#List .e-list-item:nth-child(2) .e-avatar {
background-color: #e91e63;
}
</style>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
Vue.use(ListViewPlugin);
var demoVue = Vue.component("demo", {
template: `<div class="e-list-wrapper e-list-multi-line e-list-avatar">
<span :class="['e-avatar e-avatar-circle']" v-if="data.avatar !== ''">{{data.avatar}}</span>
<span :class="[data.pic + ' e-avatar e-avatar-circle']" v-if="data.pic !== '' "> </span>
<span class="e-list-item-header">{{data.text}}</span>
<span class="e-list-content">{{data.contact}}</span>
</div>`,
data() {
return {
data: {}
};
}
});
export default {
data: function() {
return {
data: [
{
text: "Amenda",
contact: "(206) 555-3412",
id: "2",
avatar: "A",
pic: ""
},
{
text: "Jenifer",
contact: "(206) 555-8122",
id: "4",
avatar: "",
pic: "pic02"
},
{
text: "Jacob",
contact: "(71) 555-4848",
id: "6",
avatar: "",
pic: "pic04"
},
{
text: "Matthew",
contact: "(71) 555-7773",
id: "7",
avatar: "M",
pic: ""
},
{
text: "Oliver",
contact: "(71) 555-5598",
id: "8",
avatar: "",
pic: "pic03"
}
],
fields: { text: "text" },
template: function() {
return { template: demoVue };
}
};
}
};
</script>
number
| string
Defines the width of the ListView component which accepts both string and number values.
<template>
<div>
<ejs-listview id="list" :dataSource="data" width="300px"></ejs-listview>
</div>
</template>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
Vue.use(ListViewPlugin);
export default {
data: function() {
return {
data: [
"Artwork",
"Abstract",
"Modern Painting",
"Ceramics",
"Animation Art",
"Oil Painting"
]
};
}
};
</script>