ejListView

17 Oct 201724 minutes to read

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.

Example

Requires

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

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

Default Value

• null

Example

HTML

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

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

ajaxSettings.async boolean

It specifies, whether to enable or disable asynchronous request.

ajaxSettings.cache boolean

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

ajaxSettings.contentType string

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

ajaxSettings.data Object

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

ajaxSettings.dataType string

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

ajaxSettings.type string

It specifies the HTTP request type.

checkedIndices Array

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

Default Value

• []

Example

HTML

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

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];
        }

cssClass string

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.

Default Value

• ””

Example

HTML

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

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

dataSource Array

Contains the list of data for generating the ListView items.

Default Value

• []

Example

HTML

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

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

enableAjax boolean

Specifies whether to load AJAX content while selecting item.

Default Value

• false

Example

HTML

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


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

TS

enableAjax:boolean;

constructor() {


this.enableAjax=true;

}

enableCache boolean

Specifies whether to enable caching the content.

Default Value

• false

Example

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>

TS

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

enableCheckMark boolean

Specifies whether to enable check mark for the item.

Default Value

• false

Example

HTML

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

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

enableFiltering boolean

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

Default Value

• false

Example

HTML

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

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

enableGroupList boolean

Specifies whether to group the list item.

Default Value

• false

Example

HTML

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





<ul data-ej-grouplisttitle="Network">








 <li data-ej-text="Airplane Mode"></li>








 <li data-ej-text="Wi-Fi"></li>








 <li data-ej-text="Notifications"></li>








 <li data-ej-text="Location Services"></li>




 </ul>




 <ul data-ej-grouplisttitle="Apps">








 <li data-ej-text="Sound"></li>








 <li data-ej-text="Brightness"></li>








 <li data-ej-text="Wallpaper"></li>




 </ul>




 </ej-listview>

TS

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

enablePersistence boolean

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.

Default Value

• false

Example

HTML

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

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

fieldSettings Object

Specifies the field settings to map the datasource.

Example

HTML

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

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

fieldSettings.checked boolean

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

fieldSettings.navigateUrl string

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

fieldSettings.attributes Object

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

fieldSettings.id string

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

fieldSettings.imageUrl string

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

fieldSettings.imageClass string

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

fieldSettings.preventSelection boolean

Specifies whether to prevent the selection of the list item.

fieldSettings.persistSelection boolean

Specifies whether to retain the selection of the list item.

fieldSettings.primaryKey string

To define the first level of list items.

fieldSettings.parentPrimaryKey string

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

fieldSettings.text string

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

fieldSettings.mouseUP string

To trigger the mouseup event for specific list items.

fieldSettings.mouseDown string

To trigger the mousedown event for specific list items.

items Array

Contains the array of items to be added in ListView.

Default Value

• []

Example

HTML

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

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"}];
        }

headerBackButtonText string

Specifies the text of the back button in the header.

Default Value

• null

Example

HTML

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

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

headerTitle string

Specifies the title of the header.

Default Value

• Title

Example

HTML

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

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

height string number

Specifies the height.

Default Value

• null

Example

HTML

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

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

locale string

Set the localization culture for ListView Widget.

Default Value:

“en-US”

Example

persistSelection boolean

Specifies whether to retain the selection of the item.

Default Value

• false

Example

HTML

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

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

preventSelection boolean

Specifies whether to prevent the selection of the item.

Default Value

• false

Example

HTML

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

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

query Object

Specifies the query to execute with the datasource.

Default Value

• null

Example

HTML

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

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
               
    
         }

renderTemplate boolean

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

Default Value

• false

Example

HTML

<ej-listview id="databindinglocal"> 
                <ul id="dd">
                        <li data-ej-rendertemplate=true data-ej-templateid="target1"></li>
                        <li data-ej-rendertemplate=true data-ej-templateid="target2"></li>
                        <li data-ej-rendertemplate=true data-ej-templateid="target3"></li>
                </ul>
                <div id="target1">
                         Template1 </div>
                <div id="target2">
                        <div> Template2 </div>
                </div>
                <div id="target3">
                        <div> Template3 </div>
                </div>   
                 </ej-listview>

TS

constructor() {
        
    }

selectedItemIndex number

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

Default Value

• 0

Example

HTML

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

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

showHeader boolean

Specifies whether to show the header.

Default Value

• true

Example

HTML

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

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

showHeaderBackButton boolean

Specifies whether to show the back button header.

Default Value

• false

Example

HTML

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

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

templateId string

Specifies ID of the element contains template contents.

Default Value

• null

Example

HTML

<ej-listview id="databindinglocal"> 
                <ul id="dd">
                        <li data-ej-rendertemplate=true data-ej-templateid="target1"></li>
                        <li data-ej-rendertemplate=true data-ej-templateid="target2"></li>
                        <li data-ej-rendertemplate=true data-ej-templateid="target3"></li>
                </ul>
                <div id="target1">
                         Template1 </div>
                <div id="target2">
                        <div> Template2 </div>
                </div>
                <div id="target3">
                        <div> Template3 </div>
                </div>   
                 </ej-listview>

TS

constructor() {
        
    }

width string number

Specifies the width.

Default Value

• null

Example

HTML

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

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

itemRequestCount number

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

Default Value

• 5

Example

HTML

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

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
                  
        
            }

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

totalItemsCount number

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

Default Value

• null

Example

HTML

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

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
               
    
     }

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

allowVirtualScrolling boolean

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.

Default Value:

• false

Example

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

virtualScrollMode enum

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

Name	Description
continuous	Each time when we scroll to the end of the Listview widget, the other set of list items will get loaded.
normal	This mode allows you to load the list view data while scrolling i.e. each time the scroll bar is scrolled, it will send request to the server to load the data.

Default Value:

• ej.VirtualScrollMode.Normal

Example

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

Methods

addItem(item, index,groupid)

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

Name	Type	Description
item	string | Object	To pass the list item as element/ JSON object
index	number	Specifies the index where item to be added
groupid	string	optionalThis is an optional parameter. You must pass the group list title here if grouping is enabled in the ListView

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

Passing Array of JSON objects

Name	Type	Description
item	Array	To pass the array of JSON objects to be added in ListView
index	number	Specifies the index where item to be added
groupid	string	optionalThis is an optional parameter. You must pass the group list title here if grouping is enabled in the ListView

Example

checkAllItem()

To check all the items.

NOTE

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

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

checkItem(index)

To check item in the given index.

NOTE

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

Name	Type	Description
index	number	Specifies the index of the item to be checked

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

clear()

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

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

deActive(index)

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

Name	Type	Description
index	number	Specifies the index to make the item to be in default state.

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

disableItem(index)

To disable item in the given index.

Name	Type	Description
index	number	Specifies the index value to be disabled.

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

enableItem(index)

To enable item in the given index.

Name	Type	Description
index	number	Specifies the index value to be enabled.

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

getActiveItem()

To get the active item.

Returns:

element

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

getActiveItemText()

To get the text of the active item.

Returns:

string

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

getCheckedItems()

To get all the checked items.

Returns:

array

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

getCheckedItemsText()

To get the text of all the checked items.

Returns:

array

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

getItemsCount()

To get the total item count.

Returns:

number

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

getItemText(index)

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

Name	Type	Description
index	string|number	Specifies the index value to get the text value.

Returns:

string

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

hasChild(index)

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

Name	Type	Description
index	number	Specifies the index value to check the item has child or not.

Returns:

boolean

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

hide()

To hide the list.

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

hideItem(index)

To hide item in the given index.

Name	Type	Description
index	number	Specifies the index value to hide the item.

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

isChecked(index)

To check whether item in the given index is checked.

Returns:

boolean

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

loadAjaxContent(item)

To load the AJAX content while selecting the item.

Name	Type	Description
item	string	Specifies the item to load the AJAX content.

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

removeCheckMark(index)

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

Name	Type	Description
index	number	Specifies the index value to remove the checkbox.

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

removeItem(index)

To remove item in the given index.

Name	Type	Description
index	number	Specifies the index value to remove the item.

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

selectItem(index)

To select item in the given index.

Name	Type	Description
index	number	Specifies the index value to select the item.

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

setActive(index)

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

Name	Type	Description
index	number	Specifies the index value to make the item in active state.

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

show()

To show the list.

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

showItem(index)

To show item in the given index.

Name	Type	Description
index	number	Specifies the index value to show the hided item.

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

unCheckAllItem()

To uncheck all the items.

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

unCheckItem(index)

To uncheck item in the given index.

Name	Type	Description
index	number	Specifies the index value to uncheck the item.

Example

HTML

<ej-listview id="defaultlist"> </ej-listview>

TS

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

Events

ajaxBeforeLoad

Event triggers before the AJAX request happens.

Name	Type	Description
argument	Object	Event parameters from ListView. Name Type Description cancel boolean returns true if the event should be canceled; otherwise, false. type string returns the name of the event. model Object returns the model value of the control. ajaxData Object returns the AJAX settings.

Example

HTML

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

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
    }

ajaxComplete

Event triggers after the AJAX content loaded completely.

Name	Type	Description
argument	Object	Event parameters from ListView. Name Type Description cancel boolean returns true if the event should be canceled; otherwise, false. type string returns the name of the event. model Object returns the model value of the control.

Example

HTML

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

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
    }

ajaxError

Event triggers when the AJAX request failed.

Name	Type	Description
argument	Object	Event parameters from ListView. Name Type Description cancel boolean returns true if the event should be canceled; otherwise, false. type string returns the name of the event. model Object returns the model value of the control. errorThrown Object returns the error thrown in the AJAX post. textStatus Object returns the status. item Object returns the current list item. text string returns the current item text. index number returns the current item index.

Example

HTML

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

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
    }

ajaxSuccess

Event triggers after the AJAX content loaded successfully.

Name	Type	Description
argument	Object	Event parameters from ListView. Name Type Description cancel boolean returns true if the event should be canceled; otherwise, false. type string returns the name of the event. model Object returns the model value of the control. content string returns the AJAX current content. item Object returns the current list item. text string returns the current item text. index number returns the current item index. URL string returns the current URL of the AJAX post.

Example

HTML

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

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
    }

load

Event triggers before the items loaded.

Name	Type	Description
argument	Object	Event parameters from ListView. Name Type Description cancel boolean returns true if the event should be canceled; otherwise, false. type string returns the name of the event. model Object returns the model value of the control.

Example

HTML

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

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
    }

loadComplete

Event triggers after the items loaded.

Name	Type	Description
argument	Object	Event parameters from ListView. Name Type Description cancel boolean returns true if the event should be canceled; otherwise, false. type string returns the name of the event. model Object returns the model value of the control.

Example

HTML

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

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
    }

mouseDown

Event triggers when mouse down happens on the item.

Name	Type	Description
argument	Object	Event parameters from ListView. Name Type Description cancel boolean returns true if the event should be canceled; otherwise, false. type string returns the name of the event. model Object returns the model value of the control. hasChild boolean If the child element exist return true; otherwise, false. item string returns the current list item. text string returns the current text of item. index number returns the current Index of the item. isChecked boolean If checked return true; otherwise, false. checkedItems number returns the list of checked items. checkedItemsText string returns the current checked item text.

Example

HTML

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

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
        }

mouseUp

Event triggers when mouse up happens on the item.

Name	Type	Description
argument	Object	Event parameters from ListView. Name Type Description cancel boolean returns true if the event should be canceled; otherwise, false. type string returns the name of the event. model Object returns the model value of the control. hasChild boolean If the child element exist return true; otherwise, false. item string returns the current list item. text string returns the current text of item. index number returns the current Index of the item. isChecked boolean If checked return true; otherwise, false. checkedItems number returns the list of checked items. checkedItemsText string returns the current checked item text.

Example

HTML

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

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
        }