Upload with custom fields - Clear problem

[Ali Mohamad]

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">

<Columns>

<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">

<ItemTemplate>

<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 EnableRowHoverStyle="true" EnablePostBackOnRowClick="false">

<Scrolling AllowScroll="true" />

<Selecting AllowRowSelect="true" />

<ClientEvents OnRowCreating="radDummy" OnRowCreated="radDummy" />

</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) {

};

[Genady Sergeev]

Hi Ali Mohamad,

We have a fix for this situation, however, we need to know the exact version of the RadControls that you use. As soon as you post your version here I will supply you with the respective fix.

Sincerely yours,
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.

[Ali Mohamad]

Hi Genady,

I am running RadControls for ASP.NET AJAX Q3 2009, and the "Telerik.Web.UI.dll" has version "2009.3.1314.20".

Would your fix be different when I upgrade to the 2010 Q1+ version?

Thanks
Ali

[Genady Sergeev]

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.

[Ali Mohamad]

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 --%>

[Genady Sergeev]

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

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.