ListBox - Text with Icons

16x16 icons
  • Ajax
  • Calendar
  • Chart
  • ColorPicker
  • Combobox
  • Dock
  • Editor
  • FormDecorator
  • Grid
  • Input
  • Menu
  • PanelBar
  • Scheduler
  • Slider
  • Spell
  • Splitter
  • TabStrip
  • Toolbar
  • ToolTip
  • Treeview
  • Upload
  • Window
26x26 icons
  • Ajax
  • Calendar
  • Chart
  • ColorPicker
  • ComboBox
  • Dock
  • Editor
  • FileExplorer
  • FormDecorator
  • Grid
  • Input
  • ListBox
  • PanelBar
  • Rotator
  • Scheduler
  • Slider
  • Spell
  • Splitter
  • TabStrip
  • ToolBar
  • ToolTip
  • TreeView
  • Upload
  • Window
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

With RadListBox you can display images inside the items, in front of the item's text.

You can use the ImageUrl property to determine the image to be displayed and the DisabledImageUrl to change the image when the item is disabled.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ListBox.Examples.Functionality.TextWithIcons.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" href="styles.css" type="text/css"/>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container size-thin">
            <div class="title">
                16x16 icons</div>
            <telerik:RadListBox RenderMode="Lightweight" ID="RadListBox1" runat="server" Height="190px" Width="300px">
            </telerik:RadListBox>
        </div>
        <div class="demo-container size-thin">
            <div class="title">
                26x26 icons</div>
            <telerik:RadListBox RenderMode="Lightweight" ID="RadListBox2" runat="server" Height="190px" Width="300px">
            </telerik:RadListBox>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?