Angular
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

ListViewModel API in Angular ListView API component

Interface for a class ListView

Properties

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.

animation

AnimationSettings

The animation property provides an option to apply the different animations on the ListView component.

    <ejs-listview id='list' [dataSource]='data' [animation]='animation' [showHeader]='true' [headerTitle]='headertitle'></ejs-listview>
import { Component, ViewEncapsulation } from "@angular/core";
import { ListViewComponent } from "@syncfusion/ej2-angular-lists";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {

 public data: 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',
            }]
        }]
   
    }];
    public animation: Object = {ease:"ease", duration:400, effect:"Zoom"}
    public headertitle = 'Continent';
}

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.

    <ejs-listview id='list' [dataSource]='data'  [showCheckBox]='true' [checkBoxPosition]="position"></ejs-listview>
import { Component, ViewEncapsulation } from "@angular/core";
import { ListViewComponent } from "@syncfusion/ej2-angular-lists";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    
     public data: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
     public position: string = "Right";
}

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)

    <ejs-listview id='list' [dataSource]='data'  [cssClass]='class'></ejs-listview>
import { Component, ViewEncapsulation } from "@angular/core";
import { ListViewComponent } from "@syncfusion/ej2-angular-lists";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    
    public data: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
    public class: string = "custom";
}

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.

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.

    <ejs-listview id='list' [dataSource]='data'  [enable]='false'></ejs-listview>
 import { Component, ViewEncapsulation } from "@angular/core";
 import { ListViewComponent } from "@syncfusion/ej2-angular-lists";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    
    public data: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
}

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.

    <ejs-listview id='list' [dataSource]='data'  [enableHtmlSanitizer]='true'></ejs-listview>
 import { Component, ViewEncapsulation } from "@angular/core";
 import { ListViewComponent } from "@syncfusion/ej2-angular-lists";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {    
    public data: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
}

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

enableRtl

boolean

Enable or disable rendering component in right to left direction.

enableVirtualization

boolean

If enableVirtualization set to true, which will increase the ListView performance, while loading a large amount of data.

    <ejs-listview id='list' [dataSource]='listData' [enableVirtualization]='true'></ejs-listview>
 import { Component, ViewEncapsulation } from "@angular/core";
 import { ListViewComponent,VirtualizationService } from "@syncfusion/ej2-angular-lists"; /*Import Virtualization service*/

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  providers: [VirtualizationService],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {    
   public listData: { [key: string]: string | object }[] = [
        { 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' }
    ];

    public ngOnInit() {
        for (let i: number = 10; i <= 1010; i++) {
            let index: number = parseInt((Math.random() * 10).toString());
            this.listData.push({ text: this.listData[index].text, id: i.toString() });
        }
    }
}

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.

   <ejs-listview id='list' [dataSource]='listData' [fields]='fields' ></ejs-listview>
 import { Component, ViewEncapsulation } from "@angular/core";
 import { ListViewComponent } from "@syncfusion/ej2-angular-lists";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {    
     public listData: 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'
    }
    ];
public fields : Object ={ groupBy: 'category', tooltip: 'text' , text:'text', id:'id', enabled:'enabled',isVisible:'visible', isChecked:'check', iconCss:'Icon'}
}

groupTemplate

string | object

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

headerTemplate

string | object

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

headerTitle

string

The headerTitle is used to set the title of the ListView component.

    <ejs-listview id='list' [dataSource]='data' showHeader='true' [headerTitle]='title'></ejs-listview>
 import { Component, ViewEncapsulation } from "@angular/core";
 import { ListViewComponent } from "@syncfusion/ej2-angular-lists";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {    
    public data: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
    public title: string = "List of Arts";
}

height

number | string

Defines the height of the ListView component which accepts both string and number values.

     <ejs-listview id='list' [dataSource]='data' height=200>
     </ejs-listview>
  import { Component, ViewEncapsulation } from "@angular/core";
  import { ListViewComponent } from "@syncfusion/ej2-angular-lists";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {    
    public data: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
    public title: string = "List of Arts";
}

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.

     <ejs-listview id='list' [dataSource]='data' [htmlAttributes]="attributes">
     </ejs-listview>
  import { Component, ViewEncapsulation } from "@angular/core";
  import { ListViewComponent } from "@syncfusion/ej2-angular-lists";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {    
    public data: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
    public attributes:object = {style : "border: 1px solid black"};
}

locale

string

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

query

Query

The query is used to fetch the specific data from dataSource by using where and select keywords.

    <ejs-listview id='list' [dataSource]='data' [query]='query' [fields]='fields' [showHeader]='true' [headerTitle]='headertitle'></ejs-listview>
  import { Component, ViewEncapsulation } from "@angular/core";
  import { ListViewComponent } from "@syncfusion/ej2-angular-lists";
  import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data'; /* Import datamanager and query*/

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {    
   public data: Object = new DataManager({
        url: '//js.syncfusion.com/ejServices/Wcf/Northwind.svc/',
        crossDomain: true
    });
    public query = new Query().from('Products').select('ProductID,ProductName').take(6);
    public fields: Object = { id: 'ProductID', text: 'ProductName'  };
    public headertitle = 'Product Name';
}

showCheckBox

boolean

If showCheckBox set to true, which will show or hide the checkbox.

    <ejs-listview id='list' [dataSource]='data' [showCheckBox]='true'>
    </ejs-listview>
 import { Component, ViewEncapsulation } from "@angular/core";
 import { ListViewComponent } from "@syncfusion/ej2-angular-lists";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {    
     public data: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
}

showHeader

boolean

If showHeader set to true, which will show or hide the header of the ListView component.

    <ejs-listview id='list' [dataSource]='data' showHeader='true' [headerTitle]='title'></ejs-listview>
 import { Component, ViewEncapsulation } from "@angular/core";
 import { ListViewComponent } from "@syncfusion/ej2-angular-lists";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {    
    public data: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
    public title: string = "List of Items";
}

showIcon

boolean

If showIcon set to true, which will show or hide the icon of the list item.

    <ejs-listview id='list' [dataSource]='data' [fields]='fields' [showIcon]="true">
  </ejs-listview>
 import { Component, ViewEncapsulation } from "@angular/core";
 import { ListViewComponent } from "@syncfusion/ej2-angular-lists";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {    
   public data: Object = [{
        'Name': 'Music',
        'id': 'list-01',
        'icon':'folder'
    },
    {
        'Name': 'Videos',
        'id': 'list-02',
        'icon':'folder'
    },
    {
        'Name': 'Documents',
        'id': 'list-03',
        'icon': 'folder'
    }];
    public fields: object = { text: 'Name', tooltip: 'Name', id:'id',iconCss:'icon'}
}

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.
     <ejs-listview id='list' [dataSource]='data' [fields]='fields' [sortOrder]="order">
     </ejs-listview>
 import { Component, ViewEncapsulation } from "@angular/core";
 import { ListViewComponent } from "@syncfusion/ej2-angular-lists";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {    
  public data: 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'
    }];
    public fields: object = { text: 'Name', tooltip: 'Name', id:'id', sortBy:"Name"};
    public order :string = "Descending";
}

template

string | object

The ListView component supports to customize the content of each list items with the help of template property.

    <ejs-listview id='list' [dataSource]='data' headerTitle='Contacts' cssClass='e-list-template' [showHeader]='true'>
            <ng-template #template let-data="">
                <div class="e-list-wrapper e-list-multi-line e-list-avatar">
                    <span class="e-avatar e-avatar-circle" *ngIf="data.avatar !== ''">{{data.avatar}}</span>
                    <span class="{{data.pic}} e-avatar e-avatar-circle" *ngIf="data.pic !== '' "> </span>
                    <span class="e-list-item-header">{{data.text}}</span>
                    <span class="e-list-content">{{data.contact}}</span>
                </div>
            </ng-template>
        </ejs-listview>
 import { Component, ViewEncapsulation } from "@angular/core";
 import { ListViewComponent } from "@syncfusion/ej2-angular-lists";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {    
    public data: { [key: string]: Object; }[] = [
  { text: "Amenda", contact: "(206) 555-3412", id: "2", avatar: "A", pic: "" },
  {
    text: "William ",
    contact: "(206) 555-9482",
    id: "5",
    avatar: "W",
    pic: ""
  },
  {
    text: "Jacob",
    contact: "(71) 555-4848",
    id: "6",
    avatar: "",
    pic: "pic04"
  },
  { text: "Matthew", contact: "(71) 555-7773", id: "7", avatar: "M", pic: "" },
  {
    text: "Charlotte",
    contact: "(206) 555-1189",
    id: "9",
    avatar: "C",
    pic: ""
  }
];
}

width

number | string

Defines the width of the ListView component which accepts both string and number values.

     <ejs-listview id='list' [dataSource]='data' width=300>
     </ejs-listview>
  import { Component, ViewEncapsulation } from "@angular/core";
  import { ListViewComponent } from "@syncfusion/ej2-angular-lists";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {    
    public data: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
}
Previous
Next