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

Display image in radgrid editform template

3 Answers 143 Views

Grid

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

Antony asked on 09 Jan 2011, 09:16 PM

Hi

I have a rad grid with a template edit form. One of the fields on the form is an image but the image is not being displayed using the 'Bind' command.

Here is my edit form:

<FormTemplate>

<table id="table1" cellspacing="2" cellpadding="1" width="100%" border="1" rules="none"

style="border-collapse: collapse;">

<tr class="EditFormHeader">

<td colspan="2">

<b>Product Details</b>

</td>

</tr>

<tr>

<td>

<table id="table2" cellspacing="1" cellpadding="1" width="100%" border="0" class="module">

<tr>

<td></td>

</tr>

<tr>

<td>

Product Name:

</td>

<td>

<asp:TextBox ID="TextBox7" runat="server" Width="90%" Text='<%# Bind( "ProductName" ) %>'></asp:TextBox>

</td>

</tr>

<tr>

<td>

Product Price:

</td>

<td>

<asp:TextBox ID="TextBox8" runat="server" Width="90%" Text='<%# Bind( "ProductPrice" ) %>'></asp:TextBox>

</td>

</tr>

<tr>

<td>

Category:

</td>

<td>

<asp:TextBox ID="TextBox9" Enabled="false" runat="server" Width="90%" Text='<%# Bind( "CategoryName" ) %>'></asp:TextBox>

<br />

<asp:DropDownList ID="DropDownList1" runat="server"

DataSourceID="SqlDataSource1" Width="90%"

DataTextField="CategoryName" AutoPostBack="true">

</asp:DropDownList>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:ASPNETDBConnectionString %>"

SelectCommand="Select Distinct CategoryName From Categories">

</asp:SqlDataSource>

</td>

</tr>

<tr>

<td>

Thumb Image:

</td>

<td>

<asp:TextBox ID="testImage" runat="server" Text='../images/<%# Bind( "ImageName" ) %>'></asp:TextBox>

<img id="ThumbImage1" runat="server" alt="" src='../images/<%# Bind( "ImageName" ) %>' />

<asp:Image ID="Image1" runat="server" AlternateText="Thumb" ImageUrl='../images/<%# Bind( "ImageName" ) %>'/>

</td>

</tr>

<tr>

<td>

Main Image:

</td>

<td>

<img id="MainImage" alt="" runat="server" src='../images/<%# Bind( "ImageNameMain" ) %>' />

</td>

</tr>

<tr>

<td colspan="2">

<telerik:RadTabStrip runat="server" ID="RadTabStrip1" Orientation="HorizontalTop"

SelectedIndex="0" MultiPageID="RadMultiPage1" Width="400px">

<Tabs>

<telerik:RadTab Text="Ingredients">

</telerik:RadTab>

<telerik:RadTab Text="Description">

</telerik:RadTab>

<telerik:RadTab Text="Overview">

</telerik:RadTab>

<telerik:RadTab Text="Directions">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0"

Height="218px" Width="400px" CssClass="multiPage">

<telerik:RadPageView runat="server" ID="RadPageView1" CssClass="pageView">

<asp:TextBox ID="TextBox13" runat="server" TextMode="MultiLine" Rows="5" Columns="40" Width="370px"

Text='<%# Bind( "ProductIngredients" ) %>'></asp:TextBox>

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="RadPageView2" CssClass="pageView">

<asp:TextBox ID="TextBox10" runat="server" TextMode="MultiLine" Rows="5" Columns="40"

Text='<%# Bind( "ProductDescription") %>'></asp:TextBox>

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="RadPageView3" CssClass="pageView">

<asp:TextBox ID="TextBox11" runat="server" TextMode="MultiLine" Rows="5" Columns="40"

Text='<%# Bind( "ProductOverview" ) %>'></asp:TextBox>

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="RadPageView4" CssClass="pageView">

<asp:TextBox ID="TextBox12" runat="server" TextMode="MultiLine" Rows="5" Columns="40"

Text='<%# Bind( "ProductDirections" ) %>'></asp:TextBox>

</telerik:RadPageView

</telerik:RadMultiPage>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td align="right" colspan="2">

<asp:Button ID="btUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>' runat="server"

CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'/>

<asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="false"

CommandName="Cancel" />

</td>

</tr>

</table>

</FormTemplate>

I have added two image types (HTML & ASP.net) and a textbox to see the result of the bind, here are what i see

Textbox testImage = ../images/<%# Bind( "ImageName" ) %>
HTML ThumbImage1 =

" id="ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl19_ThumbImage1" />

ASP Image1 = Alt text is shown 'Thumb'

How do i render an image in the edit form?

3 Answers, 1 is accepted

Accepted

answered on 13 Jan 2011, 10:39 AM

Hello Antony,

You must check the HTML output of the page and see the resolved url for the image. I assume it is not correctly supplied. For example if the image is in the current folder as the page and the data field supplies only the name of the file the following binding works perfectly:

<FormTemplate>

<asp:Image ID="SushiImage" runat="server" AlternateText="alt"

ImageUrl='<%# String.Format("{0}.png", Eval("Name").ToString()) %>' />

</FormTemplate>

Regards,
Nikolay
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.