RadGrid not showing image column when autogenerate set to true

[Mick]

Hi everyone,

I have been banging my head against the wall today trying to find a solution to my problem so any help is much appreciated.

I have a radGrid that I have bound to a datatable server side and this datatable contains a column(img) of type "Image" in the back end (SQL Server 2005).  I have AutoGenerateColumns set to True as the application we are building is an interrogation tool to any database or table on our server, I therefore cannot add all of the columns manually.  Now, when the grid is displayed, the column "img" is not shown at all.

My first question is why this is the case and is there a setting that can be changed in order for the grid to automatically display these columns?  Even if there is, we have another requirement which I am unsure how to solve?

So, firstly we need the column adding to the grid, then if the DataRow has binary data in it we would like to display the word "BLOB" in the radGrid cell.  If the row does not have any data then the word "blob" in lower case should be displayed.  Lastly, we then need to add a click event to that cell that will fire up a new radWindow where we can display the binary data in a text field or binary editor.  (Potentially even show the image and allow them to change it?).

I have attached the code for completeness sake,

Look forward to hearing your responses.

Thanks,

M

<telerik:RadGrid ID="gdData" runat="server" AllowSorting="True"
            AllowPaging="True" AllowCustomPaging="True" Height="550px"
            PageSize="30" GridLines="None" PagerStyle-Visible="false"
            OnNeedDataSource="gdData_NeedDataSource" AllowFilteringByColumn="True"
            AutoGenerateEditColumn="True" Skin="WebBlue">
            <MasterTableView TableLayout="Auto" CommandItemDisplay="None" CurrentResetPageIndexAction="SetPageIndexToFirst"
                PageSize="30" EditMode="InPlace" AllowAutomaticDeletes="True"
                AllowAutomaticInserts="True" AllowAutomaticUpdates="True">
                <CommandItemSettings ExportToPdfText="Export to Pdf" />
                <ItemStyle Wrap="False" />
                <AlternatingItemStyle Wrap="False" />
            </MasterTableView>
            <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" Scrolling-SaveScrollPosition="true">
                <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="100px" EnableVirtualScrollPaging="true" />
                <ClientEvents OnRowCreated="AddTooltips"  />
                <Resizing AllowColumnResize="True" EnableRealTimeResize="False" />
            </ClientSettings>
            <PagerStyle Visible="False" />
        </telerik:RadGrid>

And the code behind:

protected void gdData_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
    if (GetData)
    {
        // Find out how many records have already been shown so we can work out start position
        int startPos = gdData.CurrentPageIndex * gdData.PageSize;

        this.GridData = DataAccess.GetData(CurrentConStr, cbTable.SelectedValue, startPos, gdData.PageSize);

        gdData.VirtualItemCount = this.GridData.recordcount;
        gdData.DataSource = this.GridData.Ds.Tables[0];
    }
}

[Radoslav]

Hi Mick,

When the AutoGenerateColumns property is set to true, an GridBoundColumn object is automatically created for each field in the data source. Each field is then displayed as a column in the Telerik RadGrid control in the order that the fields appear in the data source. However the GridBoundColumn could not show binary data as an image.
To achieve the functionality concerning having two type of texts "BLOB" and "blob" into RadGrid column, based on the data from database, you could try the following approach:
You could add additional GridButtonColumn:

<Columns>
   <telerik:GridButtonColumn UniqueName="Picture">
   </telerik:GridButtonColumn>
</Columns>

On ItemDataBound event you could change the text and attach client side function on OnClientClick event of the link button. For example:

void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem item = e.Item as GridDataItem;
        if ((item.DataItem as DataRowView).Row["Picture"] == System.DBNull.Value)
        {
             (item["Picture"].Controls[0] as LinkButton).Text = "blob";
        }
        else
        {
             (item["Picture"].Controls[0] as LinkButton).Text = "BLOB";
             (item["Picture"].Controls[0] as LinkButton).OnClientClick = "openWindow('" + item["CategoryID"].Text + "'); return false;";
        }
     }
}

The openWindow function could open a RadWindow with loaded aspx page into it:

<script type="text/javascript">
 function openWindow(itemID)
 {
    window.radopen("ViewImageForm.aspx?ID="+itemID, "RadWindow1");
    return false;
 }
</script>

Into ViewImageForm.aspx page you could have RadBinaryImage and on Page_Load event you could get the binary data from database based on the item's ID kept into the QueryString:

protected void Page_Load(object sender, EventArgs e)
{
        int categoryID = int.Parse(Request.QueryString["ID"].ToString());
        RadBinaryImage.DataValue = (Byte[])GetData("SELECT * FROM Categories WHERE CategoryID='" + categoryID + "'").Rows[0]["Picture"];
        RadBinaryImage.DataBind();
}

public DataTable GetData(string query)
{
     String ConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
     SqlConnection conn = new SqlConnection(ConnString);
     SqlDataAdapter adapter = new SqlDataAdapter();
     adapter.SelectCommand = new SqlCommand(query, conn);

     DataTable myDataTable = new DataTable();

     conn.Open();
     try
     {
          adapter.Fill(myDataTable);
     }
     finally
     {
          conn.Close();
     }

     return myDataTable;
}

Additionally I am sending you a simple example which demonstrates the desired functionality. Please check it out and let me know if it helps you.

All the best,
Radoslav
the Telerik team

[Mick]

Thanks a lot for your help Radoslav, much appreciated!  I had to adapt your example so it would work in the circumstances I have here but it looks good now!!

Cheers,

M

[Radoslav]

Hi Mick,

I am glad you solved the problem. In case you experience any further problems, do not hesitate to contact us again.

Sincerely yours,
Radoslav
the Telerik team

[kachy]

Hi,

This example shows how to open a picture stored as a blob field in a separate RadWindow, can you please help in how to show the BLOB image inside the radgrid as one of the columns using a sqldatasource.

Thanks.

Went through the example once again and used the RadBinaryImage to show the image inside grid. and it worked fine.

Thanks.

[Radoslav]

Hello Mick,

Please check out the following examples which demonstrates binary images in RadGrid:
http://demos.telerik.com/aspnet-ajax/controls/examples/integration/raduploadinajaxifiedgrid/defaultcs.aspx?product=grid
http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandradasyncupload/defaultcs.aspx?product=grid

I hope this helps.

Kind regards,
Radoslav
the Telerik team