Data binding in Vue ListView component

19 Feb 202513 minutes to read

The ListView component provides an option to load data either from a local dataSource or remote data services. This can be done through the dataSource property that supports the data type of array or DataManager.

ListView supports different kinds of data services such as OData, OData V4, and Web API, and data formats like XML, JSON, and, JSONP with the help of DataManager Adaptors.

Fields Type Description
id string Specifies ID attribute of list item, mapped in dataSource.
text string Specifies list item display text field.
isChecked string Specifies checked status of list item.
isVisible string Specifies visibility state of list item.
enabled string Specifies enabled state of list item.
iconCss string Specifies the icon class of each list item that will be added before to the list item text.
child string Specifies the field for child dataSource items.
tooltip string Specifies tooltip title text field.
groupBy string Specifies category of each list item.
sortBy string Specifies sorting field, that is used to sort the ListView data.
htmlAttributes string Specifies list item html attributes field.

When complex data is bound to ListView, you should map the fields properly. Otherwise, the ListView properties remain as undefined or null.

Bind to local data

Local data can be represented in two ways, they are as follows:

  • Array of simple data.
  • Array of JSON data.

Array of simple data

ListView supports loading an array of primitive data like string and numbers. Here, both value and text field act as same.

<template>
  <div class="control-section">
    <div id='flat-list'>
      <!-- ListView element -->
      <ejs-listview id='sample-list-flat' :dataSource='arts'></ejs-listview>
    </div>
  </div>
</template>

<script setup>

import { ListViewComponent as EjsListview } from "@syncfusion/ej2-vue-lists";

const arts = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];

</script>
<style>
#sample-list-flat {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin: auto;
}

#flat-list {
  width: 50%;
  padding: 10px;
  margin: auto;
}
</style>
<template>
  <div class="control-section">
    <div id='flat-list'>
      <!-- ListView element -->
      <ejs-listview id='sample-list-flat' :dataSource='arts'></ejs-listview>
    </div>
  </div>
</template>
<script>

import { ListViewComponent } from "@syncfusion/ej2-vue-lists";

export default {
  name: "App",
  components: {
    "ejs-listview": ListViewComponent
  },

  data: function () {
    return {
      arts: ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"]
    };
  }
}
</script>
<style>
#sample-list-flat {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin: auto;
}

#flat-list {
  width: 50%;
  padding: 10px;
  margin: auto;
}
</style>

Array of JSON data

ListView can generate its list items through an array of complex data. To make it work properly, you should map the appropriate columns to the fields property.

In the following example, role column is mapped with the text field.

<template>
  <div class="control-section">
    <div id='flat-list'>
      <!-- ListView element -->
      <ejs-listview id='sample-list-flat' :dataSource='settings' :fields='fields' :headerTitle='headerTitle'
        showHeader='true'></ejs-listview>
    </div>
  </div>
</template>

<script setup>

import { ListViewComponent as EjsListview } from "@syncfusion/ej2-vue-lists";


const settings = [
  {
    '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'
  }
];
const fields = { text: 'Name', tooltip: 'Name', id: 'id' };

//set the header tittle for the list
const headerTitle = 'Device settings';

</script>
<style>
#sample-list-flat {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin: auto;
}

#flat-list {
  width: 50%;
  padding: 10px;
  margin: auto;
}
</style>
<template>
  <div class="control-section">
    <div id='flat-list'>
      <!-- ListView element -->
      <ejs-listview id='sample-list-flat' :dataSource='settings' :fields='fields' :headerTitle='headerTitle'
        showHeader='true'></ejs-listview>
    </div>
  </div>
</template>

<script>

import { ListViewComponent } from "@syncfusion/ej2-vue-lists";

export default {
  name: "App",
  components: {
    "ejs-listview": ListViewComponent
  },

  data: function () {
    return {
      settings: [
        {
          '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'
        }
      ],
      fields: { text: 'Name', tooltip: 'Name', id: 'id' },

      //set the header tittle for the list
      headerTitle: 'Device settings',
    };
  }
}
</script>
<style>
#sample-list-flat {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin: auto;
}

#flat-list {
  width: 50%;
  padding: 10px;
  margin: auto;
}
</style>

Bind to remote data

The ListView supports retrieving data from remote data services with the help of DataManager component. The Query property allows fetching data and returning it to the ListView from the database.

In the following sample, first 10 Employees from the ListView table are displayed.

<template>
  <div class="control-section">
    <div id="flat-list">
      <!-- ListView element -->
      <ejs-listview id='sample-list' :dataSource='data' :query='query' :fields='fields' :headerTitle='headerTitle'
        showHeader='true'></ejs-listview>
    </div>
  </div>
</template>

<script setup>

import { ListViewComponent as EjsListview } from "@syncfusion/ej2-vue-lists";

import { DataManager, Query } from '@syncfusion/ej2-data';


const data = new DataManager({
  url: 'https://services.syncfusion.com/js/production/api/',
  crossDomain: true
});
const query = new Query().from("ListView").select("EmployeeID,FirstName").take(10);
const fields = { id: "EmployeeID", text: "FirstName" };
const headerTitle = 'Employees';

</script>

<style>
#sample-list {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin: auto;
}

#flat-list {
  width: 50%;
  padding: 10px;
  margin: auto;
}
</style>
<template>
  <div class="control-section">
    <div id="flat-list">
      <!-- ListView element -->
      <ejs-listview id='sample-list' :dataSource='data' :query='query' :fields='fields' :headerTitle='headerTitle'
        showHeader='true'></ejs-listview>
    </div>
  </div>
</template>

<script>

import { ListViewComponent } from "@syncfusion/ej2-vue-lists";

import { DataManager, Query } from '@syncfusion/ej2-data';

export default {
  name: "App",
  components: {
    "ejs-listview": ListViewComponent
  },
  data: function () {
    return {
      data: new DataManager({
        url: 'https://services.syncfusion.com/js/production/api/',
        crossDomain: true
      }),
      query: new Query().from("ListView").select("EmployeeID,FirstName").take(10),
      fields: { id: "EmployeeID", text: "FirstName" },
      headerTitle: 'Employees',
    };
  }
}
</script>
<style>
#sample-list {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin: auto;
}

#flat-list {
  width: 50%;
  padding: 10px;
  margin: auto;
}
</style>