RadUpload inside a grid

[Rodrigo Morales]

Hi,
I can't make a RadUpload work inside a RadGrid. I tried in at least two different ways:

In the first try I just added my RadUpload with a MaxCountofInputFiles = 1. Then, in the behind code, I just tried to find the radUpload control

RadUpload upload = (RadUpload)e.Item.FindControl("UploadControl");

and tried to use the upload.UploadedFiles collection. However, the UploadedFiles collection is ALWAYS empty using this approach.

The other approach is the one used in the image example, but it didn't work. The UploadedFiles collection is still empty anyway. Below are the grid and the code behind.

<script type="text/javascript">
            //<![CDATA[

            function conditionalPostback(e, sender) {

                var theRegexp = new RegExp("\.UpdateButton$|\.PerformInsertButton$", "ig");
                if (sender.get_eventTarget().match(theRegexp)) {

                    var upload = $find(window['UploadControl']);
                    //AJAX is disabled only if file is selected for upload
                    if (upload.getFileInputs()[0].value != "") {
                        sender.set_enableAjax(false);
                    }
                }
            }
            function validateRadUpload(source, e) {
                alert("true");
                e.IsValid = false;
                alert("Entro al metodo culero");
                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)) {
                        alert(inputs[i].value);
                        e.IsValid = true;
                        break;
                    }
                }
            }
            //]]>
     </script>

            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="DefaultMasterScriptManager">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="dgFileUploader" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

           <h2>File Uploader</h2><br />
                <telerik:RadAjaxPanel ID="FileUploaderPanel" runat="server" ClientEvents-OnRequestStart="conditionalPostback">
                <telerik:RadInputManager ID="RadInputManager2" runat="server">
                    <telerik:RegExpTextBoxSetting BehaviorID="RegExpItemName" InitializeOnClient="false"
                        ErrorMessage="Invalid format" InvalidCssClass="invalid"
                        ValidationExpression="([A-Za-z]([A-Za-z0-9])*)">
                    <Validation IsRequired="true" />
                    </telerik:RegExpTextBoxSetting>
                </telerik:RadInputManager>
                <telerik:RadGrid ID="dgFileUploader" DataSourceID="FileUploaderDataSource" runat="server"
                    AutoGenerateColumns="False" GridLines="None" AllowAutomaticDeletes="True" AllowAutomaticInserts="False"
                    Skin="Outlook"
                    onitemcommand="dgFileUploader_ItemCommand"
                    onitemcreated="dgFileUploader_ItemCreated"
                    OnItemDataBound="dgFileUploader_ItemDataBound"
                    >
                <HeaderContextMenu EnableTheming="True">
                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                </HeaderContextMenu>

                <MasterTableView CommandItemDisplay="Top" DataKeyNames ="Id" DataSourceID="FileUploaderDataSource">
                    <CommandItemTemplate>
                      <asp:LinkButton ID="LinkButton2" runat="server" CommandName="InitInsert" Visible='<%# !dgFileUploader.MasterTableView.IsItemInserted %>'>
                        Add New Record
                      </asp:LinkButton><br />
                    </CommandItemTemplate>
                <RowIndicatorColumn>
                    <HeaderStyle Width="20px"></HeaderStyle>
                </RowIndicatorColumn>

                <ExpandCollapseColumn>
                    <HeaderStyle Width="20px"></HeaderStyle>
                </ExpandCollapseColumn>

                <Columns>
                    <telerik:GridBoundColumn DataField="ItemName" HeaderText="Item Name" SortExpression="ItemName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="UploadDate" HeaderText="Upload Date(mm/dd/yyyy)" SortExpression="UploadDate" DataType="System.DateTime">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="OriginalFileName" HeaderText="Original File Name" SortExpression="OriginalFileName">
                    </telerik:GridBoundColumn>
                     <telerik:GridButtonColumn UniqueName="Delete" ButtonType="LinkButton" CommandName="Delete" Text="Remove">
                    </telerik:GridButtonColumn>
                </Columns>

                <EditFormSettings EditFormType="Template">
                    <EditColumn UniqueName="EditCommandColumn1"></EditColumn>
                    <FormTemplate>
                        <table cellspacing="2" cellpadding="1" width="100%" border="0">
                            <tr>
                                <td>
                                    Item Name:
                                <asp:TextBox Width="200px" ID="ItemNameTextBox" runat="server" EnableViewState="true" Text=""></asp:TextBox>
                                <%--asp:requiredfieldvalidator id="ReqTextBox1" runat="server" ErrorMessage="Item Name is required field"
                                    EnableClientScript="False" ControlToValidate="TextBox1" Display="Static"></asp:requiredfieldvalidator--%>
                                    <br />
                                    <telerik:RadProgressManager ID="RadProgressManager1" runat="server" />
                                    <telerik:RadUpload InputSize="100" CssClass="content" ID="UploadControl" EnableViewState="true" runat="server" AllowedFileExtensions=".doc,.docx" ControlObjectsVisibility="None" OverwriteExistingFiles="True" MaxFileInputsCount="1">
                                    </telerik:RadUpload>
                                    <telerik:RadProgressArea ID="ProgressArea" runat="server" />
                                 </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:LinkButton ID="Button3" runat="server" Text='<%# (Container is GridEditFormItem) ? "Save" : "Update" %>'
                                        CommandName='<%# (Container is GridEditFormItem) ? "PerformInsert" : "Update" %>'></asp:LinkButton>
                                    <asp:LinkButton ID="Button4" runat="server" Text="Cancel" CausesValidation="false"
                                        CommandName="Cancel"></asp:LinkButton>
                                </td>
                            </tr>
                        </table>
                    </FormTemplate>
                </EditFormSettings>
            </MasterTableView>

            <FilterMenu EnableTheming="True">
                <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
            </FilterMenu>
        </telerik:RadGrid>
        <pp:ObjectContainerDataSource ID="FileUploaderDataSource" runat="server"
            DataObjectTypeName = "FacultyPortalService.BusinessEntities.FileUploader" runat="server"
            OnDeleted="FileUploader_Deleted"
            />
        </telerik:RadAjaxPanel>

As you can see, I'm taking the Script manager from a Master page. That script manager is an asp:scriptmanager.

Below are the Page_load, the Item Data Bound and the itemcommand and created.

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                this._presenter.OnViewInitialized();
            }

            profileVitaeTab.Visible = !_presenter.ProfileApprovalInReview();

            this._presenter.OnViewLoaded();

            if (!IsPostBack)
            {
                this.dgFileUploader.DataBind();
                this.DataBind();
            }

        }

        protected void dgFileUploader_ItemDataBound(object sender, GridItemEventArgs e)
        {

         if (e.Item is GridEditableItem && e.Item.IsInEditMode )
         {
             RadUpload upload = (RadUpload)e.Item.FindControl("UploadControl");
            FreelanceItemPanel.ResponseScripts.Add(String.Format("window['UploadControl'] = '{0}';", upload.ClientID));

         }
        }

               protected void dgFileUploader_ItemCommand(object source, GridCommandEventArgs e)
        {
            if (e.CommandName == RadGrid.InitInsertCommandName) //"Add new" button clicked
            {
                e.Canceled = true;
                e.Item.OwnerTableView.InsertItem();
                GridEditableItem insertedItem = e.Item.OwnerTableView.GetInsertItem();
            }

            if (e.Item.ItemType == GridItemType.EditFormItem)
            {
                if (e.CommandName == RadGrid.PerformInsertCommandName)
                {
                    //e.Canceled = false;
                    //BindInvalidFiles();
                    var itemNameTextBox = (TextBox)e.Item.FindControl("ItemNameTextBox");
                    var radUploadControl = (RadUpload)e.Item.FindControl("UploadControl");

                    if (itemNameTextBox == null || radUploadControl == null)
                    {
                        return;
                    }

                    ParseFile(radUploadControl.UploadedFiles, itemNameTextBox.Text, 1);
                }
            }
        }

        protected void dgFileUploader_ItemCreated(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridEditableItem && e.Item.IsInEditMode)
            {
                GridEditFormItem editedItem = e.Item as GridEditFormItem;

                TextBox txt1 = editedItem.FindControl("ItemNameTextBox") as TextBox;
                RegExpTextBoxSetting regExpSetting = (RegExpTextBoxSetting)RadInputManager2.GetSettingByBehaviorID("RegExpItemName");
                regExpSetting.TargetControls.Add(new TargetInput(txt1.UniqueID, true));
            }

            if (e.Item is GridEditableItem && e.Item.IsInEditMode)
            {
                GridEditableItem editItem = (GridEditableItem)e.Item;
                RadUpload upload = (RadUpload)e.Item.FindControl("UploadControl");
                CustomValidator validator = new CustomValidator();
                validator.ErrorMessage = "Please select file to be uploaded";
                validator.ClientValidationFunction = "validateRadUpload";
                validator.Display = ValidatorDisplay.Dynamic;

                ((WebControl)upload.Parent).Controls.Add(validator);

            }
        }

Warmest Regards

[Genady Sergeev]

Hello Rodrigo Morales,

Do you modify the MasterPage ID during OnInit? Can you try to access the uploaded files using Telerik.Web.UI.RadUploadContext.UploadedFiles, are there files in the collection?

I can see that you AJAXify your grid both with RadAjaxManager and RadAjaxPanel. You will need to attach the conditionalPostback function to the AJAX manager as well.

All the best,
Genady Sergeev
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.

[Rodrigo Morales]

We could make it work. To do so, we removed the RadAjaxManager and its inside components. The conditional postback was already in the panels. The big difference was the RadAjaxManager.

Regards,
Rodrigo Morales.

[Osmon]

Hi,
       I have the same senario. I have a radajaxmanager in the master page and a radajaxPanel in the contentpage having the radgrid that has radupload.
      Now, everything is working fine except the client validation for the radupload stop working since i started using the radajaxmanager in the master page.
      So, if i have valid extensions. it uploads the file. BUT if the file extension is not valid; it does not show the error message text on the radupload popup instead it just vanished but never uploads the file. Now, i still need to show validation to the user although action wise its working fine.
        how can i apply the vaoidation. what chnages need to be done to the "validateRadUpload" function ?

I am looking forward to you. Thanks,

Regards,

Osman

[Genady Sergeev]

Hello Osmon,

We have already answered to you in the support thread. Could you please take a look there?

Best wishes,
Genady Sergeev
the Telerik team