JavaScript (ES5)

Search results

ListView

Represents the EJ2 ListView control.

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

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

Properties

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");

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.

     <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");

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)

     <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");

Defaults to ”

dataSource
`{ [key: string]: 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.

     <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");

Defaults to true

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");

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`

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');

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.

     <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");

Defaults to defaultMappedFields

groupTemplate
`string` | `Function`

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

Defaults to null

headerTemplate
`string` | `Function`

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.

     <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');

Defaults to ""

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");

Defaults to ”

htmlAttributes
`{ [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.

     <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");

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.

     <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');

Defaults to null

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");

Defaults to false

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");

Defaults to false

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');

Defaults to false

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');

Defaults to ‘None’

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');

Defaults to null

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");

Defaults to ”

Methods

addEventListener

Adds the handler to the given event listener.

Parameter	Type	Description
eventName	`string`	A String that specifies the name of the event
handler	`Function`	Specifies the call to run when the event occurs.

Returns void

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

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

attachUnloadEvent

Adding unload event to persist data when enable persistence true

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

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

detachUnloadEvent

Removing unload event to persist data when enable persistence true

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

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

getSelectedItems

Gets the details of the currently selected item from the list items.

Returns SelectedItem | SelectedCollection | UISelectedItem | NestedListData

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

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

refresh

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

Returns void

refreshItemHeight

Refresh the height of the list item only on enabling the virtualization property.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter	Type	Description
eventName	`string`	A String that specifies the name of the event to remove
handler	`Function`	Specifies the function to remove

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

render

Initializes the ListView component rendering.

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

unselectItem

This method allows for deselecting a list item within the ListView. The item to be deselected can be specified by passing the element or field object.

Parameter	Type	Description
item (optional)	`Fields` \| `HTMLElement` \| `Element`	We can pass an element Object or Fields as an Object with ID and Text fields.

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter	Type	Description
moduleList	`Function[]`	?

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.

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.

Contents

Properties
animation
checkBoxPosition
cssClass
dataSource
enable
enableHtmlSanitizer
enablePersistence
enableRtl
enableVirtualization
fields
groupTemplate
headerTemplate
headerTitle
height
htmlAttributes
locale
query
showCheckBox
showHeader
showIcon
sortOrder
template
width
Methods
addEventListener
addItem
appendTo
attachUnloadEvent
back
checkAllItems
checkItem
dataBind
destroy
detachUnloadEvent
disableItem
enableItem
findItem
getLocalData
getRootElement
getSelectedItems
handleUnload
hideItem
refresh
refreshItemHeight
removeEventListener
removeItem
removeMultipleItems
render
selectItem
selectMultipleItems
showItem
uncheckAllItems
uncheckItem
unselectItem
Inject
Events
actionBegin
actionComplete
actionFailure
scroll
select

Contents

Properties
animation
checkBoxPosition
cssClass
dataSource
enable
enableHtmlSanitizer
enablePersistence
enableRtl
enableVirtualization
fields
groupTemplate
headerTemplate
headerTitle
height
htmlAttributes
locale
query
showCheckBox
showHeader
showIcon
sortOrder
template
width
Methods
addEventListener
addItem
appendTo
attachUnloadEvent
back
checkAllItems
checkItem
dataBind
destroy
detachUnloadEvent
disableItem
enableItem
findItem
getLocalData
getRootElement
getSelectedItems
handleUnload
hideItem
refresh
refreshItemHeight
removeEventListener
removeItem
removeMultipleItems
render
selectItem
selectMultipleItems
showItem
uncheckAllItems
uncheckItem
unselectItem
Inject
Events
actionBegin
actionComplete
actionFailure
scroll
select

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

ListView

Properties

animation AnimationSettings

checkBoxPosition checkBoxPosition

cssClass string

dataSource { [key: string]: Object }[] | string[] | number[] | DataManager

enable boolean

enableHtmlSanitizer boolean

enablePersistence boolean

enableRtl boolean

enableVirtualization boolean

fields FieldSettingsModel

groupTemplate string | Function

headerTemplate string | Function

headerTitle string

height number | string

htmlAttributes { [key: string]: string }

locale string

query Query

showCheckBox boolean

showHeader boolean

showIcon boolean

sortOrder SortOrder

template string | Function

width number | string

Methods

addEventListener

addItem

appendTo

attachUnloadEvent

back

checkAllItems

checkItem

dataBind

destroy

detachUnloadEvent

disableItem

enableItem

findItem

getLocalData

getRootElement

getSelectedItems

handleUnload

hideItem

refresh

refreshItemHeight

removeEventListener

removeItem

removeMultipleItems

render

selectItem

selectMultipleItems

showItem

uncheckAllItems

uncheckItem

unselectItem

Inject

Events

actionBegin EmitType<any>

actionComplete EmitType<MouseEvent>

actionFailure EmitType<MouseEvent>

scroll EmitType<ScrolledEventArgs>

select EmitType<SelectEventArgs>

animation
`AnimationSettings`

checkBoxPosition
`checkBoxPosition`

cssClass
`string`

dataSource
`{ [key: string]: Object }[]` | `string[]` | `number[]` | `DataManager`

enable
`boolean`

enableHtmlSanitizer
`boolean`

enablePersistence
`boolean`

enableRtl
`boolean`

enableVirtualization
`boolean`

fields
`FieldSettingsModel`

groupTemplate
`string` | `Function`

headerTemplate
`string` | `Function`

headerTitle
`string`

height
`number` | `string`

htmlAttributes
`{ [key: string]: string }`

locale
`string`

query
`Query`

showCheckBox
`boolean`

showHeader
`boolean`

showIcon
`boolean`

sortOrder
`SortOrder`

template
`string` | `Function`

width
`number` | `string`

actionBegin
`EmitType<any>`

actionComplete
`EmitType<MouseEvent>`

actionFailure
`EmitType<MouseEvent>`

scroll
`EmitType<ScrolledEventArgs>`

select
`EmitType<SelectEventArgs>`