Blogs

Blogs

DevExpress – Display Icon Within List View Instead of Text

5th March 2015

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;
                }
            }
        }
    }
}
This website uses cookies to provide the best possible experience. By continuing to use our website you are agreeing to our use of cookies.