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

Show picture for selected item of a CustomFilter combobox

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

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













1 Answer, 1 is accepted

Sort by
0
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.

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
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.
Tags
Grid
Asked by
Blas
Top achievements
Rank 1
Answers by
Angel Petrov
Telerik team
Share this question
or