Vue List Methods
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
beginUpdate()
Prevents the widget from refreshing until the endUpdate() method is called.
The beginUpdate() and endUpdate() methods prevent the widget from excessive updates when you are changing multiple widget settings at once. After the beginUpdate() method is called, the widget does not update its UI until the endUpdate() method is called.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
clientHeight()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
collapseGroup(groupIndex)
A Promise that is resolved if the group is collapsed and rejected otherwise. It is a native Promise or a jQuery.Promise when you use jQuery.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- List - Expand and Collapse a Group
defaultOptions(rule)
defaultOptions is a static method that the widget class supports. The following code demonstrates how to specify default options for all instances of the List widget in an application executed on the desktop.
jQuery
DevExpress.ui.dxList.defaultOptions({ device: { deviceType: "desktop" }, options: { // Here go the List options } });
Angular
import List from "devextreme/ui/list"; // ... export class AppComponent { constructor () { List.defaultOptions({ device: { deviceType: "desktop" }, options: { // Here go the List options } }); } }
Vue
<template> <div> <DxList id="list1" /> <DxList id="list2" /> </div> </template> <script> import DxList from "devextreme-vue/list"; import List from "devextreme/ui/list"; List.defaultOptions({ device: { deviceType: "desktop" }, options: { // Here go the List options } }); export default { components: { DxList } } </script>
React
import React from "react"; import dxList from "devextreme/ui/list"; import List from "devextreme-react/list"; class App extends React.Component { render () { dxList.defaultOptions({ device: { deviceType: "desktop" }, options: { // Here go the List options } }) return ( <div> <List id="list1" /> <List id="list2" /> </div> ) } } export default App;
deleteItem(itemElement)
A Promise that is resolved if the item is deleted and rejected otherwise. It is a native Promise or a jQuery.Promise when you use jQuery.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- List - Item Deletion API
deleteItem(itemIndex)
A Promise that is resolved if the item is deleted and rejected otherwise. It is a native Promise or a jQuery.Promise when you use jQuery.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- List - Item Deletion API
dispose()
After calling this method, remove the DOM element associated with the widget:
$("#myList").dxList("dispose"); $("#myList").remove();
Use this method only if the widget was created with jQuery or pure JavaScript. In Angular, Vue, and React, use conditional rendering:
Angular
<dx-list ... *ngIf="condition"> </dx-list>
Vue
<template> <DxList ... v-if="condition"> </DxList> </template> <script> import DxList from 'devextreme-vue/list'; export default { components: { DxList } } </script>
React
import React from 'react'; import List from 'devextreme-react/list'; function DxList(props) { if (!props.shouldRender) { return null; } return ( <List ... > </List> ); } class App extends React.Component { render() { return ( <DxList shouldRender="condition" /> ); } } export default App;
See Also
element()
An HTML element or a jQuery element when you use jQuery.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
endUpdate()
Refreshes the widget after a call of the beginUpdate() method.
Main article: beginUpdate()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
expandGroup(groupIndex)
A Promise that is resolved if the group is expanded and rejected otherwise. It is a native Promise or a jQuery.Promise when you use jQuery.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- List - Expand and Collapse a Group
focus()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
getDataSource()
Gets the DataSource instance.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Data Layer - Overview
- Data Layer - DataSource Examples
getInstance(element)
getInstance is a static method that the widget class supports. The following code demonstrates how to get the List instance found in an element with the myList
ID:
// Modular approach import List from "devextreme/ui/list"; ... let element = document.getElementById("myList"); let instance = List.getInstance(element) as List; // Non-modular approach let element = document.getElementById("myList"); let instance = DevExpress.ui.dxList.getInstance(element);
See Also
instance()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
isItemSelected(itemElement)
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- List - Selection API
isItemSelected(itemIndex)
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- List - Selection API
off(eventName)
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
off(eventName, eventHandler)
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
on(eventName, eventHandler)
Use this method to subscribe to one of the events listed in the Events section.
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
on(events)
Use this method to subscribe to several events with one method call. Available events are listed in the Events section.
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
option()
Gets all widget options.
See Also
- Get and Set Options
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
option(optionName)
See Also
- Get and Set Options
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
option(optionName, optionValue)
See Also
- Get and Set Options
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
option(options)
See Also
- Get and Set Options
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
registerKeyHandler(key, handler)
A handler. Accepts the keydown event as the argument. It is a dxEvent or a jQuery.Event when you use jQuery.
The key argument accepts one of the following values:
- "backspace"
- "tab"
- "enter"
- "escape"
- "pageUp"
- "pageDown"
- "end"
- "home"
- "leftArrow"
- "upArrow"
- "rightArrow"
- "downArrow"
- "del"
- "space"
- "F"
- "A"
- "asterisk"
- "minus"
A custom handler for a key cancels the default handler for this key.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
reload()
You can also reload list data using the "pull down" gesture if the pullRefreshEnabled option is set to true.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
reorderItem(itemElement, toItemElement)
A Promise that is resolved if the item is moved and rejected otherwise. It is a native Promise or a jQuery.Promise when you use jQuery.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- List - Item Reordering API
reorderItem(itemIndex, toItemIndex)
A Promise that is resolved if the item is moved and rejected otherwise. It is a native Promise or a jQuery.Promise when you use jQuery.
If the widget displays a grouped list, the item index should be specified like the following.
{ group: 1, index: 1 }
Where the group property specifies the group index, and the index property specifies the index of the required item within the group.
$("#myList").dxList("instance").reorderItem({ group: 1, index: 4 }, { group: 3, index: 2 });
This code will move the 4th item of the 1st group to the 3rd position in the 3rd group.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- List - Item Reordering API
repaint()
See Also
- reload() in DataSource | List
- refresh() in DataGrid | TreeList
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
resetOption(optionName)
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
scrollBy(distance)
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- List - Scrolling API
scrollHeight()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- List - Scrolling API
scrollTo(location)
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- List - Scrolling API
scrollToItem(itemElement)
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- List - Scrolling API
scrollToItem(itemIndex)
If the widget displays a grouped list, specify the target item index using an object containing the following fields.
group
Specifies the index of the group containing the target item.item
Specifies the item index within the specified group.
var list = $("#myList").dxList("instance"); list.scrollToItem({ group: 3, item: 8 });
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- List - Scrolling API
scrollTop()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- List - Scrolling API
selectAll()
Depending on the value of the selectAllMode option, this method selects all items on all pages or on the currently rendered pages only. If a filter is applied, this method selects only those items that meet the filtering conditions.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
selectItem(itemElement)
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- List - Selection API
selectItem(itemIndex)
Note that the result of the method execution depends on the current value of the selectionMode option that accepts the following values.
none
The method does nothing.single
The method selects the specified item while the previously selected item becomes unselected.multi and all The method adds the specified item to the list of currently selected items.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- List - Selection API
unselectAll()
Depending on the value of the selectAllMode option, this method clears selection of all items on all pages or on the currently rendered pages only. If a filter is applied, this method clears selection only of those items that meet the filtering conditions.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
unselectItem(itemElement)
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- List - Selection API
unselectItem(itemIndex)
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- List - Selection API
updateDimensions()
A Promise that is resolved after the update process is completed. It is a native Promise or a jQuery.Promise when you use jQuery.
Use this method to update the position of list items after the widget element was resized.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
If you have technical questions, please create a support ticket in the DevExpress Support Center.