Api listView in Vue Listview component

16 Mar 20238 minutes to read

Represents the EJ2 ListView control.

<div id="listview">
<ul>
<li>Favourite</li>
<li>Documents</li>
<li>Downloads</li>
</ul>
</div>

  var lvObj = new ListView({});
  lvObj.appendTo("#listview");

Properties

animation AnimationSettings

It is used to apply the animation to sub list navigation of list items.

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

checkBoxPosition checkBoxPosition

It is used to set the position of check box in an item.

Defaults to ‘Left’

cssClass string

This cssClass property helps to use custom skinning option for ListView component, by adding the mentioned class name into root element of ListView.

Defaults to ’’

dataSource ``Object[] | string[] | number[] | DataManager

It provides the data to render the ListView component which is mapped with the fields of ListViewhttps://ej2.syncfusion.com/vue/documentation

Defaults to []

enable boolean

It specifies enabled state of ListView component.

Defaults to true

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

It enables UI virtualization which will increase ListView performance on loading large number of data.

Defaults to false

fields FieldSettingsModel

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

Defaults to ListBase.defaultMappedFields

groupTemplate string

The ListView has an option to custom design the group header title with the help of groupTemplate property.
Refer the documentation [here] (http://ej2.syncfusion.com/documentation/list-view/customizing-templates.html?lang=typescript#group-template) to know more about this property with demo.

Defaults to null

headerTemplate string

The ListView has an option to custom design the ListView header title with the help of headerTemplate property.
Refer the documentation [here] (http://ej2.syncfusion.com/documentation/list-view/customizing-templates.html?lang=typescript#header-template) to know more about this property with demo.

Defaults to null

headerTitle string

It is used to set the title of ListView component.

Defaults to ””

height number | string

It is used to set the height of the ListView component.

Defaults to ’’

htmlAttributes Object

Defines the HTML attributes such as id, class, etc., for the ListView.

Defaults to {}

locale string

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

Defaults to undefined

query Query

It is used to fetch the specific data from dataSource by using where, select key words.
Refer the documentation [here] (http://ej2.syncfusion.com/documentation/list-view/data-binding.html?lang=typescript#bind-to-remote-data) to know more about this property with demo.

Defaults to null

showCheckBox boolean

Using this property, we can show or hide the checkbox.

Defaults to false

showHeader boolean

Using this property, we can show or hide the header of ListView component.

Defaults to false

showIcon boolean

Using this property, we can show or hide the icon of list item.

Defaults to false

sortOrder string

It is used to enable the sorting of list items to be ascending or descending.

Defaults to ‘None’

template string

The ListView supports to customize the content of each list items with the help of template property.
Refer the documentation hereto know more about this property with demo.

Defaults to null

width number | string

It sets the width to the ListView component.

Defaults to ’’

Methods

addEventListener

Adds the handler to the given event listener.

Returns void

addItem

It adds new item to current ListView. To add a new item in the list view, we need to pass ‘data’ as array or object and ‘fields’ as object.

For example fields: { text: ‘Name’, tooltip: ‘Name’, id:’id’}

Returns void

appendTo

Appends the control within the given HTML element

Parameter	Type	Description
selector (optional)	string | HTMLElement	Target element where control needs to be appended

Returns void

back

It helps to switch back from navigated sub list.

Returns void

checkAllItems

It is used to check all the items in ListView.

Returns void

checkItem

It is used to check the checkbox of an item.

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

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

It is used to destroy the ListView component.

Returns void

disableItem

It is used to disable the list items based on passed element.

Parameter	Type	Description
obj	Fields | HTMLElement	We can pass element Object or Fields as Object with ID and Text fields.

Returns void

enableItem

A function that used to enable the disabled list items based on passed element.

Parameter	Type	Description
obj	Fields | HTMLElement	We can pass element Object or Fields as Object with ID and Text fields.

Returns void

findItem

It is used to find out an item details from the current list.

Parameter	Type	Description
obj	Fields | HTMLElement	We can pass element Object or Fields as Object with ID and Text fields.

Returns SelectedItem

getSelectedItems

It is used to get the currently here item details from the list items.

Returns SelectedItem | SelectedCollection | UISelectedItem | NestedListData

hideItem

It is used to hide an item from the ListView.

Parameter	Type	Description
obj	Fields | HTMLElement	We can pass element Object or Fields as Object with ID and Text fields.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

removeItem

A function that removes the item from data source based on passed element like fields: { text: ‘Name’, tooltip: ‘Name’, id:’id’}

Parameter	Type	Description
obj	Element | Fields	We can pass element Object or Fields as Object with ID and Text fields.

Returns void

removeMultipleItems

A function that removes multiple item from list view based on given input.

Parameter	Type	Description
obj	HTMLElement[] | Fields[]	We can pass array of elements or array of field Object with ID and Text fieldshttps://ej2.syncfusion.com/vue/documentation

Returns void

render

It is used to Initialize the control rendering.

Returns void

selectItem

It is used to select the list item from the ListView.

Parameter	Type	Description
obj	Fields | HTMLElement	We can pass element Object or Fields as Object with ID and Text fields.

Returns void

selectMultipleItems

It is used to select multiple list item from the ListView.

Parameter	Type	Description
obj	Fields[] | HTMLElement[]	We can pass array of elements or array of field Object with ID and Text fieldshttps://ej2.syncfusion.com/vue/documentation

Returns void

showItem

It is used to show an list item from the ListView.

Parameter	Type	Description
obj	Fields | HTMLElement	We can pass element Object or Fields as Object with ID and Text fields.

Returns void

uncheckAllItems

It is used to un-check all the items in ListView.

Returns void

uncheckItem

It is used to uncheck the checkbox of an item.

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

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

actionBegin EmitType<Object>

We can trigger actionBegin event before every ListView action starts.

actionComplete EmitType<Object>

We can trigger actionComplete event for every ListView action success event
with the dataSource parameter.

actionFailure EmitType<Object>

We can trigger actionFailure event for every ListView action failure event
with the dataSource parameter.

select EmitType<SelectEventArgs>

We can trigger the select event when we select the list item in the component.