Javascript for adding additional Text fields to RadASync Upload

[h@r!]

Hi ,
I am using Rad AsyncUpload and to add additionla fields like Description  I am using the javascript :
function addTitle(radUpload, args) {
              

  var curLiEl = args.get_row();<br>
                var firstInput = curLiEl.getElementsByTagName("input")[0];               <br>
                var table = document.createElement("table");           <br>
<br>
                <br>
                //A new row for a Description field                <br>
                row = table.insertRow(-1);<br>
                cell = row.insertCell(-1);<br>
                input = CreateInput("Desc", "text");           <br>
                label = CreateLabel("Description", input.id);<br>
                cell.appendChild(label);<br>
                cell = row.insertCell(-1);<br>
                cell.appendChild(input);<br>
<br>
                //Add a File label in front of the file input<br>
                var fileInputSpan = curLiEl.getElementsByTagName("span")[0];<br>
                var firstNode = curLiEl.childNodes[0];<br>
                label = CreateLabel("File", radUpload.getID());<br>
                curLiEl.insertBefore(label, firstNode);<br>
                curLiEl.insertBefore(table, label);<br>
              }<br>
<br>
            function CreateLabel(text, associatedControlId) {<br>
                var label = document.createElement("label");<br>
                label.innerHTML = text;<br>
                label.setAttribute("for", associatedControlId);<br>
                label.style.fontSize = 12;<br>
                return label;<br>
            }<br>
<br>
            function CreateInput(inputName, type) {<br>
                var input = document.createElement("input");<br>
                input.type = type;<br>
                input.name = inputName;<br>
                input.style.height = "18px";<br>
                input.style.width = "130px";<br>
                input.style.fontSize = "12px";<br>
                input.style.fontFamily = "Calibri";               <br>
                return input;<br>
            }

for OnClientAdded="addTitle" event of RadAsync File Upload.I am able to display them in a row by row.But I need to display them in a same <td> of the AsyncUploadI tried out by changing the javascript but could not found a solution for it.
Please help me out with a suggestion

Thanks In Advance,
h@r!.

[Yana]

Hello,

I'm not sure I understand the requirement, actually RadAsyncUpload is not rendered as <table> element. Please send us more details and a screenshot of the needed layout.

Best regards,
Yana
the Telerik team

[h@r!]

Hi Yana,

Please find the atached Screenshot.
Please let me know how to change the javascript so that I can get it in the required format.At the same time after adding a file if I added another file and want to remove it then it should also remove the additonal filed along with the file.

Thanks,
h@r!.

[Yana]

Hello h@r!,

Please modify your code like this:

var curLiEl = args.get_row();
var firstInput = curLiEl.getElementsByTagName("input")[0];
var table = document.createElement("table");
table.className = "tableCss";

and add the following css styles to the page:

<style type="text/css">
    .tableCss {float: left; }
    div.RadUpload { width: 500px; }
</style>

to align the controls in one row.

Kind regards,
Yana
the Telerik team

[h@r!]

Hi Yana,

Nice to see to your reply :) .Thanks for the reply.
Its working fine for the initial page load.But when I am trying to add multiple files I am facing a design issue.Please find the attached screen shots.Please provide me with the better solution ASAP.

Thanks in Advance.
h@r!.

[Yana]

Hello h@r!,

Please add the following css style in order to fix this:

div.RadUpload .ruInputs li { clear:both;}

Regards,
Yana
the Telerik team

[h@r!]

Hi Yana,

Thanks for the reply.Its working like a charm..:)
One small thing again...as here I am creating the html textbox I need to customize it so that it looks like the rad textbox. So can you please let me know the css to be added for this html textbox so that it looks like rad textbox.

Thanks,
h@r!.

[h@r!]

Hi Yana,

I have resolved the issue myself by adding

input.style.border = "1px solid #768ca5";

in the javascript where we are creating the textbox.

Thanks Once again.
h@r!.

[h@r!]

Hi Yana,

Please find the attached screen shots.I am uisng the following styles for the page and the controls.

.tableCss <br>{<br>    float: left;<br>    margin-top:-3px; <br>    margin-left:-1%;<br>}<br>.lableCss <br>{<br>    margin-right : 4%;<br>    font-family:Calibri;<br>    font-size:12px;<br>}    <br><br>.inputCss <br>{<br>    border:1px solid #768ca5;<br>    font-family:Calibri;<br>    font-size:12px;<br>    width:250px;<br>    margin-right:28%;<br>    height:15px;<br>}<br>

<style type="text/css"><br>    <br>    <br>div.RadUpload { width: 950px;}<br>    div.RadUpload .ruInputs li { clear:both;margin-left:0.8%;}<br><br></style>

There is a mismatch between the design can I know how the CSS can be changed to rad upload so that the design will be same in all the browsers.

Thanks,
h@r!.

[Simon]

Hello h@r!,

We will be unable to help you resolve the inconsistencies in the display with screenshots only. Seeing a sample page is the best way to handle this task.

In this sense, please either open a support ticket and send us a project there or provide a live URL where we can inspect the HTML and CSS of your page.

Thank you in advance.

Greetings,
Simon
the Telerik team

[h@r!]

Hi Yana,

Here I am Sending you the html code.Please find it.When I remove the .tablecss the design is same in all the resolutions.But I need to display them in a single row I need to add it to the code.But if I do that the design change according to the resolution.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TESTATTACHMENT.aspx.cs" Inherits="ASPX_TESTATTACHMENT" %>
<%@ 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">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">    
  .tableCss     
  {
      float: left;  
      margin-top:-3px;    
      margin-left:-1%;}
  .lableCss    
  {
       margin-right : 4%;  
        font-family:Calibri;  
         font-size:12px;}   
  .inputCss   
  {
      border:1px solid #768ca5;  
      font-family:Calibri;   
      font-size:12px; 
      width:250px;  
    margin-right:28%;   
    height:15px;}
div.RadUpload { width: 950px;}
    div.RadUpload .ruInputs li { clear:both;margin-left:0.8%;}

</style>
</head>

 <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript">

            
            function onRequestStart(sender, args) {
                if (args.get_eventTarget().indexOf("ExportToExcelButton") >= 0 ||
                    args.get_eventTarget().indexOf("ExportToWordButton") >= 0 ||
                    args.get_eventTarget().indexOf("ExportToPdfButton") >= 0 ||
                    args.get_eventTarget().indexOf("ExportToCsvButton") >= 0) {
                    args.set_enableAjax(false);
                }
            }
            window.blockConfirm = function(text, mozEvent, oWidth, oHeight, callerObj, oTitle) {

                var ev = mozEvent ? mozEvent : window.event; //Moz support requires passing the event argument manually
                //Cancel the event
                ev.cancelBubble = true;
                ev.returnValue = false;
                if (ev.stopPropagation) ev.stopPropagation();
                if (ev.preventDefault) ev.preventDefault();

                //Determine who is the caller
                var callerObj = ev.srcElement ? ev.srcElement : ev.target;

                //Call the original radconfirm and pass it all necessary parameters
                if (callerObj) {
                    //Show the confirm, then when it is closing, if returned value was true, automatically call the caller's click method again.
                    var callBackFn = function(arg) {
                        if (arg) {
                            callerObj["onclick"] = "";
                            if (callerObj.click) callerObj.click(); //Works fine every time in IE, but does not work for links in Moz
                            else if (callerObj.tagName == "A") //We assume it is a link button!
                            {
                                try {
                                    eval(callerObj.href)

                                }
                                catch (e) { }
                            }
                        }
                    }
                   
                    radconfirm(text, callBackFn, oWidth, oHeight, callerObj, oTitle);
                }
                return false;
            }
            

           
            function addTitle(radUpload, args) {
                var curLiEl = args.get_row();                
                var firstInput = curLiEl.getElementsByTagName("input")[0];

                //Create a simple HTML template.
                var table = document.createElement("table");
                table.className = "tableCss";


                //A new row for a Description field
                row = table.insertRow(-1);
                cell = row.insertCell(-1);
                input = CreateInput("Desc", "text");
                label = CreateLabel("Description :", input.id);
                cell.appendChild(label);
                cell = row.insertCell(-1);
                cell.appendChild(input);

                //Add a File label in front of the file input
                var fileInputSpan = curLiEl.getElementsByTagName("span")[0];
                var firstNode = curLiEl.childNodes[0];
                label = CreateLabel("Document : ", radUpload.getID());                
                curLiEl.insertBefore(label, firstNode);
                curLiEl.insertBefore(table, label);




            }

            function CreateLabel(text, associatedControlId) {
                var label = document.createElement("label");
                label.innerHTML = text;
                label.className = "lableCss";               
                return label;
            }

            function CreateInput(inputName, type) {
                var input = document.createElement("input");                
                var hdnDesc = document.getElementById("<%= hdnDesc.ClientID %>").value;                
                input.type = type;
                input.name = inputName;
                input.className = "inputCss";                
                input.value = hdnDesc;
                return input;
            }

              function ClearHiddenField()  
        {

            document.getElementById('<%=hdnDesc.ClientID %>').value = " ";  
        }     
        </script>
        
       
    </telerik:RadCodeBlock>
    
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" />
    <body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="ScriptManager" runat="server" />
    <div>
     <div class="QB">
     <asp:Panel ID="pnlQueryBlock" runat="server">
          <table width="100%">
          <tr style="display: none">
                    <td colspan="5">
                        <asp:ValidationSummary ID="vsAttachments" runat="server" DisplayMode="List" ValidationGroup="vgAttachments" />
                    </td>
                    
                </tr>
                
          <tr>
              <td class="SCRLabel">
                  <asp:Label ID="lblObjectType" runat="server" Text="Data Type :"></asp:Label>
              </td>
              <td class="SCRField">
                  <telerik:RadComboBox ID="rcbObjectType" runat="server" Width="175px" EmptyMessage="Select"
                      EnableLoadOnDemand="true" ShowMoreResultsBox="true" AutoPostBack="true"
                      >
                  </telerik:RadComboBox>
                 
              </td>
              <td class="SCRLabel">
                  <asp:Label ID="lblObject" runat="server" Text="Data Item :"></asp:Label>
              </td>
              <td class="SCRField">
                  <telerik:RadComboBox ID="rcbObject" runat="server" Width="175px" EmptyMessage="Select"
                      EnableLoadOnDemand="true" ShowMoreResultsBox="true" EnableVirtualScrolling="true"
                      >
                  </telerik:RadComboBox>
                
              </td>
              <td>
                  <asp:Button ID="btnDisplay" runat="server" Text="Display" CausesValidation="false"
                      ></asp:Button>
                 
              </td>
          </tr>
          
         
          </table>
        </asp:Panel>
    </div>
   
    <div >
        <asp:Panel ID="pnlMain" runat="server">
       
           <table width="100%">
               <tr style="display: none">
                   <td>
                       <asp:RequiredFieldValidator ID="rqfvObjectTypeAdd" runat="server" SetFocusOnError="true"
                           ErrorMessage="Please Select Entity Type !" ControlToValidate="rcbObjectTypeAdd"
                           ValidationGroup="vgAttachments" ForeColor="White">*</asp:RequiredFieldValidator>
                   </td>
                   <asp:RequiredFieldValidator ID="rqfvObjectAdd" runat="server" SetFocusOnError="true"
                       ErrorMessage="Please Select Entity !" ControlToValidate="rcbObjectAdd" ValidationGroup="vgAttachments"
                       ForeColor="White">*</asp:RequiredFieldValidator>
               </tr>
               <tr>
                   <td class="SCRLabel">
                       <asp:Label ID="lblObjectTypeAdd" runat="server" Text="Data Type :"></asp:Label>
                   </td>
                   <td class="SCRField">
                       <telerik:RadComboBox ID="rcbObjectTypeAdd" runat="server" Width="175px" EmptyMessage="Select"
                           EnableLoadOnDemand="true" ShowMoreResultsBox="true"
                           AutoPostBack="true" >
                       </telerik:RadComboBox>
                       <font color="red">*</font>
                    
                   </td>
                   <td class="SCRLabel">
                       <asp:Label ID="lblObjectAdd" runat="server" Text="Data Item :"></asp:Label>
                   </td>
                   <td class="SCRField">
                       <telerik:RadComboBox ID="rcbObjectAdd" runat="server" Width="175px" EmptyMessage="Select"
                           EnableLoadOnDemand="true" ShowMoreResultsBox="true"
                           >
                       </telerik:RadComboBox>
                      
                       <font color="red">*</font>
                   </td>
                   <td colspan="22">
                   </td>
               </tr>
           </table>
           
          
        </asp:Panel>
        <table style="margin-left: 54%;">
                <tr>
                   
                     <td class="SCRField">
                         <a href="TESTATTACHMENT.aspx" id="lnkAttachPath" onmouseover="this.style.cursor='hand'" runat="server"
                             target="_blank">
                             <asp:Label ID="lblAttachPath" runat="server" Text="TESTATTACHMENT">
                             </asp:Label></a>
                     </td>
                    <td style="padding: 2%">
                     </td>
                     <td class="SCRField">
                         <asp:LinkButton ID="lnkRemove" runat="server" Text="Remove"
                             ></asp:LinkButton>
                     </td>
                 </tr>
             </table>
         <asp:Panel ID="pnlUpload" runat="server" >        
             <table>
                 <tr>
                     <td class="SCRField">
                         <telerik:RadAsyncUpload runat="server" ID="AsyncUpload1" OnClientAdded="addTitle"
                             MultipleFileSelection="Automatic">
                         </telerik:RadAsyncUpload>                       
                         <asp:Button ID="btnUpload" runat="server" Text="Upload"
                             ValidationGroup="vgAttachments" />
                        
                        
                     </td>
                 </tr>
             </table>             
             </asp:Panel>
        
    </div>
 
  <input type="hidden" name="hdnDesc" id="hdnDesc" runat="server"/>
    </div>
    </form>
</body>
</html>

Thanks,
h@r!.

[Yana]

Hello,

Please excuse us for the delayed.

All you need to do is to set width to the <td> element in addTitle method:

function addTitle(radUpload, args) {
    var curLiEl = args.get_row();
    var firstInput = curLiEl.getElementsByTagName("input")[0];

    //Create a simple HTML template.
    var table = document.createElement("table");
    table.className = "tableCss";

    //A new row for a Description field
    row = table.insertRow(-1);
    cell = row.insertCell(-1);
    input = CreateInput("Desc", "text");
    label = CreateLabel("Description :", input.id);
    cell.appendChild(label);
    cell = row.insertCell(-1);
    cell.appendChild(input);
    cell.style.width = "250px";

    //Add a File label in front of the file input
    var fileInputSpan = curLiEl.getElementsByTagName("span")[0];
    var firstNode = curLiEl.childNodes[0];
    label = CreateLabel("Document : ", radUpload.getID());
    curLiEl.insertBefore(label, firstNode);
    curLiEl.insertBefore(table, label);

}

Greetings,
Yana
the Telerik team

[h@r!]

Hi Yana..

Its been after a long time I came back with an issue in the asynchronous file upload.
When ever I am trying to upload some files I am getting the error as rowElement is null or not an object.
Only for some files it is encountered and working fine for the rest of the files.
unable to find for what files it is being encountered as it is supporting all the file formats.

And how to set the length of the file name that is being uploaded.

Thanks
h@r!

[Yana]

Hello,

This error is fixed in the latest release, could you please download it and give it a try? Thanks

Best regards,
Yana
the Telerik team

[André Azevedo]

hi,

I had the same problem but with your help it's solved. but now i have another one.
how can i get the value of the title.

thanks

[h@r!]

Hi,

Can you try out with getElementById using the ClientID of the control which you can get from the page html source ?
I am not sure but guessing it will work out.

Thanks,
h@r!

[André Azevedo]

thanks, but i'm talking form server side. When i'm inserting the upload list how can i get the title.

[h@r!]

Hi,

If you can get the value of the title in the java script use a hidden field variable and assign it with that value you are going to get which you can further use at the server side..

Regards,
h@r!

[Peter Filipov]

Hello guys,

Adding additional fields to every uploaded file is a new feature of RadAsyncUpload control. This functionality and a demo will be released with Q2 2011 - expected till the end of July.

Regards,
Peter Filipov
the Telerik team