This is a migrated thread and some comments may be shown as answers.

GridBinaryImageColumn - no hair left!

13 Answers 556 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 27 Aug 2009, 06:05 PM
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) 
        { 
        } 
    }    

13 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 28 Aug 2009, 06:46 AM
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.
0
Mohammed Imaduddin
Top achievements
Rank 1
answered on 25 Sep 2009, 04:15 PM
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?
0
Rosen
Telerik team
answered on 29 Sep 2009, 09:29 AM
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.
0
Mohammed Imaduddin
Top achievements
Rank 1
answered on 30 Sep 2009, 08:08 PM
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.
0
Mohammed Imaduddin
Top achievements
Rank 1
answered on 01 Oct 2009, 05:29 PM
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.
0
Mayank Srivastava
Top achievements
Rank 1
answered on 17 Mar 2010, 09:37 PM
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!
0
Mohammed Imaduddin
Top achievements
Rank 1
answered on 17 Mar 2010, 09:41 PM
Change the datatype to Varbinary(max) and try it.

What error are you getting? Give me more details.
0
Mayank Srivastava
Top achievements
Rank 1
answered on 17 Mar 2010, 09:52 PM
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....'
0
Mohammed Imaduddin
Top achievements
Rank 1
answered on 17 Mar 2010, 10:03 PM
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? 
0
Mayank Srivastava
Top achievements
Rank 1
answered on 19 Mar 2010, 08:20 PM
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!
0
Milind Raje
Top achievements
Rank 1
answered on 07 Nov 2010, 10:08 PM
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>
0
nissim
Top achievements
Rank 1
answered on 20 Aug 2012, 09:33 AM
I have the same problem,Do you have a solution for me?
0
Martin
Telerik team
answered on 23 Aug 2012, 10:34 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Paul
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Mohammed Imaduddin
Top achievements
Rank 1
Mayank Srivastava
Top achievements
Rank 1
Milind Raje
Top achievements
Rank 1
nissim
Top achievements
Rank 1
Martin
Telerik team
Share this question
or