RadUpload w/Radio buttons additional client fields

[Sheepdog]

Hello,

My users need additional fields on the Radupload control. So following your examples I have added two radio button/group to the form, so the user can select one option or the other, but not both.  I have it workin on my local dev machine IE 8.0 but when moved to a test server, the user using IE 7, cannot select the radio buttons, and on the post back to save the documents, I cannot access the additional field. When I access the test site with my browser (IE 8) it works fine!

here is the Javascript I am using to add the additional fields,

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

  //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.checked = "true";
  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);
}

// -->
</script>

[Genady Sergeev]

Hello Sheepdog,

Indeed, there is  a problem with the mentioned code under IE7. In order to workaround this issue, I suggest that you use the following code instead:

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

 

        }

It will produce two radio buttons above the RadUpload. On the server, you can access their values the following way:

foreach (UploadedFile f in RadUpload1.UploadedFiles)
 {
   string radioButton = f.GetFieldValue("additional");
 }

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