Radbinaryimage in radtilelist

[binny]

I have all my images in byte[] and I would like to use it in a radtile list , is there an easy way to do this ?, all I see so far is that we need to have to Image URL

please help  

 

 

[Marin Bratanov]

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,

Marin Bratanov
Telerik

[binny]

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>

 

[Marin Bratanov]

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

[binny]

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

 

[Marin Bratanov]

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,

Marin Bratanov
Telerik

[binny]

Thank you so much, is there a way to set a mouse hover image on a peek ? 

 

[binny]

Hi I was trying to add radrating to these tiles, I have seen the demos but not able somehow use it in my application , can you please provide me a direction on how to add the radrating to radtile list ?