Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Upload in Grid Errors

1 Answer 105 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 09 Jul 2010, 01:03 AM

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);
            }
  
        }
    }
}

1 Answer, 1 is accepted

Sort by
0
Veli
Telerik team
answered on 14 Jul 2010, 11:00 AM
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
Tags
AsyncUpload
Asked by
Chris
Top achievements
Rank 1
Answers by
Veli
Telerik team
Share this question
or