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

Radbinaryimage in radtilelist

7 Answers 43 Views
TileList
This is a migrated thread and some comments may be shown as answers.
binny
Top achievements
Rank 1
binny asked on 10 Sep 2015, 09:03 PM

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  

 

 

7 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 11 Sep 2015, 07:27 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
binny
Top achievements
Rank 1
answered on 14 Sep 2015, 03:21 AM

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>

 

0
Marin Bratanov
Telerik team
answered on 14 Sep 2015, 06:26 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
binny
Top achievements
Rank 1
answered on 14 Sep 2015, 10:21 PM

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

 

0
Marin Bratanov
Telerik team
answered on 15 Sep 2015, 08:16 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
binny
Top achievements
Rank 1
answered on 16 Sep 2015, 02:23 PM

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

 

0
binny
Top achievements
Rank 1
answered on 17 Sep 2015, 04:31 PM
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 ?
Tags
TileList
Asked by
binny
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
binny
Top achievements
Rank 1
Share this question
or