JavaScript/jQuery 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.
jQuery
JavaScript
const fruits = [
{ text: "Apples", badge: 10 },
{ text: "Oranges", badge: 12, disabled: true },
{ text: "Lemons", badge: 15, visible: false }
];
$(function() {
$("#listContainer").dxList({
dataSource: fruits
});
});Angular
TypeScript
HTML
import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
fruits = [
{ text: "Apples", badge: 10 },
{ text: "Oranges", badge: 12, disabled: true },
{ text: "Lemons", badge: 15, visible: false }
];
}
@NgModule({
imports: [
// ...
DxListModule
],
// ...
})
<dx-list
[dataSource]="fruits">
</dx-list>Vue
App.vue
<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>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import List from 'devextreme-react/list';
const fruits = [
{ text: "Apples", badge: 10 },
{ text: "Oranges", badge: 12, disabled: true },
{ text: "Lemons", badge: 15, visible: false }
];
export default function App() {
return (
<List
dataSource={fruits}
/>
);
}If you need a more flexible solution, define an itemTemplate.
jQuery
JavaScript
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)
)
}
});
});Angular
HTML
TypeScript
<dx-list
[dataSource]="fruits"
itemTemplate="listItem">
<div *dxTemplate="let item of 'listItem'">
<b>{{item.name}}</b><br />
<p style="margin:0px">{{item.count}}</p>
</div>
</dx-list>
import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
fruits = [
{ name: "Apples", count: 10 },
{ name: "Oranges", count: 12 },
{ name: "Lemons", count: 15 },
{ name: "Pears", count: 20 },
{ name: "Pineapples", count: 3 }
];
}
@NgModule({
imports: [
// ...
DxListModule
],
// ...
})Vue
App.vue
<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>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import List from 'devextreme-react/list';
const fruits = [
{ name: "Apples", count: 10 },
{ name: "Oranges", count: 12 },
{ name: "Lemons", count: 15 },
{ name: "Pears", count: 20 },
{ name: "Pineapples", count: 3 }
];
const ListItem = (data) => {
return (
<div>
<b>{ data.name }</b>
<br />
<p style={{ margin: '0px' }}>{ data.count }</p>
</div>
);
};
export default function App() {
return (
<List
dataSource={fruits}
itemRender={ListItem}
/>
);
}jQuery
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.
HTML
JavaScript
<script id="individualTemplate" type="text/html">
<!-- ... -->
</script>
const fruits = [
{ name: "Apples", count: 10 },
{ name: "Oranges", count: 12, template: $("#individualTemplate") },
// ...
];Built-In Template Engine Demo 3rd-Party Template Engine Demo
See Also
Feedback