Image in combobox

[Ameya]

Hello Friends,


I following field in sql database for  IMage_master 

1) Imageid (numeric(18,0))
2) Image_code (nvarchar(100))
3) fullimage (image) -- I store image with 100 kb

I am doing windows application with C# and Sql2008 as backend

I have gridviewcomboboxcolumn with name cmbimage with display member fullimage and value member as image code. Its not sowing image its just showing byte[]. i want to display image in   gridviewcomboboxcolumn  .


Please help me out , if possible with code

With Regards

Ameya Chavan

[Dimitar Terziev]

Hello Ameya,

If you want to apply an image to the RadComboBox items you should pass an URL to a physical image.

Kind regards,
Dimitar Terziev
the Telerik team

[Jonathan]

Hello,

Are you suggesting that there's no way to show an image that is stored in a database in a RadComboBox drop down list? It only works for physical images stored on a disk somewhere?

Regards,
Jonathan

[Dimitar Terziev]

Hello Jonathan,

In case you want to use the build-in ImageUrl property of the RadComboBoxItem the image should be stored on the disk, otherwise template should be used.

All the best,
Dimitar Terziev
the Telerik team

[Kevin]

Hello Jonathan,

There are two ways you show an image in the RadComboBox.

1. You can use the RadComboBoxItemTemplate and add a RadBinaryImage control that binds its DataValue property to your image column.

2. You can use the built-in ImageUrl property of the RadComboBoxItem and point it to a handler page that serves the image from the database.

I hope that helps.

[Jonathan]

Hey Kevin,

I have found out what the issue was: None of the RadComboBox examples actually show how to pull an image from the database along with the text.

I was following the First Look example and tried to use its implementation to create a templated combobox to use its LoadOnDemand feature to fetch the names and pictures of employees from a database. As it turns out, I didn't need to follow this example at all. In fact, none of the examples for the RadComboBox shows how to do this. They all make reference to a physical file of some sort, or reference to a file location stored in the database as text, or a CSS that does that.

My RadComboBox is inside a TemplateColumn of a RadGrid. All I wanted was that when the user clicks on the drop down list, they see a list of employees, by picture and name. That's all. The first look example made it appear as though using LoadOnDemand was the only way to get that done. (Maybe it's too complex for a first look example).

All I did was to point my templated RadComboBox to the ObjectDataSource that pulls the data from the database, then use a simple Eval("FieldName") in the ItemTemplate of the RadComboBox to show all the fields I required. For the picture, I used a RadBinaryImage on the ItemTemplate and bound its DataValue property to the Picture field using Eval("Picture") as you suggested and that was it.

I didn't need to write any additional code to do read the image from the database or use a HttpHandler to serve up the image for each row. In fact, for anyone else who may be struggling with this, my entire TemplateColumn implementation is thus:

<telerik:GridTemplateColumn DataField="Subcontractor_ID"

HeaderText="Consultant" UniqueName="Consultant">

<ItemTemplate>

<table border="0" cellspacing="0" cellpadding="0" width="100%">

<tr>

<td>

<telerik:RadBinaryImage runat="server" ID="RbiConPic1" DataValue='<%# IIf(TypeOf(Eval("Picture")) is System.DBNull, Nothing, Eval("Picture")) %>'

AutoAdjustImageControlSize="false" Height="100px" Width="100px" ImageUrl="images/icon-consultant.png" />

</td>
<td><asp:Label ID="lblName" runat="server" Text='<%#Eval("First_Name") & " " & Eval("Last_Name") %>'></asp:Label></td>

</tr>

</table>

</ItemTemplate>

<EditItemTemplate>

<telerik:RadComboBox runat="server" ID="RcbConsultant" EmptyMessage="[Select Consultant]" Height="200px" HighlightTemplatedItems="true"

Width="300px" Filter="StartsWith" DataSourceID="OdsContractor" DataTextField="First_Name" DataValueField="Contractor_ID">

<HeaderTemplate>

<table border="0" cellspacing="0" cellpadding="0" width="100%">

<tr>

<td style="width: 80px;">Picture</td>

<td>Name</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<table border="0" cellspacing="0" cellpadding="0" width="100%">

<tr>

<td style="width: 80px;">

<telerik:RadBinaryImage runat="server" ID="RbiSubconPic" Height="30px" Width="30px" DataValue='<%# Eval("Picture")%>' ResizeMode="Fit" /></td>

<td><%# Eval("First_Name")%> <%# Eval("Last_Name")%></td>

</tr>

</table>

</ItemTemplate>

</telerik:RadComboBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

It's that simple - and this works beautifully. I hope this will help someone else who is just looking for a simple way to show both text and images pulled from the database without having to write any code behind.

May I suggest that a simple example be put on the RadComboBox demos page for this? It would clear up a lot of the questions I see asked about this feature in this forum. Most users new to the intricacies of the control aren't looking for anything too complicated.

Thanks for all your attention.

Regards,
Jonathan

[Kalina]

Hi Jonathan,

Thank you for publishing your solution for the community.
Let me suggest you create a Code Library project.

All the best,
Kalina
the Telerik team

[Muhammad]

Hi Kevin!

Your example seems simple and good too. I have tried to implement the same in my project but I am unble to see the image in the combobox. Below is the sample code for your kind review. I am assigning datasource in code behind as I am using this in SharePoint webpart. I am able to see the text but not the image.

<telerik:RadComboBox ID="rcmbSTComm" runat="server" HighlightTemplatedItems="true" MarkFirstMatch="true"

    EmptyMessage="Select Status" DataValueField="intStCommCode" DataTextField="strStatus"

    EnableLoadOnDemand="false" AutoPostBack="false" Width="300px">

    <HeaderTemplate>

        <ul>

            <li class="col1">Picture</li>

            <li class="col2">Status</li>

        </ul>

    </HeaderTemplate>

    <ItemTemplate>

        <ul>

            <li class="col1"><telerik:RadBinaryImage DataValue=<%# DataBinder.Eval(Container.DataItem, "vbImage") %> ID="IMG1" runat="server" /> </li>

            <li class="col2"><%# DataBinder.Eval(Container.DataItem, "strStatus") %></li>

        </ul>

    </ItemTemplate>

</telerik:RadComboBox>

rcmbSTComm.DataSource = Business.Status.GetAllStatusForGrid();
rcmbSTComm.DataBind();