The ListView widget builds interactive ListView interface. This control allows you to select an item from a list-like interface and display a set of data items in different layouts or views. Lists are used for displaying data, data navigation, result lists, and data entry.

• module:jQuery

• module: JsRender

• module:ej.core

• module:ej.unobtrusive

• module:ej.data

• module:ej.touch

• module:ej.checkbox

• module:ej.scroller

• module:ej.listview

{:#members:ajaxsettings}

Specifies the ajaxSettings option to load the items to the ListView control.

• null

{% highlight html %}

 <ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" [width]="width"> </ej-listview>

{% endhighlight %}

{% highlight ts %}

    listdata: any;
    width: number;
    fieldsdata: object;
    ajaxSettings:object;
    constructor() {
        this.listdata =
        [{ Texts: 'Discover Music' },
            { Texts: 'Sales and Events' },
            { Texts: 'Categories' },
            { Texts: 'MP3 Albums' },
            { Texts: 'More in Music' }];
        this.fieldsdata = { 'text': 'Texts' };
        this.width = 400;
        this.ajaxSettings={ type: 'GET', cache: false, data: {}, dataType: "html", contentType: "html", async: true }
    }

{% endhighlight %}

{:#members:ajaxsettings-async}

It specifies, whether to enable or disable asynchronous request.

{:#members:ajaxsettings-cache}

It specifies the page will be cached in the web browser.

{:#members:ajaxsettings-contenttype}

It specifies the type of data is send in the query string.

{:#members:ajaxsettings-data}

It specifies the data as an object, will be passed in the query string.

{:#members:ajaxsettings-datatype}

It specifies the type of data that you're expecting back from the response.

{:#members:ajaxsettings-type}

It specifies the HTTP request type.

{:#members:checkedindices}

Set the index values to be selected on initial loading. This works only when enableCheckMark is set true.

• []

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" [width]="width" [enableCheckMark]="enableCheckMark" [checkedIndices]="checkedIndices"> </ej-listview>

{% endhighlight %}

{% highlight ts %}

    listdata: any;
    width: Number;
    fieldsdata: Object;
    enableCheckMark:boolean;
    checkedIndices:Array<any>;
    constructor() {
        this.listdata =
        [{ Texts: 'Discover Music' },
            { Texts: 'Sales and Events' },
            { Texts: 'Categories' },
            { Texts: 'MP3 Albums' },
            { Texts: 'More in Music' }];
        this.fieldsdata = { 'text': 'Texts' };
        this.width = 400;
        this.enableCheckMark=true;
        this.checkedIndices=[2,3];
    }

{% endhighlight %}

{:#members:cssclass}

Sets the root class for ListView theme. This cssClass API helps to use custom skinning option for ListView control. By defining the root class using this API, we need to include this root class in CSS.

• ""

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" [cssClass]="cssClass"> </ej-listview>

{% endhighlight %}

{% highlight ts %}

    listdata: any;
    width: Number;
    fieldsdata: Object;
    cssClass:string;
    constructor() {
        this.listdata =
        [{ Texts: 'Discover Music' },
            { Texts: 'Sales and Events' },
            { Texts: 'Categories' },
            { Texts: 'MP3 Albums' },
            { Texts: 'More in Music' }];
        this.fieldsdata = { 'text': 'Texts' };
        this.width = 400;
        this.cssClass="custom-class";
    }

{% endhighlight %}

{:#members:datasource}

Contains the list of data for generating the ListView items.

• []

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" > </ej-listview>

{% endhighlight %}

{% highlight ts %}

    listdata: any;
    width: Number;
    fieldsdata: Object;
    constructor() {
        this.listdata =
        [{ Texts: 'Discover Music' },
            { Texts: 'Sales and Events' },
            { Texts: 'Categories' },
            { Texts: 'MP3 Albums' },
            { Texts: 'More in Music' }];
        this.fieldsdata = { 'text': 'Texts' };
    }

{% endhighlight %}

{:#members:enableajax}

Specifies whether to load AJAX content while selecting item.

• false

{% highlight html %}

<ej-listview id="defaultlistbox" [showHeader]="true" headerTitle="Favorite" [width]="width" [enableAjax]="enableAjax" >

{% endhighlight %}

{% highlight ts %}

enableAjax:boolean;

constructor() {

this.enableAjax=true;

}

{% endhighlight %}

{:#members:enablecache}

Specifies whether to enable caching the content.

• false

{% highlight html %}

    <ej-listview id="defaultlistbox" [showHeader]="true" headerTitle="Favorite" [width]="width" [enableAjax]="enableAjax" [enableCache]="enableCache" >
        <ul>
            <li data-ej-text="Hot Singles" data-ej-href="load1.html"></li>
            <li data-ej-text="Rising Artists" data-ej-href="load2.html"></li>
            <li data-ej-text="Live Music" data-ej-href="load3.html"></li>
        </ul>
    </ej-listview>

{% endhighlight %}

{% highlight ts %}

    enableCache:boolean;
    enableAjax:boolean;
    constructor() {
        this.enableAjax=true;
        this.enableCache=true;
    }

{% endhighlight %}

{:#members:enablecheckmark}

Specifies whether to enable check mark for the item.

• false

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" [enableCheckMark]="enableCheckMark" >

{% endhighlight %}

{% highlight ts %}

    listdata: any;
    fieldsdata: Object;
    enableCheckMark:boolean;
    constructor() {
        this.listdata =
        [{ Texts: 'Discover Music' },
            { Texts: 'Sales and Events' },
            { Texts: 'Categories' },
            { Texts: 'MP3 Albums' },
            { Texts: 'More in Music' }];
        this.fieldsdata = { 'text': 'Texts' };
        this.enableCheckMark=true;
    }

{% endhighlight %}

{:#members:enablefiltering}

Specifies whether to enable the filtering feature to filter the item.

• false

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" [enableFiltering]="enableFiltering" >

{% endhighlight %}

{% highlight ts %}

    listdata: any;
    fieldsdata: Object;
    enableFiltering:boolean;
    constructor() {
        this.listdata =
        [{ Texts: 'Discover Music' },
            { Texts: 'Sales and Events' },
            { Texts: 'Categories' },
            { Texts: 'MP3 Albums' },
            { Texts: 'More in Music' }];
        this.fieldsdata = { 'text': 'Texts' };
        this.enableFiltering=true;
        }

{% endhighlight %}

{:#members:enablegrouplist}

Specifies whether to group the list item.

• false

{% highlight html %}

<ej-listview id="databindinglocal" [enableGroupList]="enableGroupList">

{% endhighlight %}

{% highlight ts %}

enableGroupList:boolean;
constructor() {
    this.enableGroupList=true;
}

{% endhighlight %}

{:#members:enablepersistence}

Specifies to maintain the current model value to browser cookies for state maintenance. While refresh the page, the model value will get apply to the control from browser cookies.

• false

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" [enablePersistence]="enablePersistence"> </ej-listview>

{% endhighlight %}

{% highlight ts %}

listdata: any;
fieldsdata: Object;
enablePersistence:boolean;
constructor() {
    this.listdata =
       [{ Texts: 'Discover Music' },
        { Texts: 'Sales and Events' },
        { Texts: 'Categories' },
        { Texts: 'MP3 Albums' },
        { Texts: 'More in Music' }];
    this.fieldsdata = { 'text': 'Texts' };
    this.enablePersistence=true;
}

{% endhighlight %}

{:#members:fieldsettings}

Specifies the field settings to map the datasource.

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata">

{% endhighlight %}

{% highlight ts %}

    listdata: any;
    fieldsdata: Object;
    constructor() {
        this.listdata =
        [{ Texts: 'Discover Music' },
            { Texts: 'Sales and Events' },
            { Texts: 'Categories' },
            { Texts: 'MP3 Albums' },
            { Texts: 'More in Music' }];
        this.fieldsdata = { 'text': 'Texts' };
    }

{% endhighlight %}

{:#members:fieldsettings-checked}

Defines the specific field name which contains Boolean values to specify whether the list items to be checked by default or not.

{:#members:fieldsettings-navigateurl}

Defines the URL to be navigated while clicking the list item.

{:#members:fieldsettings-attributes}

Defines the HTML attributes such as id, class, styles for the specific list item.

{:#members:fieldsettings-id}

Defines the specific field name which contains id values for the list items.

{:#members:fieldsettings-imageurl}

Defines the URL for the image to be displayed in the list item.

{:#members:fieldsettings-imageclass}

Defines the class name for image in that specific list items.

{:#members:fieldsettings-preventselection}

Specifies whether to prevent the selection of the list item.

{:#members:fieldsettings-persistselection}

Specifies whether to retain the selection of the list item.

{:#members:fieldsettings-primarykey}

To define the first level of list items.

{:#members:fieldsettings-parentprimarykey}

To define the child level of list items inside the parent items.

{:#members:fields-text}

Defines the specific field name in the data source to load the list with data.

{:#members:fields-mouseup}

To trigger the mouseup event for specific list items.

{:#members:fields-mousedown}

To trigger the mousedown event for specific list items.

{:#members:items}

Contains the array of items to be added in ListView.

• []

{% highlight html %}

<ej-listview id="databindinglocal" [items]="items">

{% endhighlight %}

{% highlight ts %}

    items:any;
    constructor() {
        items:any;
    constructor() {
        this.items =
        [   { "text": "Hot Singles"},
        { "text": "Rising Artists"},
        { "text": "Live Music" },
        { "text": "Best of 2013 So Far"},
        { "text": "100 Albums - $5 Each"},
        { "text": "Hip-Hop and R&B Sale"},
        { "text": "CD Deals"}];
    }

{% endhighlight %}

{:#members:headerbackbuttontext}

Specifies the text of the back button in the header.

• null

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" [showHeader]="showHeader" [showHeaderBackButton]="showHeaderBackButton" [headerBackButtonText]="headerBackButtonText" >

{% endhighlight %}

{% highlight ts %}

    listdata: any;
        showHeader: boolean;
        showHeaderBackButton:boolean;
        headerBackButtonText:string;
        fieldsdata: Object;
        constructor() {
            this.listdata =
            [{ Texts: 'Discover Music' },
                { Texts: 'Sales and Events' },
                { Texts: 'Categories' },
                { Texts: 'MP3 Albums' },
                { Texts: 'More in Music' }];
            this.fieldsdata = { 'text': 'Texts' };
            this.showHeader=true;
            this.showHeaderBackButton=true;
            this.headerBackButtonText= "Back";
        }

{% endhighlight %}

{:#members:headertitle}

Specifies the title of the header.

• Title

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" [showHeader]="showHeader" [headerTitle]="headerTitle" > </ej-listview>

{% endhighlight %}

{% highlight ts %}

    listdata: any;
    showHeader: boolean;
    headerTitle:string;
    fieldsdata: Object;
    constructor() {
        this.listdata =
        [{ Texts: 'Discover Music' },
            { Texts: 'Sales and Events' },
            { Texts: 'Categories' },
            { Texts: 'MP3 Albums' },
            { Texts: 'More in Music' }];
        this.fieldsdata = { 'text': 'Texts' };
        this.showHeader=true;
        this.headerTitle="Title1";
             }

{% endhighlight %}

{:#members:height}

Specifies the height.

• null

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" [height]="height">

{% endhighlight %}

{% highlight ts %} listdata: any; height:any; fieldsdata: Object; constructor() { this.listdata = [{ Texts: 'Discover Music' }, { Texts: 'Sales and Events' }, { Texts: 'Categories' }, { Texts: 'MP3 Albums' }, { Texts: 'More in Music' }]; this.fieldsdata = { 'text': 'Texts' }; this.height=300; }

{% endhighlight %}

{:#members:locale}

Set the localization culture for ListView Widget.

Default Value: {:.param} “en-US”

Example {:.example}

{:#members:persistselection}

Specifies whether to retain the selection of the item.

• false

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" [persistSelection]="persistSelection" >

{% endhighlight %}

{% highlight ts %}

    listdata: any;
    persistSelection: boolean;
    fieldsdata: Object;
    constructor() {
        this.listdata =
        [{ Texts: 'Discover Music' },
            { Texts: 'Sales and Events' },
            { Texts: 'Categories' },
            { Texts: 'MP3 Albums' },
            { Texts: 'More in Music' }];
        this.fieldsdata = { 'text': 'Texts' };
        this.persistSelection=true;
    }

{% endhighlight %}

{:#members:preventselection}

Specifies whether to prevent the selection of the item.

• false

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" [preventSelection]="persistSelection" >

{% endhighlight %}

{% highlight ts %}

listdata: any;
preventSelection: boolean;
fieldsdata: Object;
constructor() {
    this.listdata =
       [{ Texts: 'Discover Music' },
        { Texts: 'Sales and Events' },
        { Texts: 'Categories' },
        { Texts: 'MP3 Albums' },
        { Texts: 'More in Music' }];
    this.fieldsdata = { 'text': 'Texts' };
    this.preventSelection=true;
}

{% endhighlight %}

{:#members:query}

Specifies the query to execute with the datasource.

• null

{% highlight html %}

<ej-listview [dataSource]="dataManger" [fieldSettings]="fieldsdata" [width]="width" [height]="height" [allowVirtualScrolling]="true" [virtualScrollMode]="VirtualMode" [query]="query" [itemRequestCount]="requestCount">

{% endhighlight %}

{% highlight ts %}

dataManger: any;
width: any;
fieldsdata: any;
query: any;
requestCount:any;
height:any;
VirtualMode:any;

    constructor() {

    this.dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/', crossDomain: true });
   this.query = ej.Query().from('Customers');
   this.fieldsdata = { text: 'CustomerID' };
   this.width = 50; 
   this.height=200;
   this.requestCount=8;
   this.VirtualMode=ej.VirtualScrollMode.Continuous
           

     }

{% endhighlight %}

{:#members:rendertemplate}

Specifies whether need to render the control with the template contents.

• false

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

constructor() {
    
}

{% endhighlight %}

{:#members:selecteditemindex}

Specifies the index of item which need to be in selected state initially while loading.

• 0

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" [selectedItemIndex]="selectedItemIndex" >

{% endhighlight %}

{% highlight ts %}

listdata: any;
fieldsdata: Object;
selectedItemIndex:number;
constructor() {
    this.listdata =
       [{ Texts: 'Discover Music' },
        { Texts: 'Sales and Events' },
        { Texts: 'Categories' },
        { Texts: 'MP3 Albums' },
        { Texts: 'More in Music' }];
    this.fieldsdata = { 'text': 'Texts' };
    this.selectedItemIndex = 2;
}

{% endhighlight %}

{:#members:showheader}

Specifies whether to show the header.

• true

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" [showHeader]="showHeader" >

{% endhighlight %}

{% highlight ts %} listdata: any; showHeader: boolean; fieldsdata: Object; constructor() { this.listdata = [{ Texts: 'Discover Music' }, { Texts: 'Sales and Events' }, { Texts: 'Categories' }, { Texts: 'MP3 Albums' }, { Texts: 'More in Music' }]; this.fieldsdata = { 'text': 'Texts' }; this.showHeader=true; }

{% endhighlight %}

{:#members:showheaderbackbutton}

Specifies whether to show the back button header.

• false

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" [showHeader]="showHeader" [showHeaderBackButton]="showHeaderBackButton" >

{% endhighlight %}

{% highlight ts %}

listdata: any;
showHeader: boolean;
showHeaderBackButton:boolean;
headerBackButtonText:string;
fieldsdata: Object;
constructor() {
    this.listdata =
       [{ Texts: 'Discover Music' },
        { Texts: 'Sales and Events' },
        { Texts: 'Categories' },
        { Texts: 'MP3 Albums' },
        { Texts: 'More in Music' }];
    this.fieldsdata = { 'text': 'Texts' };
    this.showHeader=true;
    this.showHeaderBackButton=true;
     }

{% endhighlight %}

{:#members:templateid}

Specifies ID of the element contains template contents.

• null

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

constructor() {
    
}

{% endhighlight %}

{:#members:width}

Specifies the width.

• null

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" [width]="width">

{% endhighlight %}

{% highlight ts %} listdata: any; width:any; fieldsdata: Object; constructor() { this.listdata = [{ Texts: 'Discover Music' }, { Texts: 'Sales and Events' }, { Texts: 'Categories' }, { Texts: 'MP3 Albums' }, { Texts: 'More in Music' }]; this.fieldsdata = { 'text': 'Texts' }; this.width=220; }

{% endhighlight %}

{:#members:itemrequestcount}

Specifies the number of items to be fetched on each scroll. Note: This property works only with Virtual scrolling.

• 5

{% highlight html %}

<ej-listview [dataSource]="dataManger" [fieldSettings]="fieldsdata" [width]="width" [height]="height" [allowVirtualScrolling]="true" [virtualScrollMode]="VirtualMode" [query]="query" [itemRequestCount]="requestCount">
            </ej-listview>

{% endhighlight %}

{% highlight ts %}

    dataManger: any;
    width: any;
    fieldsdata: any;
    query: any;
    requestCount:any;
    height:any;
    VirtualMode:any;
    
    constructor() {
    
        this.dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/', crossDomain: true });
      this.query = ej.Query().from('Customers');
      this.fieldsdata = { text: 'CustomerID' };
      this.width = 50; 
      this.height=200;
      this.requestCount=8;
      this.VirtualMode=ej.VirtualScrollMode.Continuous
              
    
        }

{% endhighlight %}

{% highlight javascript %}

// Set itemRequestCount on initialization. //To set itemRequestCount API value

var musicFields = {
        text: "CustomerID"
    };
var dataManger = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc"
        });
// Query creation
var query = ej.Query().from("Customers");

$("#defaultListBox").ejListView ({ itemRequestCount: 5,dataSource: dataManger, query: query, fieldSettings: musicFields,height:300,allowVirtualScrolling: true, virtualScrollMode: "normal"});

{% endhighlight %}

{:#members:totalitemscount}

Specifies the maximum number of items to be fetched. Note: This will work only with Virtual scrolling

• null

{% highlight html %}

<ej-listview [dataSource]="dataManger" [fieldSettings]="fieldsdata" [width]="width" [height]="height" [allowVirtualScrolling]="true" [virtualScrollMode]="VirtualMode" [query]="query" [itemRequestCount]="requestCount" [totalItemsCount]="totalItemsCount">

{% endhighlight %}

{% highlight ts %}

dataManger: any;
width: any;
fieldsdata: any;
query: any;
requestCount:any;
height:any;
VirtualMode:any;
totalItemsCount:number;

constructor() {

    this.dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/', crossDomain: true });
   this.query = ej.Query().from('Customers');
   this.fieldsdata = { text: 'CustomerID' };
   this.width = 50; 
   this.height=200;
   this.requestCount=8;
   this.totalItemsCount=100;
   this.VirtualMode=ej.VirtualScrollMode.Continuous
           

 }

{% endhighlight %}

{% highlight javascript %} // Set totalItemsCount on initialization. //To set totalItemsCount API value var musicFields = { text: "CustomerID" }; var dataManger = ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc" }); // Query creation var query = ej.Query().from("Customers");

$("#defaultListBox").ejListView ({ totalItemsCount: 100,dataSource: dataManger, query: query, fieldSettings: musicFields,height:300,allowVirtualScrolling: true, virtualScrollMode: "normal"});

{% endhighlight %}

{:#members:allowvirtualscrolling}

Loads the list data on demand via scrolling behavior to improve the application’s performance. There are two ways to load data which can be defined using virtualScrollMode property.

• false

Example {:.example}

{% highlight javascript %} // Set allowVirtualScrolling on initialization. //To set allowVirtualScrolling API value var musicFields = { text: "CustomerID" }; var dataManger = ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc" }); // Query creation var query = ej.Query().from("Customers");

$("#defaultListBox").ejListView ({ dataSource: dataManger, query: query, fieldSettings: musicFields,height:300,allowVirtualScrolling: true, virtualScrollMode: "normal"});

{% endhighlight %}

{:#members:virtualscrollmode}

Specifies the virtual scroll mode to load the list data on demand via scrolling behavior. There are two types of mode.

• ej.VirtualScrollMode.Normal

Example {:.example}

{% highlight javascript %} // Set VirtualScrollMode on initialization. //To set VirtualScrollMode API value var musicFields = { text: "CustomerID" }; var dataManger = ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc" }); // Query creation var query = ej.Query().from("Customers");

$("#defaultListBox").ejListView ({ dataSource: dataManger, query: query, fieldSettings: musicFields,height:300,allowVirtualScrolling: true, virtualScrollMode: "normal"});

{% endhighlight %}

{:#methods:additem}

To add item in the given index. If you have enabled grouping in ListView then you need to pass the corresponding group list title to add item in it. Depending on the data bound to ListView, we need to pass either an HTML element or JSON objects in this method.

Passing the element

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.addItem();

{% endhighlight %}

Passing Array of JSON objects

{:#methods:checkallitem}

To check all the items.

N> Need to enable enableCheckMark property to check all items in the ListView control.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.checkAllItem();

{% endhighlight %}

{:#methods:checkitem}

To check item in the given index.

N> Need to enable enableCheckMark property to check item in the ListView control.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.checkItem(2);

{% endhighlight %}

{:#methods:clear}

To clear all the list item in the control before updating with new datasource.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.clear();

{% endhighlight %}

{:#methods:deactive}

To make the item in the given index to be default state.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.deActive(2);

{% endhighlight %}

{:#methods:disableitem}

To disable item in the given index.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.disableItem(3);

{% endhighlight %}

{:#methods:enableitem}

To enable item in the given index.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.enableItem(2);

{% endhighlight %}

{:#methods:getactiveitem}

To get the active item.

{:#methods:returns:}

element

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.getActiveItem();

{% endhighlight %}

{:#methods:getactiveitemtext}

To get the text of the active item.

{:#methods:returns:}

string

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.getActiveItemText();

{% endhighlight %}

{:#methods:getcheckeditems}

To get all the checked items.

{:#methods:returns:}

array

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.getCheckedItems();

{% endhighlight %}

{:#methods:getcheckeditemstext}

To get the text of all the checked items.

{:#methods:returns:}

array

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.getCheckedItemsText();

{% endhighlight %}

{:#methods:getitemscount}

To get the total item count.

{:#methods:returns:}

number

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.getItemsCount();

{% endhighlight %}

{:#methods:getitemtext}

To get the text of the item in the given index.

{:#methods:returns:}

string

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.getItemText(3);

{% endhighlight %}

{:#methods:haschild}

To check whether the item in the given index has child item.

{:#methods:returns:}

boolean

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.hasChild(2);

{% endhighlight %}

{:#methods:hide}

To hide the list.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.hide();

{% endhighlight %}

{:#methods:hideitem}

To hide item in the given index.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.hideItem(2);

{% endhighlight %}

{:#methods:ischecked}

To check whether item in the given index is checked.

{:#methods:returns:}

boolean

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.isChecked(4);

{% endhighlight %}

{:#methods:loadajaxcontent}

To load the AJAX content while selecting the item.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.loadAjaxContent("load1.html");

{% endhighlight %}

{:#methods:removecheckmark}

To remove the check mark either for specific item in the given index or for all items.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.removeCheckMark(2);

{% endhighlight %}

{:#methods:removeitem}

To remove item in the given index.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.removeItem(2);

{% endhighlight %}

{:#methods:selectitem}

To select item in the given index.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.selectItem(2);

{% endhighlight %}

{:#methods:setactive}

To make the item in the given index to be active state.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.setActive(3);

{% endhighlight %}

{:#methods:show}

To show the list.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.show();

{% endhighlight %}

{:#methods:showitem}

To show item in the given index.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.showItem(2);

{% endhighlight %}

{:#methods:uncheckallitem}

To uncheck all the items.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.unCheckAllItem();

{% endhighlight %}

{:#methods:uncheckitem}

To uncheck item in the given index.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

let lvObj = $('#defaultlist').data('ejListView');
lvObj.unCheckItem(5);

{% endhighlight %}

{:#events:ajaxbeforeload}

Event triggers before the AJAX request happens.

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" (ajaxBeforeLoad)="ajaxBeforeLoad(args)" >

{% endhighlight %}

{% highlight ts %}

listdata: any;
fieldsdata: Object;
constructor() {
    this.listdata =
       [{ Texts: 'Discover Music' },
        { Texts: 'Sales and Events' },
        { Texts: 'Categories' },
        { Texts: 'MP3 Albums' },
        { Texts: 'More in Music' }];
    this.fieldsdata = { 'text': 'Texts' };
}
ajaxBeforeLoad(args){

    //  your code here
}

{% endhighlight %}

{:#events:ajaxcomplete}

Event triggers after the AJAX content loaded completely.

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" (ajaxComplete)="ajaxComplete(args)" >

{% endhighlight %}

{% highlight ts %}

listdata: any;
fieldsdata: Object;
constructor() {
    this.listdata =
       [{ Texts: 'Discover Music' },
        { Texts: 'Sales and Events' },
        { Texts: 'Categories' },
        { Texts: 'MP3 Albums' },
        { Texts: 'More in Music' }];
    this.fieldsdata = { 'text': 'Texts' };
}
ajaxComplete(args){

    //  your code here
}

{% endhighlight %}

{:#events:ajaxerror}

Event triggers when the AJAX request failed.

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" (ajaxError)="ajaxError(args)" >

{% endhighlight %}

{% highlight ts %}

listdata: any;
width: Number;
fieldsdata: Object;
constructor() {
    this.listdata =
       [{ Texts: 'Discover Music' },
        { Texts: 'Sales and Events' },
        { Texts: 'Categories' },
        { Texts: 'MP3 Albums' },
        { Texts: 'More in Music' }];
    this.fieldsdata = { 'text': 'Texts' };
}
ajaxError(args){

    //  your code here
}

{% endhighlight %}

{:#events:ajaxsuccess}

Event triggers after the AJAX content loaded successfully.

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" (ajaxSuccess)="ajaxSuccess(args)" >

{% endhighlight %}

{% highlight ts %}

listdata: any;
fieldsdata: Object;
constructor() {
    this.listdata =
       [{ Texts: 'Discover Music' },
        { Texts: 'Sales and Events' },
        { Texts: 'Categories' },
        { Texts: 'MP3 Albums' },
        { Texts: 'More in Music' }];
    this.fieldsdata = { 'text': 'Texts' };
}
ajaxSuccess(args){

    //  your code here
}

{% endhighlight %}

{:#events:load}

Event triggers before the items loaded.

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" (load)="load(args)" >

{% endhighlight %}

{% highlight ts %}

listdata: any;
fieldsdata: Object;
constructor() {
    this.listdata =
       [{ Texts: 'Discover Music' },
        { Texts: 'Sales and Events' },
        { Texts: 'Categories' },
        { Texts: 'MP3 Albums' },
        { Texts: 'More in Music' }];
    this.fieldsdata = { 'text': 'Texts' };
}
load(args){

    //  your code here
}

{% endhighlight %}

{:#events:loadcomplete}

Event triggers after the items loaded.

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" (loadComplete)="loadComplete(args)" >

{% endhighlight %}

{% highlight ts %}

listdata: any;
fieldsdata: Object;
constructor() {
    this.listdata =
       [{ Texts: 'Discover Music' },
        { Texts: 'Sales and Events' },
        { Texts: 'Categories' },
        { Texts: 'MP3 Albums' },
        { Texts: 'More in Music' }];
    this.fieldsdata = { 'text': 'Texts' };
}
loadComplete(args){

    //  your code here
}

{% endhighlight %}

{:#events:mousedown}

Event triggers when mouse down happens on the item.

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" (mouseDown)="mouseDown(args)" > </ej-listview>

{% endhighlight %}

{% highlight ts %}

    listdata: any;
    fieldsdata: Object;
    constructor() {
        this.listdata =
        [{ Texts: 'Discover Music' },
            { Texts: 'Sales and Events' },
            { Texts: 'Categories' },
            { Texts: 'MP3 Albums' },
            { Texts: 'More in Music' }];
        this.fieldsdata = { 'text': 'Texts' };
    }
    mouseDown(args){

        //  your code here
    }

{% endhighlight %}

{:#events:mouseup}

Event triggers when mouse up happens on the item.

{% highlight html %}

<ej-listview id="databindinglocal" [dataSource]="listdata" [fieldSettings]="fieldsdata" (mouseUp)="mouseUp(args)" > </ej-listview>

{% endhighlight %}

{% highlight ts %}

    listdata: any;
    fieldsdata: Object;
    constructor() {
        this.listdata =
        [{ Texts: 'Discover Music' },
            { Texts: 'Sales and Events' },
            { Texts: 'Categories' },
            { Texts: 'MP3 Albums' },
            { Texts: 'More in Music' }];
        this.fieldsdata = { 'text': 'Texts' };
    }
    mouseUp(args){

        //  your code here
    }

{% endhighlight %}