Vue

Search results

ListViewModel API in Vue 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.

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.

      <div id='list'></div>

    import {ListView} from '@syncfusion/ej2-lists';    
    let continent: { [key: string]: Object }[] = [
    {
        'text': 'Asia',
        'id': '01',
        'category': 'Continent',
        'child': [{
            'text': 'India',
            'id': '1',
            'category': 'Asia',
            'child': [{
                'text': 'Delhi',
                'id': '1001',
                'category': 'India',
            },
            {
                'text': 'Kashmir',
                'id': '1002',
                'category': 'India',
            }
            ]
        },
        {
            'text': 'China',
            'id': '2',
            'category': 'Asia',
            'child': [{
                'text': 'Zhejiang',
                'id': '2001',
                'category': 'China',
            },
            {
                'text': 'Shandong',
                'id': '2003',
                'category': 'China',
            }]
        }]
    },

    {
        'text': 'North America',
        'id': '02',
        'category': 'Continent',
        'child': [{
            'text': 'USA',
            'id': '3',
            'category': 'North America',
            'child': [{
                'text': 'California',
                'id': '3001',
                'category': 'USA',
            },
            {
                'text': 'New York',
                'id': '3002',
                'category': 'USA',
            }]
        },
        {
            'text': 'Canada',
            'id': '4',
            'category': 'North America',
            'child': [{
                'text': 'Ontario',
                'id': '4001',
                'category': 'Canada',
            },
            {
                'text': 'Alberta',
                'id': '4002',
                'category': 'Canada',
            },
            {
                'text': 'Manitoba',
                'id': '4003',
                'category': 'Canada',
            }]
        }]
    },
    {
        'text': 'Australia',
        'id': '04',
        'category': 'Continent',
        'child': [{
            'text': 'Australia',
            'id': '7',
            'category': 'Australia',
            'child': [{
                'text': 'Sydney',
                'id': '7001',
                'category': 'Australia',
            },
            {
                'text': 'Melbourne',
                'id': '7002',
                'category': 'Australia',
            },
            {
                'text': 'Brisbane',
                'id': '7003',
                'category': 'Australia',
            }]
        }]
   
    }
];

//Initialize ListView control
let listviewObject: ListView = new ListView({
    //set the data to datasource property
    dataSource: continent,
    // map the  fields 
    fields: { tooltip: 'text' , groupBy:'category',text:'text',id:'id'},
    headerTitle: 'Continent',
    showHeader: true,
    animation : {effect: 'Zoom', duration: 300, easing: 'ease'  }
});

//Render initialized ListView
listviewObject.appendTo("#list");

checkBoxPosition
`checkBoxPosition`

The checkBoxPosition is used to set the position of check box in a list item. By default, the checkBoxPosition is Left, which will appear before the text content in a list item.

     <div id='list'></div>

  import {ListView} from '@syncfusion/ej2-lists';
  let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];

//Initialize ListView control
let listviewObject: ListView = new ListView({
    //set the data to datasource property
    dataSource: arts,
    showCheckBox:true,
    checkBoxPosition: "Right"
});

//Render initialized ListView
listviewObject.appendTo("#list");

cssClass
`string`

The cssClass property is used to add a user-preferred class name in the root element of the ListView, using which we can customize the component (both CSS and functionality customization)

     <div id='list'></div>
     <style>
      .custom
       {
        font-style: italic;
       }
    </style>

  import {ListView} from '@syncfusion/ej2-lists';
  let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];

//Initialize ListView control
let listviewObject: ListView = new ListView({
    //set the data to datasource property
    dataSource: arts,
    cssClass: "custom"
});

//Render initialized ListView
listviewObject.appendTo("#list");

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

     <div id='list'></div>

  import {ListView} from '@syncfusion/ej2-lists';
  let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];

//Initialize ListView control
let listviewObject: ListView = new ListView({
    //set the data to datasource property
    dataSource: arts,
    enable: false
});

//Render initialized ListView
listviewObject.appendTo("#list");

enableHtmlSanitizer
`boolean`

If enableHtmlSanitizer set to true, allows the cross-scripting site.

     <div id='list'></div>

  import {ListView} from '@syncfusion/ej2-lists';
  let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];

//Initialize ListView control
let listviewObject: ListView = new ListView({
    //set the data to datasource property
    dataSource: arts,
    enableHtmlSanitizer: true
});

//Render initialized ListView
listviewObject.appendTo("#list");

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.

     <div id='list'></div>

import { ListView, Virtualization } from '@syncfusion/ej2-lists';

ListView.Inject(Virtualization);/*Inject Virtualization*/

let listData: { [key: string]: string | object }[] = [];

listData = [
    { text: 'Nancy', id: '0', },
    { text: 'Andrew', id: '1' },
    { text: 'Janet', id: '2' },
    { text: 'Margaret', id: '3' },
    { text: 'Steven', id: '4' },
    { text: 'Laura', id: '5' },
    { text: 'Robert', id: '6' },
    { text: 'Michael', id: '7' },
    { text: 'Albert', id: '8' },
    { text: 'Nolan', id: '9' }
];

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

let listviewObject: ListView = new ListView({

    //Set defined data to dataSource property.
    dataSource: listData,
    //Set height
    height: 500,
    //enable UI virtualization
    enableVirtualization: true,
});
    //Render initialized ListView component
    listviewObject.appendTo('#list');

fields
`FieldSettingsModel`

The fields is used to map keys from the dataSource which extracts the appropriate data from the dataSource with specified mapped with the column fields to render the ListView.

     <div id='list'></div>

   import {ListView} from '@syncfusion/ej2-lists';
   let cars: { [key: string]: Object }[] = [
    {
        'text': 'Audi A4',
        'id': '9bdb',
        'enabled':true,
        'Icon': "file",
        'check':true,
        'visible':true,
        'category': 'Audi'
    },
    {
        'text': 'Audi A5',
        'id': '4589',
        'Icon': "file",
        'enabled':'true',
         'check':false,
        'category': 'Audi'
    },
    {
        'text': 'Audi A6',
        'id': 'e807',
        'Icon': "file",
        'enabled':'false',
        'check':false,
        'visible':true,
        'category': 'Audi'
    },
    {
        'text': 'BMW 501',
        'id': 'f849',
        'enabled':true,
        'Icon': "file",
        'visible':true,
        'check':true,
        'category': 'BMW'
    },
    {
        'text': 'BMW 502',
        'id': '7aff',
        'Icon': "file",
        'enabled':false,
        'check':false,
        'visible':true,
        'category': 'BMW'
    },
    {
        'text': 'BMW 503',
        'id': 'b1da',
        'Icon': "file",
        'enabled':true,
        'visible':false,
        'check':false,
        'category': 'BMW'
    }
];

//Initialize ListView control
let listviewObject: ListView = new ListView({
    //set the data to datasource property
    dataSource: cars,
    // map the fields with corresponding value
    fields: { groupBy: 'category', tooltip: 'text' , text:'text', id:'id', enabled:'enabled',isVisible:'visible', isChecked:'check', iconCss:'Icon'},
    showCheckBox:true,
    showIcon:true
});

//Render initialized ListView
listviewObject.appendTo("#list");

groupTemplate
`string`

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

headerTemplate
`string`

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.

     <div id='list'></div>

 import { ListView } from '@syncfusion/ej2-lists';
   let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];

    // Initialize the ListView control
    let listviewObject: ListView = new ListView({
        //Set the defined data to the data source property
       dataSource: arts,
       showHeader: true,
       headerTitle: "List of Items"

    });

    //Render the initialized ListView control
    listviewObject.appendTo('#List');

height
`number` | `string`

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

     <div id='list'></div>

  import {ListView} from '@syncfusion/ej2-lists';
  let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];

//Initialize ListView control
let listviewObject: ListView = new ListView({
    //set the data to datasource property
    dataSource: arts,
    height:200
});

//Render initialized ListView
listviewObject.appendTo("#list");

htmlAttributes
`Object`

The htmlAttributes allows additional attributes such as id, class, etc., and accepts n number of attributes in a key-value pair format.

     <div id='list'></div>

  import {ListView} from '@syncfusion/ej2-lists';
  let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];

//Initialize ListView control
let listviewObject: ListView = new ListView({
    //set the data to datasource property
    dataSource: arts,
     htmlAttributes:{style: "border: 1px solid black"}
});

//Render initialized ListView
listviewObject.appendTo("#list");

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.

     <div id='list'></div>

  import {ListView} from '@syncfusion/ej2-lists';
  import { DataManager, Query } from '@syncfusion/ej2-data'; /* Import datamanager and query*/

//Initialize ListView control

let listviewObject: ListView = new ListView({
    //bind the DataManager instance to dataSource property
    dataSource: new DataManager({
        url: '//js.syncfusion.com/ejServices/Wcf/Northwind.svc/',
        crossDomain: true
    }),

    //bind the Query instance to query property
    query: new Query().from('Products').select('ProductID,ProductName').take(6),

    //map the appropriate columns to fields property
    fields: { id: 'ProductID', text: 'ProductName' },

});
    //Render the initialized ListView control
    listviewObject.appendTo('#List');

showCheckBox
`boolean`

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

     <div id='list'></div>

  import {ListView} from '@syncfusion/ej2-lists';
  let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];

//Initialize ListView control
let listviewObject: ListView = new ListView({
    //set the data to datasource property
    dataSource: arts,
    showCheckBox:true
});

//Render initialized ListView
listviewObject.appendTo("#list");

showHeader
`boolean`

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

     <div id='list'></div>

  import {ListView} from '@syncfusion/ej2-lists';
  let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];

//Initialize ListView control
let listviewObject: ListView = new ListView({
    //set the data to datasource property
    dataSource: arts,
    showHeader:true,
    headerTitle:"List of Arts"
});

//Render initialized ListView
listviewObject.appendTo("#list");

showIcon
`boolean`

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

     <div id='list'></div>
     <style>
      .e-listview .e-list-icon {
        height: 24px;
        width: 30px;
      }
      .folder {
        background-repeat: no-repeat;
        background-image: url("css/listview/images/file_icons.png");
        background-position: -5px -466px;
        background-size: 302%;
      }
  </style>

  import { ListView } from '@syncfusion/ej2-lists';
   let settings: { [key: string]: Object }[] = [
    {
        'Name': 'Music',
        'id': 'list-01',
        'icon':'folder'
    },
    {
        'Name': 'Videos',
        'id': 'list-02',
        'icon':'folder'
    },
    {
        'Name': 'Documents',
        'id': 'list-03',
        'icon': 'folder'
    }
];
//Initialize ListView control
let listviewObject: ListView = new ListView({
    //set the data to datasource property
    dataSource: settings,
    //map the appropriate columns to fields property
     fields: { text: 'Name', tooltip: 'Name', id:'id',iconCss:'icon'},
     showIcon: true
    
});
    //Render the initialized ListView control
    listviewObject.appendTo('#List');

sortOrder
`SortOrder`

The sortOrder is used to sort the data source. The available type of sort orders are,

None - The data source is not sorting.
Ascending - The data source is sorting with ascending order.
Descending - The data source is sorting with descending order.
```
 <div id='list'></div>
```

 import { ListView } from '@syncfusion/ej2-lists';
   let settings: { [key: string]: Object }[] = [
    {
        'Name': 'Display',
        'id': 'list-01'
    },
    {
        'Name': 'Notification',
        'id': 'list-02'
    },
    {
        'Name': 'Sound',
        'id': 'list-03'
    },
    {
        'Name': 'Apps',
        'id': 'list-04'
    },
    {
        'Name': 'Storage',
        'id': 'list-05'
    },
    {
        'Name': 'Battery',
        'id': 'list-06'
    }
];
//Initialize ListView control
let listviewObject: ListView = new ListView({
    //set the data to datasource property
    dataSource: settings,
    //map the appropriate columns to fields property
     fields: { text: 'Name', tooltip: 'Name', id:'id', sortBy:"Name"},
     sortOrder:"Descending"

});
    //Render the initialized ListView control
    listviewObject.appendTo('#List');

template
`string`

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

     <div id='list'></div>

  import { ListView } from '@syncfusion/ej2-lists';
    let template: string = '<div class="e-list-wrapper e-list-multi-line e-list-avatar">' +
    '<img class="e-avatar e-avatar-circle" src=${image} style="background:#BCBCBC" />' +
    '<span class="e-list-item-header">${Name}</span>' +
    '<span class="e-list-content">${contact}</span>' +
    '</div>';

    //Define an array of JSON data
    let dataSource = [
        { Name: 'Nancy', contact:'(206) 555-985774', id: '1', image: 'https://ej2.syncfusion.com/demos/src/grid/images/1.png',  category: 'Experience'},
        { Name: 'Andrew ', contact:'(206) 555-9482', id: '5', image: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', category: 'Experience'},
        { Name: 'Steven', contact:'(71) 555-4848', id: '6', image: 'https://ej2.syncfusion.com/demos/src/grid/images/5.png', category: 'Fresher' },
        { Name: 'Robert', contact:'(71) 555-5598', id: '8', image: 'https://ej2.syncfusion.com/demos/src/grid/images/7.png', category: 'Fresher' }
    ];

    // Initialize the ListView control
    let listviewObject: ListView = new ListView({

        //Set the defined data to the data source property
        dataSource: dataSource,
        //Map the appropriate columns to the fields property
        fields: { text: 'Name'},

        //set cssClass for template customization
        cssClass: 'e-list-template',

        //Set the customized template
        template: template

    });

    //Render the initialized ListView control
    listviewObject.appendTo('#List');

width
`number` | `string`

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

     <div id='list'></div>

  import {ListView} from '@syncfusion/ej2-lists';
  let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];

//Initialize ListView control
let listviewObject: ListView = new ListView({
    //set the data to datasource property
    dataSource: arts,
    width:250
});

//Render initialized ListView
listviewObject.appendTo("#list");

Please provide additional information

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

ListViewModel API in Vue ListView API component

Properties

actionBegin EmitType<any>

actionComplete EmitType<MouseEvent>

actionFailure EmitType<MouseEvent>

select EmitType<SelectEventArgs>

animation AnimationSettings

checkBoxPosition checkBoxPosition

cssClass string

dataSource Object[] | string[] | number[] | DataManager

enable boolean

enableHtmlSanitizer boolean

enablePersistence boolean

enableRtl boolean

enableVirtualization boolean

fields FieldSettingsModel

groupTemplate string

headerTemplate string

headerTitle string

height number | string

htmlAttributes Object

locale string

query Query

showCheckBox boolean

showHeader boolean

showIcon boolean

sortOrder SortOrder

template string

width number | string