Show Selected Image in input

[Alan T]

Hi i'm looking at the following entry on the code library.

http://www.telerik.com/community/code-library/aspnet-ajax/combobox/show-the-selected-item-image-in-input.aspx

I'm sure i'm very close to getting this to work. My combobox causes a postback.

When this function runs

                function showImageOnSelectedItemChanging(sender, eventArgs) {
                    var input = sender.get_inputDomElement();
                    input.style.background = "url(" + eventArgs.get_item().get_imageUrl() + ") no-repeat";
                }

it seems to set the image correctly. But after the postback is complete

                function showFirstItemImage(sender) {
                    var input = sender.get_inputDomElement();
                    alert(input);
                    alert(sender.get_items().getItem(0).get_imageUrl());
                    input.style.background = "url(" + sender.get_items().getItem(0).get_imageUrl() + ") no-repeat";
                }

that returns null. I've added in a couple of alerts to see whats going on, the alert(input) line is returning an element as expected, but the second alert is returning null.

Why is this ?

[Kalina]

Hello Alan T,

I will suggest you change the OnClientLoad handler in order to set the image url correctly after postback:

<script language="javascript" type="text/javascript">
    function showImageOnSelectedItemChanging(sender, eventArgs) {
        var input = sender.get_inputDomElement()
        input.style.background =
            "url(" + eventArgs.get_item().get_imageUrl() + ") no-repeat";
    }

    function showFirstItemImage(sender) {
        var input = sender.get_inputDomElement()
        var selectedItem = sender.get_selectedItem();
        input.style.background =
            "url(" + selectedItem.get_imageUrl() + ") no-repeat";
    }
</script>

<telerik:RadComboBox ID="RadComboBox1" runat="server" Height="180px"
  OnClientLoad="showFirstItemImage"  CssClass="test" AutoPostBack="true"
   OnClientSelectedIndexChanging="showImageOnSelectedItemChanging" >
</telerik:RadComboBox>

Please let me know if this was helpful.

Greetings,
Kalina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Alan T]

Hi Kalina that code is already in there. The function is firing just returning null ?

I've recently encountered another issue and i'm sure they must be related.

Here is my combobox definition

telerik:RadComboBox Skin="WebBlue" LoadingMessage="Loading..."  runat="server" ID="cbo_country_filter" Width="300px"
                MarkFirstMatch="true" OnClientLoad="showFirstItemImage" OnClientSelectedIndexChanging="showImageOnSelectedItemChanging" AllowCustomText="false" AutoPostBack="true" />

It is populated in the code behind via the following function:

        Protected Sub populateCombos()
            Dim countrySQL As String = "SELECT name, currency, flag FROM country ORDER BY name"

            If Not Page.IsPostBack Then
                Me.cbo_country_filter.Items.Add(New RadComboBoxItem("All Countries", "%%%"))
                Me.cbo_country_filter.FindItemByText("All Countries").Selected = True
            End If



            If Me.cbo_country_filter.Items.Count <= 1 Then
                Using objConn As New MySqlConnection(ConfigurationManager.ConnectionStrings("MySqlConnectionString1").ConnectionString)
                    Using objCmd As New MySqlCommand(countrySQL, objConn)
                        If objConn.State <> ConnectionState.Open Then objConn.Open()
                        Dim objDr As MySqlDataReader = objCmd.ExecuteReader()
                        'loop through and populate boxes


                        While objDr.Read
                            Dim item As New RadComboBoxItem(objDr("name"), objDr("name"))
                            If objDr("flag").ToString <> "" Then
                                item.ImageUrl = "images/flag/" & objDr("flag").ToString
                                item.DisabledImageUrl = "images/flag/" & objDr("flag").ToString
                            End If
                            Me.cbo_country_filter.Items.Add(item)
                        End While
                        objDr.Close()
                        objCmd.Dispose()
                    End Using
                    objConn.Close()
                    objConn.Dispose()
                End Using
            End If

        End Sub

Which is called on page load.

it filters a radgrid depending on what is selected. I then have a link button to clear the filters, which works, but it doesn't update the combobox

        Protected Sub btnShowAll_Click(ByVal sender As Object, ByVal e As System.EventArgs)
            RadGrid1.MasterTableView.FilterExpression = String.Empty

            For Each column As GridColumn In RadGrid1.MasterTableView.RenderColumns
                If TypeOf column Is GridBoundColumn Then
                    Dim boundColumn As GridBoundColumn = TryCast(column, GridBoundColumn)
                    boundColumn.CurrentFilterValue = String.Empty
                End If
            Next


            Me.cbo_country_filter.FindItemByText("All Countries").Selected = True

            Me.cbo_country_filter.SelectedIndex = Me.cbo_country_filter.FindItemIndexByText("All Countries")
            Me.cbo_country_filter.SelectedItem.Text = "All Countries"
            Me.cbo_country_filter.Text = "All Countries"


            RadGrid1.MasterTableView.Rebind()

        End Sub

As you can see i've tried every possible method of updating the combobox. And in teh code behind it seems to change - the country filter no longer applies & if i hover over for example SelectedItem.text i can see that it's changed to all countries. But when the page is rendered this isn't the case.

It's almost as if something is overruling it, and i bet this is related to the above issue with the flag icon appearing for a split second before the postback but disappearing after the postback has completed.

both the combobox and radgrid have a loadingpanel associated with them - i just tried removing it to see if it had anyhting to do with the problem.

Thanks in advance.

[Alan T]

Apologies, issue resolved.

It was because i hadn't attached it to the radajaxmanager.

Thanks for the assistance