BinaryImage not showing image

[Luis]

I have in my aspx page the following structure where i load the data from a datatable.

<telerik:RadBinaryImage runat="server" ID="rbiTeste" AutoAdjustImageControlSize="true" />

<telerik:RadGrid runat="server" ID="radGridUsuarios" GridLines="None" ShowFooter="False"
    AllowSorting="True" ShowGroupPanel="False" AutoGenerateColumns="False" AllowPaging="True"
    OnPreRender="radGridUsuarios_PreRender" OnNeedDataSource="radGridUsuarios_NeedDataSource"
    OnItemCommand="radGridUsuarios_ItemCommand" OnItemDataBound="radGridUsuarios_ItemDataBound"
    PageSize="30">
    <MasterTableView DataKeyNames="ID_USUARIO" EnableHeaderContextMenu="False" AllowMultiColumnSorting="False">
        <Columns>
            <telerik:GridBoundColumn DataField="ID_USUARIO" HeaderText="Id" SortExpression="ID_USUARIO" Visible="false" />
            <telerik:GridBoundColumn DataField="USU_NOME" HeaderText="Nome" SortExpression="USU_NOME" />
            <telerik:GridBoundColumn DataField="SEX_DESC" HeaderText="Sexo" SortExpression="SEX_DESC" />
            <telerik:GridBoundColumn DataField="USU_EMAIL" HeaderText="E-mail" SortExpression="USU_EMAIL" />
            <telerik:GridBoundColumn DataField="USU_DTNASC" HeaderText="Aniversário" SortExpression="USU_DTNASC" DataFormatString="{0:dd/MM/yyyy}" DataType="System.DateTime" />
            <telerik:GridBoundColumn DataField="USU_DTCADASTRO" HeaderText="Data de Cadastro" SortExpression="USU_DTCADASTRO" DataFormatString="{0:dd/MM/yyyy}" DataType="System.DateTime" />
            <telerik:GridBoundColumn DataField="PF_DESC" HeaderText="Perfil" SortExpression="PF_DESC" />
            <telerik:GridBoundColumn DataField="USU_ATIVO" HeaderText="Ativo?" SortExpression="USU_ATIVO" />
        </Columns>
        <NestedViewTemplate>
            <asp:Panel runat="server" ID="pnlDetalhes">
                <telerik:RadTabStrip runat="server" ID="radTabDetalhes" MultiPageID="radMultiDetalhes"
                    SelectedIndex="0">
                    <Tabs>
                        <telerik:RadTab runat="server" Text="Detalhes" PageViewID="pgDetalhes" />
                    </Tabs>
                </telerik:RadTabStrip>
                <telerik:RadMultiPage runat="server" ID="radMultiDetalhes" SelectedIndex="0" RenderSelectedPageOnly="false">
                    <telerik:RadPageView runat="server" ID="pgDetalhes" Width="500px">
                        <div>
                            <table border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td valign="top">
                                        <div style="padding: 10px;">
                                            <telerik:RadBinaryImage runat="server" ID="rbiAvatarSelecionado" DataValue='<%# Eval("USU_FOTO") == null ? null : (byte[])Eval("USU_FOTO") %>' AlternateText='<%# Eval("USU_NOME", "Avatar de {0}") %>' AutoAdjustImageControlSize="true" Visible='<%# Eval("USU_FOTO") == null ? false : true %>' />
                                        </div>
                                    </td>
                                    <td>
                                        <asp:DetailsView ID="dvUsuarioDetalhes" AllowPaging="false" GridLines="None" runat="server"
                                            Font-Italic="true" AutoGenerateRows="false" BorderStyle="None">
                                            <Fields>
                                                <asp:BoundField DataField="USU_CPF" HeaderText="CPF:" HeaderStyle-Font-Italic="false" HeaderStyle-Font-Bold="true" />
                                                <asp:BoundField DataField="EN_ENDERECO_DESC" HeaderText="Endereço:" HeaderStyle-Font-Italic="false" HeaderStyle-Font-Bold="true" />
                                                <asp:BoundField DataField="EN_BAIRRO" HeaderText="Bairro:" HeaderStyle-Font-Italic="false" HeaderStyle-Font-Bold="true" />
                                                <asp:BoundField DataField="EN_CIDADE" HeaderText="Cidade:" HeaderStyle-Font-Italic="false" HeaderStyle-Font-Bold="true" />
                                                <asp:BoundField DataField="UF_SIGLA" HeaderText="Estado:" HeaderStyle-Font-Italic="false" HeaderStyle-Font-Bold="true" />
                                                <asp:BoundField DataField="EN_CEP" HeaderText="Cep:" HeaderStyle-Font-Italic="false" HeaderStyle-Font-Bold="true" />
                                                <asp:BoundField DataField="CON_CEL" HeaderText="Celular:" HeaderStyle-Font-Italic="false" HeaderStyle-Font-Bold="true" />
                                                <asp:BoundField DataField="CON_TEL" HeaderText="Telefone:" HeaderStyle-Font-Italic="false" HeaderStyle-Font-Bold="true" />
                                                <asp:BoundField DataField="CON_MSN" HeaderText="MSN:" HeaderStyle-Font-Italic="false" HeaderStyle-Font-Bold="true" />
                                                <asp:BoundField DataField="CON_FACEBOOK" HeaderText="Facebook:" HeaderStyle-Font-Italic="false" HeaderStyle-Font-Bold="true" />
                                                <asp:BoundField DataField="CON_TWITTER" HeaderText="Twitter:" HeaderStyle-Font-Italic="false" HeaderStyle-Font-Bold="true" />
                                                <asp:BoundField DataField="CON_SKYPE" HeaderText="Skype:" HeaderStyle-Font-Italic="false" HeaderStyle-Font-Bold="true" />
                                            </Fields>
                                        </asp:DetailsView>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </telerik:RadPageView>
                </telerik:RadMultiPage>
            </asp:Panel>
        </NestedViewTemplate>
    </MasterTableView>
    <ClientSettings AllowDragToGroup="False" AllowColumnsReorder="False">
        <Resizing AllowColumnResize="False" />
    </ClientSettings>
    <GroupingSettings ShowUnGroupButton="False" />
</telerik:RadGrid>

In my control (<telerik:RadBinaryImage ID=rbiAvatarSelecionado /> in <NestedViewTemplate>) is not showing the image.
But doing a test with this control (<telerik:RadBinaryImage ID=rbiTeste  />) works fine!

DataTable dtUsuarioDetalhes = new DataTable();

dtUsuarioDetalhes = new UsuarioBLL().ListarDetalhes(1);

rbiTeste.DataValue = (byte[])dtUsuarioDetalhes.Rows[0]["USU_FOTO"];

Why i can't show the image in grid?

Thank you in advance!

[Tsvetina]

Hello Luis,

Have you tried binding the image inside RadGrid programmatically. You could do this in ItemDataBound:

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem item = (GridDataItem)e.Item;
        RadBinaryImage img = item.ChildItem.FindControl("rbiAvatarSelecionado") as RadBinaryImage;
        img.DataValue = (byte[])(item.DataItem as DataRowView)["USU_NOME"];
    }
}

Kind regards,
Tsvetina
the Telerik team

[Luis]

I tried doing this:

protected void radGridUsuarios_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem item = (GridDataItem)e.Item;

        try
        {
            RadBinaryImage img = item.ChildItem.FindControl("rbiAvatarSelecionado") as RadBinaryImage;
            img.DataValue = (byte[])(item.DataItem as DataRowView)["USU_FOTO"];
        }
        catch
        {
        }
    }
}

But the event not found the control (rbiAvatarSelecionado).

Remember that the control (rbiAvatarSelecionado) is in a RadPageView. Perhaps this is the problem?

Thank you in advance!

[Tsvetina]

Hi Luis,

In such case you can try to approach this from the nested item perspective:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridNestedViewItem)
    {
        GridNestedViewItem item = e.Item as GridNestedViewItem;
        RadBinaryImage img = e.Item.FindControl("rbiAvatarSelecionado") as RadBinaryImage;
        img.DataValue = (byte[])(item.ParentItem.DataItem as DataRowView)["USU_FOTO"];
    }
}

This way the image will surely be created.

All the best,
Tsvetina
the Telerik team

[Ahmad]

this work for me

<img alt="" id="faceimgid"  runat="server" src='<%# Eval("Img_ID") is DBNull ? "" : "data:image/png;base64," + Convert.ToBase64String(Eval("Img_ID") as Byte[])%>'  />