No file with upload in Grid in Multipage

[Philip Senechal]

I have a RadGrid that sits within a RadPanel on a RadMultiPage attached to a RadTabStrip :) Was that confusing enough?

I'm trying to implement a RadUpload on the RadGrid. I have followed example in the demo and added the JavaScript for the RadPanel to turn off Ajax on the postback.

I don't receive any errors, however, the file does not upload. Upon doing some testing on why this was occurring, I discovered that after clicking Insert on the grid edit form, my UploadedFiles.Count was zero. I can't seem to figure out why this is happening, but think it may be the way I'm calling my RadUpload in the code behind.

Here is my .aspx page

<%@ Page Language="VB" Debug="true" MasterPageFile="~/eis.master" AutoEventWireup="false" CodeFile="request.aspx.vb" Inherits="request" title="Enterprise Information Systems" %>
<%@ MasterType VirtualPath="~/eis.master" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="content" runat="Server">
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server" />

<telerik:radscriptblock id="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        //On insert and update buttons click temporarily disables ajax to perform upload actions
        function conditionalPostback(e, sender)
        {
            var theRegexp = new RegExp("\.UpdateButton$|\.PerformInsertButton$", "ig");
            if (sender.EventTarget.match(theRegexp))
            {
                var upload = $find(window['UploadId']);
                //AJAX is disabled only if file is selected for upload
                if(upload.getFileInputs()[0].value != "")
                {
                    sender.EnableAjax = false;
                }
            }
        }
    </script>
</telerik:radscriptblock>

<div class="titleLeft">
    <asp:Label ID="gridCountLabel" CssClass="titleSectionLeft" Text="Request # " runat="server" /><asp:Label ID="requestNo" CssClass="titleSectionLeftHighlight" runat="server" />
</div>
<div class="titleRight">
    <asp:Button class="button" ID="save_btn" Text="Save" runat="server" />
    <asp:Button class="button" ID="delete_btn" Text="Delete" runat="server" />
    <asp:Button class="button" ID="new_btn" Text="New" runat="server" />
</div>
<div class="clear"></div>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadMultiPage2">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadMultiPage2" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="CommentsGrid">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="CommentsGrid" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="AttachmentsGrid">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="AttachmentsGrid" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px" Transparency="25">
    <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading7.gif") %>' style="border:0; margin-top:90px;" />
</telerik:RadAjaxLoadingPanel>
<div style="min-width:950px; padding-top:10px;">
    <telerik:RadTabStrip id="RadTabStrip1" runat="server" skin="Telerik" SelectedIndex="0" MultiPageID="RadMultiPage1" Width="950">
        <Tabs>
            <telerik:RadTab ImageUrl="images/icon_package.gif" Text="Request" />
            <telerik:RadTab ImageUrl="images/icon_tasks.gif" Text="Tasks" />
            <telerik:RadTab ImageUrl="images/icon_savings.gif" Text="LOE/Savings" />
        </Tabs>
    </telerik:RadTabStrip>
    <div class="MultiPage" style="min-height:400px;">
        <telerik:RadMultiPage ID="RadMultiPage1" SelectedIndex="0" runat="server">
            <telerik:RadPageView ID="PageView1" runat="server">Request
            </telerik:RadPageView>
            <telerik:RadPageView ID="PageView2" runat="server">Tasks
            </telerik:RadPageView>
            <telerik:RadPageView ID="PageView3" runat="server">LOE/Savings
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>
</div>
<div style="min-width:950px; border-right:1px solid #dad9d8; border-left:1px solid #dad9d8; border-bottom:1px solid #dad9d8; margin-top:-1px;">
    <telerik:RadTabStrip id="RadTabStrip2" runat="server" skin="Telerik" SelectedIndex="0" MultiPageID="RadMultiPage2" Width="950">
        <Tabs>
            <telerik:RadTab ImageUrl="images/icon_comments.gif" Text="Comments" />
            <telerik:RadTab ImageUrl="images/icon_attachment.gif" Text="Attachments" />
            <telerik:RadTab ImageUrl="images/icon_history.gif" Text="History" />
            <telerik:RadTab ImageUrl="images/icon_time.gif" Text="Time Tracking" />
        </Tabs>
    </telerik:RadTabStrip>
    <div class="MultiPage2" style="min-height:50px;">
        <telerik:RadMultiPage ID="RadMultiPage2" SelectedIndex="0" runat="server">
            <telerik:RadPageView ID="PageView4" runat="server">
                <div style="min-width:950px;">
                    <telerik:RadGrid ID="CommentsGrid"
                        Skin="Telerik"
                        EnableAjax="false"
                        EnableLinqExpressions="false"
                        AllowSorting="true"
                        PageSize="3"
                        ShowHeader="false"
                        ShowFooter="true"
                        AllowPaging="true"
                        ShowGroupPanel="false"
                        GroupingEnabled="false"
                        OnNeedDataSource="CommentsGrid_NeedDataSource"
                        OnInsertCommand="CommentsGrid_InsertCommand"
                        OnUpdateCommand="CommentsGrid_UpdateCommand"
                        OnDeleteCommand="CommentsGrid_DeleteCommand"
                        ItemStyle-VerticalAlign="top"
                        AlternatingItemStyle-VerticalAlign="top"
                        runat="server">
                        <MasterTableView Name="master" CommandItemDisplay="Top" DataKeyNames="comment_id" Width="100%" HorizontalAlign="NotSet" AutoGenerateColumns="False" AllowSorting="true" GroupsDefaultExpanded="false" HierarchyLoadMode="ServerOnDemand" HierarchyDefaultExpanded="false" NoMasterRecordsText="There are no comments">
                            <CommandItemSettings AddNewRecordText="Add a Comment" RefreshText="Refresh" />
                            <Columns>
                                <telerik:GridBoundColumn UniqueName="comment_id" DataField="comment_id" AllowFiltering="true" Visible="false" />
                                <telerik:GridTemplateColumn HeaderText="Comment Date" UniqueName="comment_date" SortExpression="comment_date" Groupable="false">
                                    <ItemTemplate>
                                        <img src="images/icon_user.gif" alt="" style="vertical-align:middle;" />&nbsp;<asp:Label runat="server" ID="lbl_comment_name" Text='<%# Eval("comment_name") %>' />&nbsp;<span class="small">(<asp:Label runat="server" ID="lbl_comment_date" Text='<%# Eval("comment_date") %>' />)</span> | <asp:LinkButton ID="btnEdit" CssClass="gridLinkButton" Text="Edit" CommandName="Edit" runat="server" />&nbsp;<asp:LinkButton CssClass="gridLinkButton" ID="btnDelete" Text="Delete" CommandName="Delete" OnClientClick="javascript:return confirm('Delete this comment?')" runat="server" /><br />
                                        <asp:Label runat="server" ID="lbl_comment_text" Text='<%# Eval("comment_text") %>' />
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                            </Columns>
                            <EditFormSettings EditFormType="Template">
                                <FormTemplate>
                                    <div class="GridEditForm">
                                        <div class="PageContentTitle">Edit Comment</div>
                                        <div class="PageContentTextFields">
                                            <asp:TextBox ID="tb_comment_text" BorderStyle="solid" BorderWidth="1px" BorderColor="gray" runat="server" Width="100%" Rows="7" TextMode="MultiLine" Text='<%# Bind("comment_text") %>' />
                                        </div>
                                        <div class="PageContentButtons">
                                            <asp:ImageButton ID="btnUpdate" BorderWidth="0" style="vertical-align:middle;" ImageUrl='<%# IIf(DataBinder.Eval(Container, "OwnerTableView.IsItemInserted"), "images/grid/Insert.gif", "images/grid/Update.gif") %>' runat="server" CommandName='<%# IIf(DataBinder.Eval(Container, "OwnerTableView.IsItemInserted"), "PerformInsert", "Update") %>' />&nbsp;<asp:LinkButton CssClass="gridLinkButton" style="font:bold 14px Arial;" ID="linkbtnUpdate" Text='<%# IIf(DataBinder.Eval(Container, "OwnerTableView.IsItemInserted"), "Insert", "Update") %>' runat="server" CommandName='<%# IIf(DataBinder.Eval(Container, "OwnerTableView.IsItemInserted"), "PerformInsert", "Update") %>' />&nbsp;<asp:ImageButton ID="btnCancel" BorderWidth="0" style="vertical-align:middle;" ImageUrl="images/grid/Cancel.gif" runat="server" CausesValidation="false" CommandName="Cancel" />&nbsp;<asp:LinkButton CssClass="gridLinkButton" style="font:bold 14px Arial;" id="linkbtnCancel" Text="Cancel" CommandName="Cancel" runat="server" />
                                        </div>
                                    </div>
                                </FormTemplate>
                            </EditFormSettings>
                        </MasterTableView>
                        <ClientSettings AllowDragToGroup="True" AllowGroupExpandCollapse="True">
                            <Selecting AllowRowSelect="True" />
                            <Scrolling AllowScroll="false" UseStaticHeaders="True" />
                        </ClientSettings>
                        <PagerStyle Mode="NextPrevAndNumeric" />
                    </telerik:RadGrid>
                </div>
            </telerik:RadPageView>
            <telerik:RadPageView ID="PageView5" runat="server">
                <telerik:radajaxpanel id="RadAjaxPanel1" runat="server" clientevents-onrequeststart="conditionalPostback">
                <div style="min-width:950px;">
                    <telerik:RadGrid ID="AttachmentsGrid"
                        Skin="Telerik"
                        EnableAjax="false"
                        EnableLinqExpressions="false"
                        AllowSorting="true"
                        PageSize="3"
                        ShowHeader="false"
                        ShowFooter="true"
                        AllowPaging="true"
                        ShowGroupPanel="false"
                        GroupingEnabled="false"
                        OnNeedDataSource="AttachmentsGrid_NeedDataSource"
                        OnInsertCommand="AttachmentsGrid_InsertCommand"
                        OnDeleteCommand="AttachmentsGrid_DeleteCommand"
                        OnItemDataBound="AttachmentsGrid_ItemDataBound"
                        ItemStyle-VerticalAlign="top"
                        AlternatingItemStyle-VerticalAlign="top"
                        runat="server">
                        <MasterTableView Name="master" CommandItemDisplay="Top" DataKeyNames="attachment_id" Width="100%" HorizontalAlign="NotSet" AutoGenerateColumns="False" AllowSorting="true" GroupsDefaultExpanded="false" HierarchyLoadMode="ServerOnDemand" HierarchyDefaultExpanded="false" NoMasterRecordsText="There are no attachments">
                            <CommandItemSettings AddNewRecordText="Add an Attachment" RefreshText="Refresh" />
                            <Columns>
                                <telerik:GridBoundColumn UniqueName="attachment_id" DataField="attachment_id" AllowFiltering="true" Visible="false" />
                            </Columns>
                            <EditFormSettings EditFormType="Template">
                                <FormTemplate>
                                    <div class="GridEditForm">
                                        <div class="PageContentTextFields">
                                            <telerik:radprogressmanager id="RadProgressManager1" runat="server" />
                                            <telerik:RadUpload ID="RadUpload1" skin="Telerik" InitialFileInputsCount="1" ControlObjectsVisibility="None" runat="server" />
                                        </div>
                                        <div class="PageContentButtons">
                                            <asp:ImageButton ID="btnUpdate" BorderWidth="0" style="vertical-align:middle;" ImageUrl='<%# IIf(DataBinder.Eval(Container, "OwnerTableView.IsItemInserted"), "images/grid/Insert.gif", "images/grid/Update.gif") %>' runat="server" CommandName='<%# IIf(DataBinder.Eval(Container, "OwnerTableView.IsItemInserted"), "PerformInsert", "Update") %>' />&nbsp;<asp:LinkButton CssClass="gridLinkButton" style="font:bold 14px Arial;" ID="linkbtnUpdate" Text='<%# IIf(DataBinder.Eval(Container, "OwnerTableView.IsItemInserted"), "Insert", "Update") %>' runat="server" CommandName='<%# IIf(DataBinder.Eval(Container, "OwnerTableView.IsItemInserted"), "PerformInsert", "Update") %>' />&nbsp;<asp:ImageButton ID="btnCancel" BorderWidth="0" style="vertical-align:middle;" ImageUrl="images/grid/Cancel.gif" runat="server" CausesValidation="false" CommandName="Cancel" />&nbsp;<asp:LinkButton CssClass="gridLinkButton" style="font:bold 14px Arial;" id="linkbtnCancel" Text="Cancel" CommandName="Cancel" runat="server" />
                                        </div>
                                    </div>
                                </FormTemplate>
                            </EditFormSettings>
                        </MasterTableView>
                        <ClientSettings AllowDragToGroup="True" AllowGroupExpandCollapse="True">
                            <Selecting AllowRowSelect="True" />
                            <Scrolling AllowScroll="false" UseStaticHeaders="True" />
                        </ClientSettings>
                        <PagerStyle Mode="NextPrevAndNumeric" />
                    </telerik:RadGrid>
                </div>
                </telerik:radajaxpanel>
            </telerik:RadPageView>
            <telerik:RadPageView ID="PageView6" runat="server">History
            </telerik:RadPageView>
            <telerik:RadPageView ID="PageView7" runat="server">Time Tracking
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>
</div>

</asp:Content>

and here is the sub that handles the Insert Command and the ItemDataBound event

    Protected Sub AttachmentsGrid_InsertCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs)
        Dim filename As String = ""
        Dim uploader As RadUpload = TryCast(e.Item.FindControl("RadUpload1"), RadUpload)
        Dim targetFolder As String = Server.MapPath("~/attachments")
        Dim imageFile As UploadedFile = Nothing

        If uploader.UploadedFiles.Count > 0 Then
            imageFile = uploader.UploadedFiles(0)
            filename = imageFile.GetName()
            imageFile.SaveAs(Path.Combine(targetFolder, request_id & "_" & filename), True)

            Dim sql As String = ""
            sql = "INSERT INTO [tAttachments] ([user_id],[attachment_date],[request_id],[filename]) VALUES("
            sql += Session("sUserID") & ", "
            sql += "#" & DateTime.Now & "#, "
            sql += request_id & ", "
            sql += "'" & filename & "') "

            Try
                Dim connstr As String = ConfigurationManager.ConnectionStrings("LocalSqlServer").ToString
                Dim dbconn As New OleDb.OleDbConnection(connstr)
                dbconn.Open()
                Dim cmd As OleDb.OleDbCommand
                cmd = New OleDb.OleDbCommand(sql, dbconn)
                cmd.ExecuteNonQuery()
                dbconn.Close()
            Catch ex As Exception
                AttachmentsGrid.Controls.Add(New LiteralControl("Unable to add Attachment. Reason: " + ex.Message))
                e.Canceled = True
            End Try
        End If
    End Sub

    Protected Sub AttachmentsGrid_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs)
        If TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode Then
            Dim upload As RadUpload = TryCast(e.Item.FindControl("RadUpload1"), RadUpload)
            RadAjaxPanel1.ResponseScripts.Add(String.Format("window['UploadId'] = '{0}';", upload.ClientID))
        End If
    End Sub

Do I need to call RadUpload1 in a different way? Is that why my file count is coming back as zero?

Any help is greatly appreciated. Thanks.

[Philip Senechal]

I pulled everything out so that the page is just the RadAjaxPanel and the RadGrid with the RadUpload in it and I still get the same thing...not seeing that files are being uploaded.

Is there something else I need for the RadUpload when it's in a RadGrid that I'm missing?

[Philip Senechal]

I figured out what is causing the problem. It's the RadAjaxManager. If I remove it completely from the page, then the upload works fine. So it appears that the solution listed here either doesn't work or it doesn't work when the grid is placed within a MultiPage.

Is there any way that code can be modified to work in this scenario?

[Philip Senechal]

I'm SOOOOO close :)

Okay...so after poking around through a few posts, I found that I can apply the "stop ajax" JavaScript to the RadAjaxManager. So this is what I did:

<telerik:RadAjaxManager ID="RadAjaxManager1" onrequeststart="conditionalPostback" runat="server">

And I changed my ItemDataBound event for the grid to this:

    Protected Sub AttachmentsGrid_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs)
        If TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode Then
            Dim upload As RadUpload = TryCast(e.Item.FindControl("RadUpload1"), RadUpload)
            RadAjaxManager1.ResponseScripts.Add(String.Format("window['UploadId'] = '{0}';", upload.ClientID))
        End If
    End Sub

So...what happens now is everything is Ajaxified up until I actually click the Insert button for the grid which has the RadUpload control. I get the "loading" symbol, but it stops immediately, which I hope means that Ajax has indeed been disabled for the upload.

What happens though is that I still get zero for my uploaded file count, so I'm missing something.

I know I'm so close here...can you help me find what I'm missing? Thanks.

[Philip Senechal]

Okay...got it all working now thanks to another post I found :)

I had to change the JavaScript to look for my button id's and I added the script to the RadAjaxManager using a <ClientEvents> tag.

So all is good now...this is great! Just what I wanted.

[Anthony]

Can you post a sample of the Javascript? I'm having a similar problem.

Thanks

[Philip Senechal]

here is the JavaScript

function conditionalPostback(e, sender)
{
    var theRegexp = new RegExp("\.attachments_btnUpload$|\.attachments_linkbtnUpload$", "ig");
    if (sender.EventTarget.match(theRegexp))
    {
        var upload = $find(window['UploadId']);
        //AJAX is disabled only if file is selected for upload
        if(upload.getFileInputs()[0].value != "")
        {
            sender.EnableAjax = false;
        }
    }
}

here is the edit form with the upload control

                                    <EditFormSettings EditFormType="Template" FormStyle-BackColor="White" FormStyle-Font-Size="11px">
                                        <FormTemplate>
                                            <div class="GridEditForm">
                                                <div class="PageContentTextFields">
                                                    <telerik:RadProgressManager ID="RadProgressManager1" runat="server" />
                                                    <telerik:RadUpload ID="RadUpload1" Skin="Vista" InitialFileInputsCount="1" ControlObjectsVisibility="None"
                                                        Font-Size="11px" ForeColor="#333333" runat="server" />
                                                    <asp:ImageButton ID="attachments_btnUpload" BorderWidth="0" Style="vertical-align: middle;"
                                                        ImageUrl="images/AddRecord.gif" runat="server" CommandName="PerformInsert" />&nbsp;<asp:LinkButton
                                                            CssClass="gridLinkButton" Style="font: bold 14px Arial;" ID="attachments_linkbtnUpload"
                                                            Text="Upload" runat="server" CommandName="PerformInsert" />&nbsp;<asp:ImageButton
                                                                ID="attachments_btnCancel" BorderWidth="0" Style="vertical-align: middle;" ImageUrl="images/Cancel.gif"
                                                                runat="server" CausesValidation="false" CommandName="Cancel" />&nbsp;<asp:LinkButton
                                                                    CssClass="gridLinkButton" Style="font: bold 14px Arial;" ID="attachments_linkbtnCancel"
                                                                    Text="Cancel" CommandName="Cancel" runat="server" />
                                                </div>
                                            </div>
                                        </FormTemplate>
                                    </EditFormSettings>

here's the code behind for the grid insert

    Protected Sub AttachmentsGrid_InsertCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs)
        Dim filename As String = ""
        Dim uploader As RadUpload = TryCast(e.Item.FindControl("RadUpload1"), RadUpload)
        Dim targetFolder As String = Server.MapPath("~/attachments")
        Dim targetDir As New DirectoryInfo(targetFolder)
        Dim imageFile As UploadedFile = Nothing
        Dim filecheck As Boolean = False

        If uploader.UploadedFiles.Count > 0 Then
            imageFile = uploader.UploadedFiles(0)
            filename = imageFile.GetName()
            For Each file As FileInfo In targetDir.GetFiles()
                If file.Name = (request_id & "_" & filename) Then
                    filecheck = True
                End If
            Next

            If filecheck = False Then
                imageFile.SaveAs(Path.Combine(targetFolder, request_id & "_" & filename), True)

                Dim dt As DataTable = eis.GetDataTable("SELECT MAX(AtthID) AS AtthID FROM tAttachments")
                Dim maxAtthID As Integer
                If dt.Rows(0)("AtthID").Equals(System.DBNull.Value) Then
                    maxAtthID = 1
                Else
                    maxAtthID = dt.Rows(0)("AtthID") + 1
                End If

                Dim sql As String = ""
                sql = "INSERT INTO tAttachments (AtthID,CrtEmpID,AtthDt,ReqID,FileNm) VALUES("
                sql += maxAtthID & ", "
                sql += Session("sUserID") & ", "
                sql += "'" & DateTime.Now & "', "
                sql += request_id & ", "
                sql += "'" & request_id & "_" & filename & "') "

                Dim result As String = eis.WriteTableData(sql)
                If result <> "" Then
                    AttachmentsGrid.Controls.Add(New LiteralControl("Unable to add Attachment. Reason: " + result))
                    e.Canceled = True
                End If
            Else
                AttachmentsGrid.Controls.Add(New LiteralControl("File already exists in attachment directory."))
            End If
        End If
    End Sub

hope that helps a bit.