Show picture for selected item of a CustomFilter combobox

[Blas]

Hello,

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

            cell.Controls.Add(rcBox)
        End Sub

        Protected Overrides Sub SetCurrentFilterValueToControl(ByVal cell As TableCell)
            If Not (Me.CurrentFilterValue = "") Then
                Try
                    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
            Get
                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

Roberto

[Angel Petrov]

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.

JavaScript:

Copy Code

function pageLoad() {

var combo = $find("RadComboBox");
var inputElement = combo.get_inputDomElement();

inputElement.style.backgroundImage = "url('image.png')";
inputElement.style.backgroundRepeat = "no-repeat";
inputElement.style.backgroundPosition = "left";
}

Regards,
Angel Petrov
Telerik