7 Answers, 1 is accepted
Hello,
You can use a RadBinaryImage control in a ContenTemplate Tile: http://docs.telerik.com/devtools/aspnet-ajax/controls/tilelist/tiles/contenttemplate-tile.
Alternatively, you can create a generic handler that will take the image from your database and return it as a file, and point the ImageUrl property of the Tile to that handler, with the appropriate querystring so the handler can know which image to return.
Regards,
Telerik
Thank you , I am trying to avoid one more layer by introducing a handler
This is what I have tried but its still not working
<telerik:RadTileList runat="server" ID="RadTileList1" DataSourceID="SqlDataSource1" Height="500px" TileRows="3" AutoPostBack="true" OnTileClick="RadTileList1_TileClick"
SelectionMode="Single" EnableDragAndDrop="true">
<DataBindings>
<%-- <CommonTileBinding TileType="RadImageTile" DataTitleTextField="Name" DataNameField="Description" Shape="Wide"/> --%>
<ContentTemplateTileBinding>
<ContentTemplate>
<asp:Image ID="Image2" runat="server" Height="109px" Width="194px" AlternateText="Video Thumbnail"
ImageUrl='<%# "data:image/png;base64,"+ Convert.ToBase64String((byte[])(Eval("Image"))) %>' />
<asp:Label ID="Label3" runat="server" CssClass="timeLabel" Text='<%# DataBinder.Eval(Container.DataItem,"Name") %>'></asp:Label>
</ContentTemplate>
</ContentTemplateTileBinding>
<%-- <ImageTileBinding DataImageUrlField="Image" />--%>
<TilePeekTemplate>
<div class="productNamePeek"><%# DataBinder.Eval(Container.DataItem,"Description") %></div>
</TilePeekTemplate>
</DataBindings>
</telerik:RadTileList>
Hello,
Such data binding expressions are not evaluated by the TileList at this point. I have created a page where you can monitor this feature's progress: http://feedback.telerik.com/Project/108/Feedback/Details/169080.
In the meantime, you can use the TileDataBound event: http://docs.telerik.com/devtools/aspnet-ajax/controls/tilelist/server-side-programming/events/ontiledatabound. Here is an example:
note that the tile type is set to ContentTemplateTile as otherwise it will default to TextTile: because I do not see a field that sets this
<
telerik:RadTileList
runat
=
"server"
ID
=
"RadTileList1"
Height
=
"500px"
TileRows
=
"3"
AutoPostBack
=
"true"
OnTileClick
=
"RadTileList1_TileClick"
SelectionMode
=
"Single"
EnableDragAndDrop
=
"true"
OnTileDataBound
=
"RadTileList1_TileDataBound"
>
<
DataBindings
>
<
CommonTileBinding
TileType
=
"RadContentTemplateTile"
DataTitleTextField
=
"Name"
DataNameField
=
"Description"
Shape
=
"Wide"
/>
<
ContentTemplateTileBinding
>
<
ContentTemplate
>
<
asp:Image
ID
=
"Image2"
runat
=
"server"
Height
=
"109px"
Width
=
"194px"
AlternateText
=
"Video Thumbnail"
ImageUrl
=
''
/>
<
asp:Label
ID
=
"Label3"
runat
=
"server"
CssClass
=
"timeLabel"
Text='<%# DataBinder.Eval(Container.DataItem,"Name") %>'></
asp:Label
>
</
ContentTemplate
>
</
ContentTemplateTileBinding
>
<%-- <
ImageTileBinding
DataImageUrlField
=
"Image"
/>--%>
<
TilePeekTemplate
>
<
div
class
=
"productNamePeek"
><%# DataBinder.Eval(Container.DataItem,"Description") %></
div
>
</
TilePeekTemplate
>
</
DataBindings
>
</
telerik:RadTileList
>
Here is some simplistic data binding:
protected
void
Page_Load(
object
sender, EventArgs e)
{
RadTileList1.DataSource = GetData();
RadTileList1.DataBind();
}
and the dummy data which should produce a red square for the image field (my sample gets directly a base64 string, you can use your existing methods):
protected
DataTable GetData()
{
DataTable tbl =
new
DataTable();
tbl.Columns.Add(
new
DataColumn(
"ColumnOne"
));
tbl.Columns.Add(
new
DataColumn(
"Description"
));
tbl.Columns.Add(
new
DataColumn(
"Name"
));
tbl.Columns.Add(
new
DataColumn(
"Image"
));
tbl.Rows.Add(
new
object
[] {
"firstRecord1"
,
"firstRecord2"
,
"firstRecord3"
,
"iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAWSURBVChTY3gro4IfjapARZSrkFEBAFL2jkY9mgpvAAAAAElFTkSuQmCC"
});
tbl.Rows.Add(
new
object
[] {
"secondRecord1"
,
"secondRecord2"
,
"secondRecord3"
,
"iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAWSURBVChTY3gro4IfjapARZSrkFEBAFL2jkY9mgpvAAAAAElFTkSuQmCC"
});
tbl.Rows.Add(
new
object
[] {
"thirdRecord1"
,
"thirdRecord2"
,
"thirdRecord3"
,
"iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAWSURBVChTY3gro4IfjapARZSrkFEBAFL2jkY9mgpvAAAAAElFTkSuQmCC"
});
tbl.Rows.Add(
new
object
[] {
"fourthRecord1"
,
"fourthRecord2"
,
"fourthRecord3"
,
"iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAWSURBVChTY3gro4IfjapARZSrkFEBAFL2jkY9mgpvAAAAAElFTkSuQmCC"
});
return
tbl;
}
and the TileDataBound event that can pass this final string to the image src:
protected
void
RadTileList1_TileDataBound(
object
sender, TileListEventArgs e)
{
var tile = (e.Tile
as
RadContentTemplateTile);
if
(tile !=
null
)
{
System.Web.UI.WebControls.Image img = tile.ContentContainer.FindControl(
"Image2"
)
as
System.Web.UI.WebControls.Image;
if
(img !=
null
)
{
img.ImageUrl =
string
.Format(
"data:image/png;base64,{0}"
, DataBinder.GetPropertyValue(e.Tile.DataItem,
"Image"
,
null
));
}
}
}
Regards, Marin Bratanov
Telerik
Thank you so much
I tried but ran into a minor issue with byte[] and string , for some reasons I was just getting System.byte[] rendered for the image, there must be a simple fix for that
And also is there a way we could add animations to TilePeekTemplate , I know that we can add animation via PeekTemplateSettings but not sure how to do it with TilePeekTemplate
Hello,
You can add specific settings for each tile in the OnTileCreated event: http://docs.telerik.com/devtools/aspnet-ajax/controls/tilelist/server-side-programming/events/ontilecreated.
Regards,
Telerik
Thank you so much, is there a way to set a mouse hover image on a peek ?