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

ListViewComponent

Represents VueJS ListView Component

<ejs-listview :dataSource='data'></ejs-listview>

Properties

animation

AnimationSettings

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>

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.

<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>

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)

<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>

Defaults to ”

dataSource

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.

<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>

Defaults to true

enableHtmlSanitizer

boolean

If enableHtmlSanitizer set to true, allows the cross-scripting site.

<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>

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.

<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>

Defaults to false

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.

<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>

Defaults to defaultMappedFields

groupTemplate

string

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

Defaults to null

headerTemplate

string

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.

<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>

Defaults to ""

height

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>

Defaults to ”

htmlAttributes

Object

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>

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.

<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>

Defaults to null

showCheckBox

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>

Defaults to false

showHeader

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>

Defaults to false

showIcon

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>

Defaults to false

sortOrder

string

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>

Defaults to ‘None’

template

string

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>

Defaults to null

width

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>

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.

Previous
Next