Upload in Grid Errors

2 posts, 0 answers
  1. Chris
    Chris avatar
    120 posts
    Member since:
    Jun 2006

    Posted 08 Jul 2010 Link to this post

    Goal:
    Grid that displays data from Sql Database.  Included Binary Image field.
    Ability have CRUD with this grid

    Two tesing scenarios:
    I have a standard form with standard upload and grid.  Upload works fine.  Grid popluates as expected.

    I created a RadGrid with ItemTemplates to have my columns and Binary image.  Adding the data in MY standard form works, but trying to add data with the form template in RadGrid, the image to upload gives the sql cannot be converted to bytes (issue with binary conversion).  I also am getting some "undefined" error.  I am following the grid upload binary image sample on Telerik site.  I have included my files.

    ASPX:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebRole1.WebForm3" %>
      
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
    <head runat="server">
        <title></title>
         <script type="text/javascript">
            // <![CDATA[
             //On insert and update buttons click temporarily disables ajax to perform upload actions
             function conditionalPostback(sender, eventArgs) {
                 var theRegexp = new RegExp("\.UpdateButton$|\.PerformInsertButton$", "ig");
                 if (eventArgs.get_eventTarget().match(theRegexp)) {
                     var upload = $find(window['UploadId']);
      
                     //AJAX is disabled only if file is selected for upload
                     if (upload.getFileInputs()[0].value != "") {
                         eventArgs.set_enableAjax(false);
                     }
                 }
             }
      
             function validateRadUpload(source, e) {
                 e.IsValid = false;
      
                 var upload = $find(source.parentNode.getElementsByTagName('div')[0].id);
                 var inputs = upload.getFileInputs();
                 for (var i = 0; i < inputs.length; i++) {
                     //check for empty string or invalid extension
                     if (inputs[i].value != "" && upload.isExtensionValid(inputs[i].value)) {
                         e.IsValid = true;
                         break;
                     }
                 }
             }
                // ]]>
            </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <div>
        <span>Standard Form to add data</span>
        <table>
        <tr><td>Venue Name:</td><td><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td></tr>
        <tr><td>Event Name:</td><td><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td></tr>
        <tr><td>Event Website:</td><td><asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></td></tr>
        <%--<tr><td>Event Start Date:<telerik:RadDatePicker ID="RadDatePicker1" runat="server">
            </telerik:RadDatePicker></td></tr>
        <tr><td>Event End Date:
            <telerik:RadDatePicker ID="RadDatePicker2" runat="server">
            </telerik:RadDatePicker></td></tr>--%>
        <tr><td>Event Image Name:</td><td><asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></td></tr>
        <tr><td>Image:</td><td><asp:FileUpload ID="FileUpload1" runat="server" /></td></tr>
        <tr><td><asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /></td><td>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>  <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></td></tr>
        </table>
           <br />
            <asp:GridView ID="GridView1" runat="server">
            </asp:GridView>
            <br />
                  <span>RadGrid to add Data</span>   
                  <br />
                  <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" ClientEvents-OnRequestStart="conditionalPostback">
        </telerik:RadAjaxPanel>
         <telerik:RadProgressManager ID="RadProgressManager1" runat="server" />
            <telerik:RadProgressArea ID="RadProgressArea1" runat="server" />
    <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" 
            OnItemDataBound="RadGrid1_ItemDataBound" OnItemCreated="RadGrid1_ItemCreated" 
            AllowAutomaticInserts="True" AllowAutomaticDeletes="True" AllowAutomaticUpdates="True" 
            AutoGenerateColumns="False" GridLines="None">
    <MasterTableView datakeynames="idEvent"  CommandItemDisplay="Top"
            datasourceid="SqlDataSource1">
    <RowIndicatorColumn>
    <HeaderStyle Width="20px"></HeaderStyle>
    </RowIndicatorColumn>
      
    <ExpandCollapseColumn>
    <HeaderStyle Width="20px"></HeaderStyle>
    </ExpandCollapseColumn>
        <Columns>
            <telerik:GridBoundColumn DataField="idEvent" DataType="System.Int32" 
                HeaderText="idEvent" ReadOnly="True" SortExpression="idEvent" 
                UniqueName="idEvent" Visible="false">
            </telerik:GridBoundColumn>
      
             <telerik:GridTemplateColumn DataField="VenueName" 
                HeaderText="VenueName" SortExpression="VenueName" 
                UniqueName="VenueName">
                  <ItemTemplate>
                                <asp:Label runat="server" ID="lblVenueName" Text='<%# Eval("VenueName") %>' />
                            </ItemTemplate>
                            <EditItemTemplate>
                                <telerik:RadTextBox runat="server" Width="200px" ID="txbVenueName" Text='<%# Bind("VenueName") %>' />
    <asp:RequiredFieldValidator ID="Requiredfieldvalidator1" runat="server" ControlToValidate="txbVenueName"
    ErrorMessage="Please, enter a Venue name!" Display="Dynamic" SetFocusOnError="true" />
                            </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn DataField="EventName" HeaderText="EventName" 
                SortExpression="EventName" UniqueName="EventName">
                  <ItemTemplate>
                                <asp:Label runat="server" ID="lblEventName" Text='<%# Eval("EventName") %>' />
                            </ItemTemplate>
                            <EditItemTemplate>
                                <telerik:RadTextBox runat="server" Width="200px" ID="txbEventName" Text='<%# Bind("EventName") %>' />
    <asp:RequiredFieldValidator ID="Requiredfieldvalidator2" runat="server" ControlToValidate="txbEventName"
    ErrorMessage="Please, enter a Event name!" Display="Dynamic" SetFocusOnError="true" />
                            </EditItemTemplate>
            </telerik:GridTemplateColumn>
              <telerik:GridTemplateColumn DataField="EventWebsite" HeaderText="EventWebsite" 
                SortExpression="EventWebsite" UniqueName="EventWebsite">
                <ItemTemplate>
                                <asp:Label runat="server" ID="lblEventWebsite" Text='<%# Eval("EventWebsite") %>' />
                            </ItemTemplate>
                            <EditItemTemplate>
                                <telerik:RadTextBox runat="server" Width="200px" ID="txbEventWebsite" Text='<%# Bind("EventWebsite") %>' />
                            </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn DataField="EventStartDate" DataType="System.DateTime" 
                HeaderText="EventStartDate" SortExpression="EventStartDate" 
                UniqueName="EventStartDate">
                 <ItemTemplate>
                                <asp:Label runat="server" ID="lblEventStartDate" Text='<%# Eval("EventStartDate") %>' />
                            </ItemTemplate>
                            <EditItemTemplate>
                                <telerik:RadDatePicker ID="txbEventStartDate" runat="server">
                                </telerik:RadDatePicker>
                                
                            </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn DataField="EventEndDate" DataType="System.DateTime" 
                HeaderText="EventEndDate" SortExpression="EventEndDate" 
                UniqueName="EventEndDate">
                 <ItemTemplate>
                                <asp:Label runat="server" ID="lblEventEndDate" Text='<%# Eval("EventEndDate") %>' />
                            </ItemTemplate>
                            <EditItemTemplate>
                                <telerik:RadDatePicker ID="txbEventEventDate" runat="server">
                                </telerik:RadDatePicker>
                                
                            </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn DataField="EventImg" HeaderText="Image Name" 
                SortExpression="EventImg" UniqueName="EventImg">
                <ItemTemplate>
                                <asp:Label runat="server" ID="lblEventImg" Text='<%# Eval("EventImg") %>' />
                            </ItemTemplate>
                            <EditItemTemplate>
                                <telerik:RadTextBox runat="server" Width="200px" ID="txbEventImg" Text='<%# Bind("EventImg") %>' />
                            </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBinaryImageColumn DataField="EventImage" HeaderText="Image" UniqueName="Upload" ImageAlign="NotSet"
                            ImageHeight="80px" ImageWidth="80px" ResizeMode="Fit" DataAlternateTextField="EventImg"
                            DataAlternateTextFormatString="Image of {0}">
                            <HeaderStyle Width="10%" /> 
                        </telerik:GridBinaryImageColumn>
        </Columns>
      
    <EditFormSettings>
    <EditColumn UniqueName="EditCommandColumn1"></EditColumn>
    </EditFormSettings>
    </MasterTableView>
        </telerik:RadGrid>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                ConnectionString="<%$ ConnectionStrings:EKGDataConnectionString2 %>" 
                SelectCommand="SELECT * FROM [cus_Event]" 
                DeleteCommand="DELETE FROM [cus_Event] WHERE [idEvent] = @idEvent" 
                InsertCommand="INSERT INTO [cus_Event] ([VenueName], [EventName], [EventStartDate], [EventWebsite], [EventEndDate], [EventImg], [EventImage]) VALUES (@VenueName, @EventName, @EventStartDate, @EventWebsite, @EventEndDate, @EventImg, @EventImage)" 
                UpdateCommand="UPDATE [cus_Event] SET [VenueName] = @VenueName, [EventName] = @EventName, [EventStartDate] = @EventStartDate, [EventWebsite] = @EventWebsite, [EventEndDate] = @EventEndDate, [EventImg] = @EventImg, [EventImage] = @EventImage WHERE [idEvent] = @idEvent">
                <DeleteParameters>
                    <asp:Parameter Name="idEvent" Type="Int32" />
                </DeleteParameters>
                <InsertParameters>
                    <asp:Parameter Name="VenueName" Type="String" />
                    <asp:Parameter Name="EventName" Type="String" />
                    <asp:Parameter Name="EventStartDate" Type="DateTime" />
                    <asp:Parameter Name="EventWebsite" Type="String" />
                    <asp:Parameter Name="EventEndDate" Type="DateTime" />
                    <asp:Parameter Name="EventImg" Type="String" />
                    <asp:Parameter Name="EventImage" Type="Object" />
                </InsertParameters>
                <UpdateParameters>
                    <asp:Parameter Name="VenueName" Type="String" />
                    <asp:Parameter Name="EventName" Type="String" />
                    <asp:Parameter Name="EventStartDate" Type="DateTime" />
                    <asp:Parameter Name="EventWebsite" Type="String" />
                    <asp:Parameter Name="EventEndDate" Type="DateTime" />
                    <asp:Parameter Name="EventImg" Type="String" />
                    <asp:Parameter Name="EventImage" Type="Object" />
                    <asp:Parameter Name="idEvent" Type="Int32" />
                </UpdateParameters>
            </asp:SqlDataSource>
                       
      
            
        </div>
        </form>
    </body>
    </html>
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
    using Telerik.Mvc.Web.Helpers;
      
    namespace WebRole1
    {
        public partial class WebForm3 : System.Web.UI.Page
        {
            DataClasses1DataContext dc = new DataClasses1DataContext();
      
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    GridView1.DataSource = dc.cus_Events.ToList();
                    BindGrid("Binded");
                }
            }
      
            protected void Button1_Click(object sender, EventArgs e)
            {
                if (FileUpload1.HasFile && FileUpload1.PostedFile.ContentLength > 0)
                {
                    string venuename = TextBox1.Text;
                    string eventname = TextBox2.Text;
                    string eventweb = TextBox3.Text;
                    string filename = TextBox4.Text;
                    DateTime startdate = Convert.ToDateTime("01/01/2001 12:00:00 AM");
                    DateTime enddate = Convert.ToDateTime("01/05/2001 12:00:00 AM");
                    //DateTime startdate = RadControlHelper.ExtractDateValue(Request, "RadDatePicker1");
                    //DateTime enddate = RadControlHelper.ExtractDateValue(Request, "RadDatePicker2");
      
      
                    byte[] filebyte = FileUpload1.FileBytes;
      
      
                    System.Data.Linq.Binary fileBinary = new System.Data.Linq.Binary(filebyte);
                    dc.ADDEVENTS(venuename, eventname, startdate, enddate, eventweb, filename, fileBinary);
                    Label1.Text = "File Uploaded Successfully";
                }
      
            }
            private void BindGrid(string label)
            {
                GridView1.DataBind();
                Label2.Text = label;
            }
            protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
            {
                if (e.Item is GridEditableItem && e.Item.IsInEditMode)
                {
                    GridBinaryImageColumnEditor editor = ((GridEditableItem)e.Item).EditManager.GetColumnEditor("Upload") as GridBinaryImageColumnEditor;
                    RadAjaxPanel1.ResponseScripts.Add(string.Format("window['UploadId'] = '{0}';", editor.RadUploadControl.ClientID));
                }
            }
            protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
            {
                if (e.Item is GridEditableItem && e.Item.IsInEditMode)
                {
                    GridBinaryImageColumnEditor editor = ((GridEditableItem)e.Item).EditManager.GetColumnEditor("Upload") as GridBinaryImageColumnEditor;
                    TableCell cell = (TableCell)editor.RadUploadControl.Parent;
                    CustomValidator validator = new CustomValidator();
                    validator.ErrorMessage = "Please select file to be uploaded";
                    validator.ClientValidationFunction = "validateRadUpload";
                    validator.Display = ValidatorDisplay.Dynamic;
                    cell.Controls.Add(validator);
                }
      
            }
        }
    }

  2. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 14 Jul 2010 Link to this post

    Hi Chris,

    To identify the exact cause of the exception you are getting, we are going to need to reproduce the exact scenario you have. Consider opening a regular support ticket where you can send us some stripped down runnable project we can debug locally. This will help us greatly.

    Note that if you are using a custom edit form template where you have RadUpload, chances are you cannot use automatic data source operations. You need to find the control by ID and save the uploaded content manually in the database.

    Best wishes,
    Veli
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top