Image in combobox

8 posts, 0 answers
  1. Ameya
    Ameya avatar
    2 posts
    Member since:
    May 2012

    Posted 02 May 2012 Link to this post

    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
  2. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 03 May 2012 Link to this post

    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
    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 their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jonathan
    Jonathan avatar
    47 posts
    Member since:
    Sep 2010

    Posted 17 Aug 2012 Link to this post

    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
  5. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 20 Aug 2012 Link to this post

    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
    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 their blog feed now.
  6. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 20 Aug 2012 Link to this post

    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.
  7. Jonathan
    Jonathan avatar
    47 posts
    Member since:
    Sep 2010

    Posted 21 Aug 2012 Link to this post

    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
  8. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 22 Aug 2012 Link to this post

    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
    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 their blog feed now.
  9. Muhammad
    Muhammad avatar
    2 posts
    Member since:
    Apr 2013

    Posted 14 May 2013 Link to this post

    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();


Back to Top
UI for ASP.NET Ajax is Ready for VS 2017