[Solved] how can i use a radiobutton as addtional field?

[Sheepdog]

I want to use a radiobutton as an additional field in the radUpload control.
I wish to force the user to select either of two choices.
I have created the javascript so they show up correctly on the page, but I cannot access the values from the UploadedFiles collection.

here is the java to create the additional fields.

var numberOfCustomFields = 0;
function OnClientAddedHandler(sender, eventArgs)
{
  var inputRow = eventArgs.get_row();
  var uList = inputRow.parentNode;
  var count = 0;

  //new row for a User Manual Category check box
  newRow = document.createElement("li");
  count++;
  uList.insertBefore(newRow, inputRow);
  var label = document.createElement("span");
  label.innerHTML = "Manuals/Add. info";
  label.style.fontSize = 12;
  input = document.createElement("input");
  input.type = "radio";
  input.name = "group" + count;
  input.id  = sender.getID("radUserManual");
  newRow.appendChild(input);
  newRow.appendChild(label);

  //new row for a Cut-Sheets Category check box
  newRow = document.createElement("li");
  count++;
  uList.insertBefore(newRow, inputRow);
  var label = document.createElement("span");
  label.innerHTML = "FFE Cut Sheet";
  label.style.fontSize = 12;
  input = document.createElement("input");
  input.type = "radio";
  input.name = "group"+ count;
  input.id = sender.getID("radCutSheet");
  newRow.appendChild(input);
  newRow.appendChild(label);

  // Set the number of fields from the count
  numberOfCustomFields = count;
}
function OnClientDeletingHandler(sender, eventArgs)
{
   var input = eventArgs.get_fileInputField();
   deleteCustomFields(input);
}
function OnClientDeletingSelectedHandler(sender, eventArgs)
{
  var inputs = eventArgs.get_fileInputFields();

  for (i = 0; i < inputs.length; i++)
  {
    deleteCustomFields(inputs[i]);
  }
  eventArgs.set_cancel(true);
}
function deleteCustomFields(input)
{
   var li = input.parentNode.parentNode;
   var ul = input.parentNode.parentNode.parentNode;

   for (var i = 0; i < numberOfCustomFields; i++)
   {
       ul.removeChild(li.previousSibling);
   }
   ul.removeChild(li);
}

and here is where i am trying to get the additional fields values.

For Each f As Telerik.Web.UI.UploadedFile In RadUpload1.UploadedFiles
                If f.GetIsFieldChecked("radCutSheet") Then
                    sCategory = "Cutsheet"
                ElseIf f.GetIsFieldChecked("radUserManual") Then
                    sCategory = "User Manual"
                End If

                If Directory.Exists(strPath & Replace(txtStockNumber.Text.Trim, "-", "") & "/") Then
                    f.SaveAs(strPath & Replace(txtStockNumber.Text.Trim, "-", "") & "/" & f.GetName, True)
                Else
                    Directory.CreateDirectory(strPath & Replace(txtStockNumber.Text.Trim, "-", "") & "/")
                    f.SaveAs(strPath & Replace(txtStockNumber.Text.Trim, "-", "") & "/" & f.GetName, True)
                End If

                'Insert record into the database - because this file may exists we need to create a stored proc
                'that will do an insert or an update.
                'StoreNameinDB(strPath & Replace(txtStockNumber.Text.Trim, "-", "") & "/" & f.GetName, sCategory)

            Next

[Patrick]

I'm having the same issue.  Please assist.

Thanks,
Patrick

[Sheepdog]

I have solved my problem. Here is my javascript.

<script language="javascript" type="text/javascript">
<!--
var numberOfCustomFields = 0;
function OnClientAddedHandler(sender, eventArgs)
{
  var inputRow = eventArgs.get_row();
  var uList = inputRow.parentNode;
  var count = 0;

  //new row for a User Manual Category check box
  newRow = document.createElement("li");
  count++;
  uList.insertBefore(newRow, inputRow);
  var label = document.createElement("span");
  label.innerHTML = "Manuals/Add. info";
  label.style.fontSize = 12;
  input = document.createElement("input");
  input.type = "radio";
  input.value = "Manual";
  input.name = "group" + count;
  inputinput.id = input.name = sender.getID(input.name);
  newRow.appendChild(input);
  newRow.appendChild(label);

  //new row for a Cut-Sheets Category check box
  newRow = document.createElement("li");
  count++;
  uList.insertBefore(newRow, inputRow);
  var label = document.createElement("span");
  label.innerHTML = "FFE Cut Sheet";
  label.style.fontSize = 12;
  input = document.createElement("input");
  input.type = "radio";
  input.value = "Cutsheet";
  input.name = "group"+ count;
  inputinput.id = input.name = sender.getID(input.name);
  newRow.appendChild(input);
  newRow.appendChild(label);

  // Set the number of fields from the count
  numberOfCustomFields = count;
}
function OnClientDeletingHandler(sender, eventArgs)
{
   var input = eventArgs.get_fileInputField();
   deleteCustomFields(input);
}
function OnClientDeletingSelectedHandler(sender, eventArgs)
{
  var inputs = eventArgs.get_fileInputFields();

  for (i = 0; i < inputs.length; i++)
  {
    deleteCustomFields(inputs[i]);
  }
  eventArgs.set_cancel(true);
}
function deleteCustomFields(input)
{
   var li = input.parentNode.parentNode;
   var ul = input.parentNode.parentNode.parentNode;

   for (var i = 0; i < numberOfCustomFields; i++)
   {
       ul.removeChild(li.previousSibling);
   }
   ul.removeChild(li);
}

function TABLE1_onclick() {
}
// -->
</script>

And the code to retrieve tha values,

  Dim iCount As Int32 = 0
            For Each f As Telerik.Web.UI.UploadedFile In RadUpload1.UploadedFiles
                iCount += 1
                sCategory = f.GetFieldValue("group" & iCount.ToString
            Next

The values returned to sCategory are either "Manual" or "CutSheet" which are set as the values in the Javascript i.e. input.value = "Cutsheet";  

[Patrick]

This does not work for IE. Please help!!

Thanks,
Patrick

[Sheepdog]

Actually it does work for IE, if its not version 6 or 7. LOL
IE 6 & 7 are bugged in the creation of the javascript radio buttons.

What you have to do is check the IE version and code the javascript differently for 6&7 than you do for 8 or other versions.
Once I get it working again, I will post the code.

[Sheepdog]

OK I got it working now....

<script language="javascript" type="text/javascript">
<!--
var numberOfCustomFields = 0;
var groupcount = 0;
function OnClientAddedHandler(sender, eventArgs)
{
  var inputRow = eventArgs.get_row();
  var uList = inputRow.parentNode;
  var count = 0;
  var isIE=/*@cc_on!@*/false;//IE detector

  groupcount++;   //Increment group counter each time into this routine
  //new row for a User Manual Category check box
  newRow = document.createElement("li");
  count++;

  uList.insertBefore(newRow, inputRow);
  var label = document.createElement("span");
  label.innerHTML = "Manuals/Add. info";
  label.style.fontSize = 12;
  if(isIE){
    input=document.createElement('<input type="radio" name="group' + groupcount + '" value="Manual">')
    }
    else{
    input=document.createElement('input');
     input.type = "radio";
     input.value = "Manual";
     input.checked = "true";
     input.name = "group" + groupcount;
    }

  inputinput.id = input.name = sender.getID(input.name);
  newRow.appendChild(input);
  newRow.appendChild(label);

  //new row for a Cut-Sheets Category check box
  newRow = document.createElement("li");
  count++;
  uList.insertBefore(newRow, inputRow);
  var label = document.createElement("span");
  label.innerHTML = "FFE Cut Sheet";
  label.style.fontSize = 12;
  if(isIE){
    input=document.createElement('<input type="radio" name="group' + groupcount + '" value="Cutsheet">')
    }
    else{
    input=document.createElement('input');
     input.type = "radio";
     input.value = "Cutsheet";
     input.checked = "true";
     input.name = "group" + groupcount;
    }
  inputinput.id = input.name = sender.getID(input.name);
  newRow.appendChild(input);
  newRow.appendChild(label);

  // Set the number of fields from the count
  numberOfCustomFields = count;

}
function OnClientDeletingHandler(sender, eventArgs)
{
   var input = eventArgs.get_fileInputField();
   deleteCustomFields(input);
}
function OnClientDeletingSelectedHandler(sender, eventArgs)
{
  var inputs = eventArgs.get_fileInputFields();

  for (i = 0; i < inputs.length; i++)
  {
    deleteCustomFields(inputs[i]);
  }
  eventArgs.set_cancel(true);
}
function deleteCustomFields(input)
{
   var li = input.parentNode.parentNode;
   var ul = input.parentNode.parentNode.parentNode;

   for (var i = 0; i < numberOfCustomFields; i++)
   {
       ul.removeChild(li.previousSibling);
   }
   ul.removeChild(li);
}

function TABLE1_onclick() {
}
// -->
</script>

here is the codebehind showing how I access the radiobuttons

 For Each f As Telerik.Web.UI.UploadedFile In RadUpload1.UploadedFiles
                iCount += 1
                sCategory = f.GetFieldValue("group" & iCount.ToString)
                If sCategory.Length > 0 Then
                    If Directory.Exists(strPath & Replace(txtStockNumber.Text.Trim, "-", "") & "/") Then
                        Dim myFile As New FileInfo(strPath & Replace(txtStockNumber.Text.Trim, "-", "") & "/" & f.GetName)
                        If Not myFile.Exists Then
                            f.SaveAs(strPath & Replace(txtStockNumber.Text.Trim, "-", "") & "/" & f.GetName, False)
                        Else
                            lblDocMessage.Text = "File:" & f.GetName & "  already exists, cannot overwrite. Please rename or select a different file" & vbCrLf
                            Exit Function
                        End If
                    Else
                        Directory.CreateDirectory(strPath & Replace(txtStockNumber.Text.Trim, "-", "") & "/")
                        f.SaveAs(strPath & Replace(txtStockNumber.Text.Trim, "-", "") & "/" & f.GetName, False)
                    End If
                    'Insert record into the database - because this file may exists we need to create a stored proc
                    'that will do an insert or an update.
                    If lblID.Text.Length > 0 Then
                        StoreNameinDB(lblID.Text, sCategory.Substring(0, 1), strPath & Replace(txtStockNumber.Text.Trim, "-", "") & "/" & f.GetName, f.GetName.ToString)
                    End If
                Else
                    sErrorMessage += "You did not select a category for this file: " & f.GetName.ToString & " and was not saved" & vbCrLf
                End If

            Next

Hope this helps
g

[Genady Sergeev]

Hi guys,

Here is another way to do this, using jQuery:

function onClientAddedHandler(sender, eventArgs) {
            var $ = $telerik.$;
            var idAddField = sender.getID("additional");

            $(".ruInputs li[class='']:first")
                 .before($("<span>RadioButton1</span>"))
                 .before($("<input type='radio' />").attr("name", idAddField).val("Value1"))
                 .before($("<span>RadioButton2</span>"))
                 .before($("<input type='radio' />").attr("name", idAddField).val("Value2"));

        }

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

[Sheepdog]

OK, so BTW, this fails misserably if you have only allowed certain file extensions to be uploaded.

What happens is files that are not allowed go into a compeltely different collection, so when itterating thru the files uploaded collection, your counter gets thrown off because not all the files are present in that collection.

A work around would be to allow all file types, and then check them before saving them and ignoring those.

Thanks
G

[Genady Sergeev]

Hello Sheepdog,

Which counter do you talk about? As far as I can see, there is no problem to check whether a valid file has its radio button checked.

protected void BtnUpload_Click(object sender, EventArgs e)
    {
        foreach (UploadedFile file in RadUpload1.UploadedFiles)
        {
            string additField = file.GetFieldValue("additional");
        }
    }

Perhaps I am missing the point?

Kind regards,
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.

[bharti ten]

Hello Telerik ,

Can you please tell me how to access and validate a custom text box added to radupload 

using a java script before passing it on to server.

Thank you,

Bharathi