GridBinaryImageColumn - no hair left!

[Paul]

Hello,

I am really struggling on this.  A quick solution would be great before I go crazy, thanks.

I have a problem trying to get images working in RadGrid.  I am using an existing SQL table (SQL 2005 Developer) which has product images stored as column type image.  These display fine in Winforms radgrid controls.  Under asp.net though I keep getting errors about invalid parameters.

The exception is shown

Server Error in '/GP_V1_00' Application.

---

Parameter is not valid.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.ArgumentException: Parameter is not valid.

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace:

[ArgumentException: Parameter is not valid.] System.Drawing.Image.FromStream(Stream stream, Boolean useEmbeddedColorManagement, Boolean validateImageData) +1062843 System.Drawing.Image.FromStream(Stream stream) +8 Telerik.Web.UI.ImageFilterHelper.CreateImgFromBytes(Byte[] image) +99 [ArgumentException: The provided binary data may not be valid image or may contains unknown header] Telerik.Web.UI.ImageFilterHelper.CreateImgFromBytes(Byte[] image) +173 Telerik.Web.UI.BinaryImageTransformationFilter.ProcessImageInternal(Byte[] image) +53 Telerik.Web.UI.BinaryImageTransformationFilter.ProcessImage(Byte[] image) +54 Telerik.Web.UI.BinaryImageFilterProcessor.ProcessFilters(Byte[] imageData) +188 Telerik.Web.UI.RadBinaryImage.ProcessImageData() +124 Telerik.Web.UI.RadBinaryImage.OnPreRender(EventArgs e) +41 System.Web.UI.Control.PreRenderRecursiveInternal() +80 System.Web.UI.Control.PreRenderRecursiveInternal() +171 System.Web.UI.Control.PreRenderRecursiveInternal() +171 System.Web.UI.Control.PreRenderRecursiveInternal() +171 System.Web.UI.Control.PreRenderRecursiveInternal() +171 System.Web.UI.Control.PreRenderRecursiveInternal() +171 System.Web.UI.Control.PreRenderRecursiveInternal() +171 System.Web.UI.Control.PreRenderRecursiveInternal() +171 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +842

---

Version Information: Microsoft .NET Framework Version:2.0.50727.3082; ASP.NET Version:2.0.50727.3082


My code is shown here.

 <telerik:RadGrid ID="RadGridImages" runat="server" DataSourceID="SqlDataSourceImages"
        GridLines="None" AutoGenerateColumns="False">
        <MasterTableView DataKeyNames="Id" DataSourceID="SqlDataSourceImages">
            <Columns>
                <telerik:GridBoundColumn DataField="Id" DataType="System.Int32" HeaderText="Id" ReadOnly="True"
                    SortExpression="Id" UniqueName="Id">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Product_Id" DataType="System.Int32" HeaderText="Product_Id"
                    SortExpression="Product_Id" UniqueName="Product_Id">
                </telerik:GridBoundColumn>
                <telerik:GridBinaryImageColumn DataField="image" HeaderText="Image" UniqueName="ProdImage"
                    ImageAlign="Middle" ImageHeight="150px" ImageWidth="200px" ResizeMode="Fit" DataAlternateTextField="Id"
                    DataAlternateTextFormatString="Image of {0}">
                </telerik:GridBinaryImageColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

Code behind code for handling images or adding them...

   protected void ButtonAddImage_Click(object sender, EventArgs e)
    {
        if (RadGridProducts.SelectedItems.Count < 1 || (string.IsNullOrEmpty(FileUploadImage.FileName)))
            return;

        string strId = ((GridDataItem)RadGridProducts.SelectedItems[0]).GetDataKeyValue("Id").ToString();

        // Create the image
        byte[] imageData = this.FileUploadImage.FileBytes;
        SaveImage(strId, imageData);
    }

    private void SaveImage(string strImageId, byte[] imageData)
    {
        try
        {
            this.SqlDataSourceImages.InsertCommand = "INSERT INTO Product_Image (Product_Id, Image) " +
                "VALUES ('" + strImageId + "','" + imageData + "')";
            try
            {
                this.SqlDataSourceImages.Insert();
            }
            catch (SqlException sqlex)
            {
                this.LabelStatus.Text = "An exception stopped the transaction being created\r\n" + sqlex.ToString();
            }

        }
        catch (Exception ex)
        {
        }
    }

[Rosen]

Hi Paul,

Usually such error is thrown when the binary data supplied into the BinaryImageControl is not valid image or has some custom headers applied. Actually it s thrown by the framework as FromStream method of the Image object does not support this scenario.
However can you please try our latest service pack (Q2 2009 SP1) of RadControls for ASP.NET AJAX as our developers has made some modification in order control to auto detect cases where custom header is applied and act appropriately.

Greetings,
Rosen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Mohammed Imaduddin]

My version is Telerik 2009.2.701.35

I get the same error if I  use an ObjectDataSource to populate my grid. But if I use sqlDataSource, then my images render fine provided  I do not use stored procedures.

Could you post an example with ObjectDataSource populating the grid?

[Rosen]

Hi Mohammed,

I have attached a small demo app which demonstrates how to populate GridBinaryImageColumn using ObjectDataSource control.

Sincerely yours,
Rosen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Mohammed Imaduddin]

Rosen,
Thanks for the example. Can you also show me an example with inserting or updating an item thru the same object datasource. My data does get inserted but then I get the
"The provided binary data may not be valid image or may contains unknown header" exception.

[Mohammed Imaduddin]

My issue has been resolved. Problem was more on the db side than the GridBinaryImageColumn side.

My field in the table was not big enough. After I changed my field to Varbinary(max) and also specified the samething in my stored procedure, everything started working like a charm.

Thanks Rosen for all your help.

[Mayank Srivastava]

Hi Mohammed,
Can you please post what changes did you do on the database side. I have changed the column data type to 'image' but no solution yet!

[Mohammed Imaduddin]

Change the datatype to Varbinary(max) and try it.

What error are you getting? Give me more details.

[Mayank Srivastava]

The Error message says - "The provided binary data may not be valid image or may contains unknown header."
I have changed the data type to varbinary(8000) as we are using SQL 2000. I checked in the debug mode that the length of the binary array is much less than the max size.

The insert executes fine but the refresh gives this error. The problem seems to be with the insert as the data  in the varbinary column looks like this - '0x0000000000000000000000000....'

[Mohammed Imaduddin]

Somehow your data is getting truncated.check your stored procs.

My businessObject "Photo" has a _imageBytes property which is a byte[ ] to store the image. This is sent to the stored proc which updates the database.

Are you using an objectdatasource or sqldatasource? 

[Mayank Srivastava]

My problem is solved too.
There were multiple issues including serialization-deserialization (to inset data at a later action) along with resizing the image (transferring from one stream to another) and appropriate data types. Due to these the data was being lost before insertion.

Thanks a bunch Mohammed, for pointing me to the right direction!

[Milind Raje]

I am having a slightly different issue. I don't get an error when I upload the image but it doesn't save it. However, if I remove the AjaxSetting for the RadGrid it uploads fine!! Like you see below, if I comment out the userAccountGrid AjaxSetting it works OK. However, I would like to have Ajax enabled on the tab that contains the User Account Grid.
thanks
milind

<telerik:RadAjaxManagerProxy ID="proxyManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="propertiesRadGrid">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="propertiesRadGrid" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
       <%-- <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="userAccountRadGrid">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="userAccountRadGrid" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>--%>
    </telerik:RadAjaxManagerProxy>


   <telerik:RadGrid ID="userAccountRadGrid" runat="server" DataSourceID="userLinqDataSource"
                            ShowHeader="false" GridLines="None" Width="900px" AllowAutomaticUpdates="True"
                            AllowAutomaticDeletes="True">
                            <MasterTableView HorizontalAlign="NotSet" AutoGenerateColumns="False" DataKeyNames="user_id"
                                DataSourceID="userLinqDataSource" Width="100%">
                                <Columns>
                                    <telerik:GridEditCommandColumn ButtonType="PushButton" UniqueName="EditCommandColumn"
                                        EditText="Edit Profile">
                                        <ItemStyle Width="20px" />
                                    </telerik:GridEditCommandColumn>
                                    <telerik:GridButtonColumn ConfirmText="<p>Are you sure you want to delete the User Account?</p>"
                                        ConfirmDialogType="RadWindow" ConfirmTitle="Delete user account" ButtonType="PushButton"
                                        CommandName="Delete" Text="Delete Profile" UniqueName="DeleteColumn">
                                        <ItemStyle Width="20px" />
                                    </telerik:GridButtonColumn>

                                    <telerik:GridBinaryImageColumn DataField="photo" HeaderText="Photo" UniqueName="Upload"
                                        Display="true" ImageAlign="NotSet" ImageHeight="80px" ImageWidth="80px" ResizeMode="Fit"
                                        DefaultImageUrl="~/images/no_photo.jpg" ReadOnly="false" >
                                        <HeaderStyle Width="10%" />
                                    </telerik:GridBinaryImageColumn>
                                    <telerik:GridBoundColumn DataField="user_name" HeaderText="Name" UniqueName="user_name"
                                        ReadOnly="false">
                                        <HeaderStyle HorizontalAlign="Left" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="email" HeaderText="Email" UniqueName="email"
                                        ReadOnly="false" Display="false" >
                                        <HeaderStyle HorizontalAlign="Left" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="zip" HeaderText="Zip" UniqueName="zip" ReadOnly="false"
                                        Display="false">
                                        <HeaderStyle HorizontalAlign="Left" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridDropDownColumn DataField="city_id" DropDownControlType="RadComboBox" Display="false"
                                        UniqueName="city_id" DataSourceID="citiesLinqDataSource" HeaderText="City" ReadOnly="false"
                                        ListTextField="city_name" ListValueField="city_id">
                                    </telerik:GridDropDownColumn>
                                    <telerik:GridDateTimeColumn DataField="dob" HeaderText="Date of Birth" UniqueName="dob"
                                        ReadOnly="false" Display="false" DataType="System.DateTime" PickerType="DatePicker" />
                                    <telerik:GridBoundColumn DataField="user_id" HeaderText="USER_ID" Display="false"
                                        SortExpression="user_id" UniqueName="user_id" ReadOnly="true">
                                    </telerik:GridBoundColumn>
                                </Columns>
                                <EditFormSettings ColumnNumber="2" CaptionDataField="user_name" CaptionFormatString="Please update information for {0}."
                                    FormCaptionStyle-Wrap="true">
                                    <FormTableItemStyle Wrap="false"></FormTableItemStyle>
                                    <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>
                                    <FormMainTableStyle GridLines="None" CellSpacing="0" CellPadding="3" BackColor="White"
                                        Width="100%" />
                                    <FormTableStyle CellSpacing="0" CellPadding="2" BackColor="ButtonFace" />
                                    <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>
                                    <EditColumn ButtonType="PushButton" UpdateText="Update" UniqueName="EditCommandColumn1"
                                        CancelText="Cancel">
                                    </EditColumn>
                                    <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
                                </EditFormSettings>
                            </MasterTableView>
                        </telerik:RadGrid>

[nissim]

I have the same problem,Do you have a solution for me?

[Martin]

Hello Guys,

As stated in our documentation the GridBinaryImageColumn will show a RadBinaryImage control in view mode and RadUpload in edit mode to upload an image. However RadUpload cannot upload files using AJAX calls (this is a limitation of the XmlHttpRequest component, used in all AJAX frameworks for asynchronous calls to the application). That is why in order to upload a file you should perform a full page postback instead.
More information on the matter is available in the Demo Instructions tab in this online example.

I hope this helps.

Greetings,
Martin
the Telerik team