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

Upload with custom fields - Clear problem

5 Answers 148 Views

Upload (Obsolete)

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

Ali Mohamad asked on 23 Mar 2010, 07:19 PM

Hi,

I am having a problem with the Radupload functionality in relation to the Clear button and custom fields; when I click on the clear button the control removes itself and creates a new version but it does not seem to remove the previous instance of the custom field resulting in two copies of the field after the clear is complete. I used a Javascript example I found on this forum to add the custom field in the "OnClientAdded" event handler, but I guess the example is missing the cleanup logic. I included placeholders for the OnClientClearing and OnClientDeleting event handlers ready for some logic :-)
Below is the code, can you help please?

Explanation: the RadUpload control is being used within a grid that displays a list of document placeholders, when the document does not have an attached document, the RadUpload control is displayed, otherwise it is hidden and disabled. Documents' Streams are being uploaded to a database using the dynamic property docid and docbarcode. BTW, there is a save button above the grid (not displayed in code) that causes a full page postback.

Thank you
Ali M.

UploadDocuments.aspx

<telerik:RadGrid ID="RadGrid1" runat="server" AllowMultiRowSelection="false" GridLines="None"

Width="100%" Height="500px" AllowSorting="true" EnableAjaxSkinRendering="true"

EnableViewState="true" AutoGenerateColumns="false">

<MasterTableView AllowAutomaticUpdates="true" AutoGenerateColumns="false" AllowCustomSorting="true"

AllowNaturalSort="false" NoMasterRecordsText="This item has no documents">

<telerik:GridBoundColumn UniqueName="DocumentID" DataField="DocumentID" HeaderText="ID" Display="false"></telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Barcode" DataField="Barcode" HeaderText="Barcode" Display="true" ItemStyle-Width="110px"></telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Type" DataField="Type" HeaderText="Document Type" Display="true" ItemStyle-Width="200px"></telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="FolderID" DataField="ID" HeaderText="FolderID" Display="false"></telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ReceivedOn" DataField="Received On" HeaderText="Received On" Display="true" ItemStyle-Width="70px"></telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="LinkedOn" DataField="Linked On" HeaderText="Linked On" Display="true" ItemStyle-Width="70px"></telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="FileType" DataField="File Type" HeaderText="File Type" Display="true" ItemStyle-Width="130px"></telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="eDocSource" DataField="eDocSource" HeaderText="eDocSource" Display="false"></telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Ref1" DataField="Ref1" HeaderText="Ref1" Display="false"></telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn UniqueName="Linked" DataField="Linked" HeaderText="Linked" Display="false"></telerik:GridCheckBoxColumn>

<telerik:GridTemplateColumn UniqueName="doclink" ItemStyle-Width="300px">

<telerik:RadUpload ID="RadUpload1" runat="server" MaxFileInputsCount="1" RegisterWithScriptManager="true"

TargetFolder="" OnValidatingFile="RadUpload1_ValidatingFile" EnableFileInputSkinning="true"

ControlObjectsVisibility="RemoveButtons" Visible='<%# IIf(DataBinder.Eval(Container.DataItem, "Linked"), false, true) %>'

Enabled='<%# IIf(DataBinder.Eval(Container.DataItem, "Linked"), false, true) %>'

docid='<%# DataBinder.Eval(Container.DataItem, "DocumentID") %>' InputSize="25"

docbarcode='<%# DataBinder.Eval(Container.DataItem, "Barcode") %>'

OnClientAdded="OnClientAddedHandler" OnClientDeleting="OnClientDeleting" OnClientClearing="uploadFileClearing"

OnClientFileSelected="uploadFileSelected">

</telerik:RadUpload>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</ClientSettings>

</telerik:RadGrid>

UploadDocuments.aspx.vb

'*** some validation here - removed from example

Try

_sDocid = TryCast(sender, Telerik.Web.UI.RadUpload).Attributes.Item("docid")

Catch ex1 As Exception

_isValid = False

End Try

If Not _isValid Then

'** deal with invalid upload

Return

End If

Try

_barcode = TryCast(sender, Telerik.Web.UI.RadUpload).Attributes.Item("docbarcode")

Catch ex1 As Exception

_isValid = False

End Try

If Not _isValid Then

'** deal with invalid upload

Return

End If

Try

_docName = e.UploadedFile.GetFieldValue("Name")

_docName = _docName.Trim()

Catch ex1 As Exception

_docName = ""

End Try

If _docName.Length = 0 Then

_docName = String.Format("Document [{0}]", _barcode)

End If

'** process the upload

'** -- code removed from example

uploaddocuments.js

var numberOfCustomFields = 0;

function OnClientAddedHandler(sender, eventArgs) {

var inputRow = eventArgs.get_row();

var uList = inputRow.parentNode;

var count = 0;

// add a new row for a Title field

newRow = document.createElement("li");

count++;

uList.insertBefore(newRow, inputRow);

var label = document.createElement("span");

label.innerHTML = "Name : ";

label.style.width = "150px";

label.style.fontSize = "10pt";

label.style.fontWeight = "bold";

input = document.createElement("input");

input.type = "text";

input.style.width = "200px";

input.id = input.name = sender.getID("Name");

newRow.appendChild(label);

newRow.appendChild(input);

//add a File label in front of the file input

var fileInputSpan = inputRow.getElementsByTagName("span")[0];

label = document.createElement("span");

label.innerHTML = "File :    ";

label.style.width = "150px";

label.style.fontSize = "10pt";

label.style.fontWeight = "bold";

label.style.verticalAlign = "middle";

label.style.paddingTop = "5px";

inputRow.insertBefore(label, fileInputSpan);

numberOfCustomFields = count;

};

function uploadFileClearing(sender, eventArgs) {

};

function OnClientDeleting(sender, eventArgs) {

};

5 Answers, 1 is accepted

answered on 30 Mar 2010, 10:37 AM

additionalfields.zip

Hello Ali Mohamad,

You can find sample project demonstrating the approach as an attachment. The solution will work with the latest Telerik.Web.UI version as well as with the version that you currently use.

Best wishes,
Genady Sergeev
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.

answered on 30 Mar 2010, 06:01 PM

Thanks Genady for the example, but it is not working for me.
I am getting an error in the browser that "$telerik" is not defined; I did enable jquery and its intellisense is working in vs but the error occurs in the browser. This might explain the reason why the clear button does not correctly re-add the custom field. Any ideas?
Below is the current state of the code...
Ali

uploaddocuments.aspx

    
            <head runat="server"> 
        
              <title></title> 
        
              <link type="text/css" href="styles.css" rel="Stylesheet" /> 
        
              <script src="js/uploaddocuments.js" type="text/javascript"></script> 
        
              <script src="js/jquery-1.2.6.js" type="text/javascript"></script> 
        
              <script language="javascript" type="text/javascript"> 
        
                var _idAddField; 
        
                var _uploadIndex = 0; 
        
                var $ = $telerik.$; 
        
                function onClientAddedHandler(sender, eventArgs) { 
        
                  var _inputRow = eventArgs.get_row(); 
        
                  var _label = document.createElement("span"); 
        
                  _label.innerHTML = "Name : "; 
        
                  _label.style.width = "150px"; 
        
                  _label.style.fontSize = "10pt"; 
        
                  _label.style.fontWeight = "bold"; 
        
                  _input = document.createElement("input"); 
        
                  _input.type = "text"; 
        
                  _input.style.width = "200px"; 
        
                  _input_input.id = _input.name = sender.getID("Name"); 
        
                  var _wrapper = $('<div></div>').append(_label).append(_input); 
        
                  $(_wrapper) 
        
                    .insertBefore(".ruInputs li:eq(" + _uploadIndex + ") .ruFileWrap"); 
        
                  _uploadIndex++; 
        
                  //add a File label in front of the file input  
        
                  var fileInputSpan = _inputRow.getElementsByTagName("span")[1]; 
        
                  _label = document.createElement("span"); 
        
                  _label.innerHTML = "File :&nbsp;&nbsp;&nbsp;&nbsp;"; 
        
                  _label.style.width = "150px"; 
        
                  _label.style.fontSize = "10pt"; 
        
                  _label.style.fontWeight = "bold"; 
        
                  _label.style.verticalAlign = "middle"; 
        
                  _label.style.paddingTop = "5px"; 
        
                  _inputRow.insertBefore(_label, fileInputSpan); 
        
                }; 
        
                function onClientClearingHandler(sender, args) { 
        
                  _uploadIndex = $(args.get_row()).index(); 
        
                }     
        
              </script> 
        
            </head> 
        
            <body> 
        
              <form id="form1" runat="server"> 
        
              <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        
                <Scripts> 
        
                   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
        
                   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
        
                   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> 
        
                </Scripts> 
        
              </asp:ScriptManager> 
        
            <%--  BEGIN radGrid here --%> 
        
            <telerik:GridTemplateColumn UniqueName="doclink" ItemStyle-Width="300px"> 
        
              <ItemTemplate> 
        
                <telerik:RadUpload ID="RadUpload1" runat="server" MaxFileInputsCount="1" RegisterWithScriptManager="true" 
        
                  TargetFolder="" OnValidatingFile="RadUpload1_ValidatingFile" EnableFileInputSkinning="true" 
        
                  ControlObjectsVisibility="ClearButtons" Visible='<%# IIf(DataBinder.Eval(Container.DataItem, "Linked"), false, true) %>' 
        
                  Enabled='<%# IIf(DataBinder.Eval(Container.DataItem, "Linked"), false, true) %>' 
        
                  docid='<%# DataBinder.Eval(Container.DataItem, "DocumentID") %>' InputSize="25" 
        
                  docbarcode='<%# DataBinder.Eval(Container.DataItem, "Barcode") %>' 
        
                  OnClientAdded="onClientAddedHandler" OnClientClearing="onClientClearingHandler"> 
        
                </telerik:RadUpload> 
        
              </ItemTemplate> 
        
            </telerik:GridTemplateColumn> 
        
            <%--  END radGrid here --%>

answered on 31 Mar 2010, 11:43 AM

Hello Ali Mohamad,

The reason for this malfunction is because the line var $ = $telerik.$ is in the head tag and is being executed before ScriptManager has loaded the scripts. In order to workaround this please move var $ = $telerik.$ inside both onClientAddedHandler and onClientCliearingHandler. Moreover, you don't need to manually include jQuery using Script tag, it is automatically shipped to your pages as long as there are RAD controls on it.

Best wishes,
Genady Sergeev
the Telerik team