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

Show Selected Image in input

3 Answers 103 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Alan T
Top achievements
Rank 1
Alan T asked on 27 Apr 2010, 11:31 AM
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 ?







3 Answers, 1 is accepted

Sort by
0
Accepted
Kalina
Telerik team
answered on 29 Apr 2010, 02:09 PM
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.
0
Alan T
Top achievements
Rank 1
answered on 29 Apr 2010, 04:13 PM
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 ObjectByVal 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.






0
Alan T
Top achievements
Rank 1
answered on 29 Apr 2010, 04:33 PM

Apologies, issue resolved.

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

Thanks for the assistance

Tags
ComboBox
Asked by
Alan T
Top achievements
Rank 1
Answers by
Kalina
Telerik team
Alan T
Top achievements
Rank 1
Share this question
or