Vue List - Customize Item Appearance
For a minor customization of List items, you can define specific fields in item data objects. For example, the following code generates three items: each item has a badge, the second is disabled and the third is hidden.
- <template>
- <DxList
- :data-source="fruits"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxList from 'devextreme-vue/list';
- const fruits = [
- { text: "Apples", badge: 10 },
- { text: "Oranges", badge: 12, disabled: true },
- { text: "Lemons", badge: 15, visible: false }
- ];
- export default {
- components: {
- DxList
- },
- data() {
- return {
- fruits
- }
- }
- }
- </script>
If you need a more flexible solution, define an itemTemplate. In Angular and Vue, you can declare it in the markup. In React, you can use a rendering function (shown in the code below) or component:
- <template>
- <DxList
- :data-source="fruits"
- item-template="list-item">
- <template #list-item="{ data }">
- <div>
- <b>{{ data.name }}</b>
- <br />
- <p style="margin:0px">{{ data.count }}</p>
- </div>
- </template>
- </DxList>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxList from 'devextreme-vue/list';
- const fruits = [
- { name: "Apples", count: 10 },
- { name: "Oranges", count: 12 },
- { name: "Lemons", count: 15 },
- { name: "Pears", count: 20 },
- { name: "Pineapples", count: 3 }
- ];
- export default {
- components: {
- DxList
- },
- data() {
- return {
- fruits
- }
- }
- }
- </script>
If you use jQuery alone, use DOM manipulation methods to combine the HTML markup for items. To apply this markup, use the itemTemplate callback function as shown in the following code.
- const fruits = [
- { name: "Apples", count: 10 },
- { name: "Oranges", count: 12 },
- { name: "Lemons", count: 15 },
- { name: "Pears", count: 20 },
- { name: "Pineapples", count: 3 }
- ];
- $(function() {
- $("#listContainer").dxList({
- dataSource: fruits,
- itemTemplate: function(data, _, element) {
- element.append(
- $("<b>").text(data.fruit), $("<br />"),
- $("<p>").text(data.count).css("margin", 0)
- )
- }
- });
- });
You can also customize an individual List item. For this purpose, declare a template for this item as a script and pass its id
to the template field.
- <script id="individualTemplate" type="text/html">
- <!-- ... -->
- </script>
- const fruits = [
- { name: "Apples", count: 10 },
- { name: "Oranges", count: 12, template: $("#individualTemplate") },
- // ...
- ];
In addition, you can use a 3rd-party template engine to perform the needed customizations. For more information, see the 3rd-Party Template Engines article.
Built-In Template Engine Demo 3rd-Party Template Engine Demo
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.