This is a migrated thread and some comments may be shown as answers.

Show picture for selected item of a CustomFilter combobox

1 Answer 38 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Blas asked on 09 Jan 2014, 10:58 AM


I have a grid with a customfilter column that lets filter choosing in a combobox that shows images (I'm using sprites, and the image is set through cssclass).

Here is the Custom filter class:

Public Class SeleccionFilteringColumn
        Inherits GridTemplateColumn
        Protected Overrides Sub SetupFilterControls(ByVal cell As TableCell)
            Dim rcBox As New RadComboBox()
            rcBox.Width = 55
            rcBox.ID = "DropDownListSeleccion"
            AddHandler rcBox.ItemCreated, AddressOf rcBox_ItemCreated
            rcBox.AutoPostBack = True
            rcBox.Items.Add(New Telerik.Web.UI.RadComboBoxItem("", -1))
            rcBox.Items.Add(New Telerik.Web.UI.RadComboBoxItem("", 0))
            rcBox.Items.Add(New Telerik.Web.UI.RadComboBoxItem("", 1))
            AddHandler rcBox.SelectedIndexChanged, AddressOf rcBox_SelectedIndexChanged
        End Sub
        Protected Overrides Sub SetCurrentFilterValueToControl(ByVal cell As TableCell)
            If Not (Me.CurrentFilterValue = "") Then
                    DirectCast(cell.Controls(0), RadComboBox).Items.FindItemByValue(Me.CurrentFilterValue).Selected = True
                Catch ex As Exception
                End Try
            End If
        End Sub
        Public Overrides Property Visible As Boolean
                Return MyBase.Visible
            End Get
            Set(value As Boolean)
                MyBase.Visible = value
            End Set
        End Property
        Protected Overrides Function GetCurrentFilterValueFromControl(ByVal cell As TableCell) As String
            Dim currentValue As String = DirectCast(cell.Controls(0), RadComboBox).SelectedItem.Value
            Me.CurrentFilterFunction = If((currentValue <> ""), GridKnownFunction.EqualTo, GridKnownFunction.NoFilter)
            If currentValue = "-1" Then Return Nothing
            Return currentValue
        End Function
        Private Sub rcBox_SelectedIndexChanged(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs)
            DirectCast(DirectCast(sender, RadComboBox).Parent.Parent, GridFilteringItem).FireCommandEvent("Filter", New Pair())
            Select Case e.Value
                Case 0
                    CType(sender, RadComboBox).InputCssClass = "btnNoSeleccionado"
                Case 1
                    CType(sender, RadComboBox).InputCssClass = "btnSeleccionado"
            End Select
        End Sub
        Protected Sub rcBox_ItemCreated(o As Object, e As RadComboBoxItemEventArgs)
            e.Item.Height = 34
            Select Case e.Item.Value
                Case 0
                    e.Item.CssClass = "btnNoSeleccionado"
                Case 1
                    e.Item.CssClass = "btnSeleccionado"
            End Select
        End Sub
    End Class

You can see the filter combobox open in the attached image. How can I do  the selected picture to will be shown in the input combobox? I've tried to assign the InputCssClass in the SelectIndexChanged event but it didn't work.

Thank you


1 Answer, 1 is accepted

Sort by
Angel Petrov
Telerik team
answered on 13 Jan 2014, 07:43 AM
Hello Roberto,

I have already provided a solution in the official support ticket you have opened regarding this matter. In order to help other community members with the implementation I am copying the reply from the official support ticket here:

Indeed such a functionality can be achieved. In order to implement it you can follow the below listed steps:
  1. Subscribe to the client pageLoad
  2. Obtain a reference to the combo
  3. Set a backgroundImage using JavaScript

A sample demonstration of the mentioned is available in the code snippet below.


Copy Code
function pageLoad() {
var combo = $find("RadComboBox");
var inputElement = combo.get_inputDomElement(); = "url('image.png')"; = "no-repeat"; = "left";

Angel Petrov
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Asked by
Top achievements
Rank 1
Answers by
Angel Petrov
Telerik team
Share this question