5th March 2015

DevExpress – Display Icon Within List View Instead of Text

DevExpress – Display Icon Within List View Instead of Text

To make list views more aesthetically pleasing and easier for users to be able to distinguish between values within certain columns in list views we decided to display icons within the status and type columns for an object instead of their plain text value.

The icons are setup against each status or type record as an image field along with the name of the status and type. When in detail view the user can select the relevant status and type using the name of the record in lookup list views, however in list views instead of the name being displayed a distinguishable icon will be used so users can quickly distinguish between different status and types, it also means that the column sizes can be smaller so that more columns can be displayed within the list view.

The code below demonstrates how to implement the above functionality, it is written in a view controller within the main Module project.

using System.Drawing;
using DevExpress.Data.Filtering;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Win.Editors;
using DevExpress.XtraGrid.Views.Base;
using DevExpress.XtraGrid.Views.Grid;
 
/// <summary>
/// List View Controller
/// </summary>
public partial class ListViewController : ViewController

/// <summary> /// Initializes a new instance of the <see cref="ListViewController"/> class. /// </summary> public ListViewController()

this.InitializeComponent(); this.RegisterActions(this.components); this.TargetObjectType = typeof(Object); this.TargetViewType = ViewType.ListView;

/// <summary> /// Called when [view controls created]. /// </summary> protected override void OnViewControlsCreated()

base.OnViewControlsCreated(); GridListEditor listEditor = ((ListView)View).Editor as GridListEditor; if (listEditor != null)

GridView gridView = listEditor.GridView; gridView.CustomDrawCell += this.CustomiseListView_CustomDrawCell;

/// <summary> /// Handles the CustomDrawCell event of the CustomiseListView_CustomDrawCell control. /// </summary> /// <param name="sender">The source of the event.</param> /// <param name="e">The <see cref="RowCellCustomDrawEventArgs"/> instance containing the event data.</param> private void CustomiseListView_CustomDrawCell(object sender, RowCellCustomDrawEventArgs e)

if (e.Column.FieldName == "CoulumnNameHere")

if (e.CellValue != null)

ColumnObject columnObject = this.ObjectSpace.FindObject<ColumnObject>(CriteriaOperator.Parse("ObjectName == ?", e.CellValue.ToString())); if (columnObject != null)

Point point = new Point(); point.Y = e.Bounds.Location.Y + 2; point.X = e.Bounds.Location.X + 30; e.Graphics.DrawImage(columnObject.Icon, point); e.Handled = true;

Fill in this quick form and discover your digital future
Choose your interests:

Where to find us

We'd love to welcome you into our office! We're only 20 miles north of Peterborough, conveniently just off the A16.

Carver House
Apex Court, Elsoms Way
Pinchbeck
Lincolnshire
PE11 3UL