Radbinaryimage in radtilelist

8 posts, 1 answers
  1. binny
    binny avatar
    21 posts
    Member since:
    Jan 2015

    Posted 10 Sep 2015 Link to this post

    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  

     

     

  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 11 Sep 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. binny
    binny avatar
    21 posts
    Member since:
    Jan 2015

    Posted 13 Sep 2015 in reply to Marin Bratanov Link to this post

    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>

     

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 14 Sep 2015 Link to this post

    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
  6. binny
    binny avatar
    21 posts
    Member since:
    Jan 2015

    Posted 14 Sep 2015 in reply to Marin Bratanov Link to this post

    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

     

  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 15 Sep 2015 Link to this post

    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
  8. binny
    binny avatar
    21 posts
    Member since:
    Jan 2015

    Posted 16 Sep 2015 Link to this post

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

     

  9. binny
    binny avatar
    21 posts
    Member since:
    Jan 2015

    Posted 17 Sep 2015 in reply to Marin Bratanov Link to this post

    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 ?
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017