Image Colume with webapi data source

[Bakri]

I am using rad grid with webapi data source
the problem when i add a image column the image still empty
this is my grid
<telerik:RadGrid runat="server" ID="grdUsers" AllowPaging="true" AllowSorting="true"
                                    AllowFilteringByColumn="true" PageSize="5">
                                    <MasterTableView AutoGenerateColumns="False" DataKeyNames="Id" ClientDataKeyNames="Id,PasswordHash">
                                        <PagerStyle Mode="NumericPages" AlwaysVisible="true" />
                                        <Columns>
                                              <telerik:GridImageColumn DataType="System.String" DataImageUrlFields="Image" AlternateText="User image" 
                                                   UniqueName="Image"
                                                    ImageAlign="Middle" ImageHeight="50px" ImageWidth="50px" AllowFiltering="false" HeaderText="">
                                                </telerik:GridImageColumn>
                                            <telerik:GridBoundColumn  DataField="UserName" HeaderText="User Name"   UniqueName="UserName"
                                                  DataType="System.String">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn  DataField="FullName" HeaderText="Name" UniqueName="FullName"  
                                                  DataType="System.String">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn  DataField="Email" HeaderText="Email"  UniqueName="Email"
                                                  DataType="System.String">
                                            </telerik:GridBoundColumn>
                                             <telerik:GridBoundColumn DataField="RegistrationDate" HeaderText="Registration Date" UniqueName="RegistrationDate"  
                                                    DataFormatString="{0:dd/MM/yyyy}">
                                               </telerik:GridBoundColumn>
                                            <telerik:GridButtonColumn UniqueName="btnEdit"  ButtonType="PushButton" Text="Edit" CommandName="Edit"></telerik:GridButtonColumn>
                                            <telerik:GridButtonColumn UniqueName="btnDelete" ButtonCssClass="del" ButtonType="PushButton" Text="Delete" CommandName="Delete"></telerik:GridButtonColumn>
                                        </Columns>
                                    </MasterTableView>
                                    <ClientSettings>
                                        <Selecting AllowRowSelect="True" />
                                        <ClientEvents OnCommand="RadGridCommand" />
                                        <DataBinding Location="/SecuHostapi/Security/User/GetAll"  ResponseType="JSON">
                                            <DataService TableName="SecuHostUser" Type="OData" />
                                        </DataBinding>
                                    </ClientSettings>
                                </telerik:RadGrid>

and the result like the attachment

[Radoslav]

Hello Bakri,

To achieve the desired functionality you need to handle the OnRowDataBound client side event of the RadGrid and based on the json object to generate appropriate src attribute of the image. More information and sample code you can find in the following documentation article:
http://www.telerik.com/help/aspnet-ajax/grid-client-side-binding-specifics.html (Generate title and href attributes for hyperlinks on the client section)

I hope this helps.

Regards,
Radoslav
Telerik