Image list usually manages related image URLs existing in the same location with a list. It has rootUrl value and can request relative URL except the location in the list or rootUrl when request an individual image.
You can use one image list in several places, and since each use location does not use an absolute image path and image list can approach index, you can manage image path more systematically.
You should register image list as registerImageList first before using it.
grid.registerImageList({
name: 'images01',
rootUrl: '/images/',
items: [
'fr.png',
'br.png',
...
]
});
You can specify image list name in GridHeader.imageList or DataColumn.imageList, and get and render individual image respectively from ColumnHeader.imageIndex and GridStyles.iconIndex.
grid.header().setImageList('image01');
grid.setColumns([
{
header: {
// The second image of image01.
imageIndex: 1,
...
}
},
...
]);
grid.setColumns([
{
imageList: 'images02',
renderer: {
type: 'icon',
// The second image of image02.
iconIndex: 1
}
},
{
imageList: 'images03',
renderer: {
type: 'icon',
// The image registered as 'jp.png' in image03.
iconIndex: 'jp.png'
}
},
...
]);