OnClientAdded event
RadUpload provides the OnClientAdded client-side event, which can be used to manipulate the rows, added by clicking the Add button. Using this event you can add any HTML element to RadUpload, including inputs.
The event handler is a function with two parameters:
- radUpload - the client-side object instance of RadUpload which fired the event
- args - an object with one property, containing the newly added row
|
<script type="text/javascript">
function addTitle(radUpload, args)
{
var theNewRow = args.Row;
...
}
</script>
...
<rad:radupload id="RadUpload1" runat="server" onclientadded="addTitle" />
|
Important note
In order to ensure the proper operation of the event handler in all browsers you must declare the function before the RadUpload declaration.
GetID(name) method
An important client-side method of RadUpload is GetID(name) which must be used to generate the ID and the name of the additional input elements:
<script type="text/javascript">
function addTitle(radUpload, args)
{
...
//Create the Title input and set its class from the used skin
var title = document.createElement("input");
title.className = "RadUploadInputField";
//Generate ID and name for the title input. RadUpload will need
// these server-side to get the value of the input
title.id = title.name = radUpload.GetID("title");
...
}
</script> |
Retrieving Field Values
Server-side you can get the additional text field values using the UploadedFile.GetFieldValue(name) method. You should use the same value which was passed to the GetID(name) method in order to retrieve the input value properly:
|
protected void Button1_Click(object sender, EventArgs e)
{
foreach (UploadedFile f in RadUpload1.UploadedFiles)
{
LabelResults.Text += "File name: " + f.GetName() + "<br/>";
//Pass the name, used to generate the ID and the name of the field
LabelResults.Text += "Title: " + f.GetFieldValue("title") + "<br/><br/>";
}
}
|
The value of the added checkboxes can be obtained using the UploadedFile.GetIsFieldChecked(name) method:
|
protected void Button1_Click(object sender, EventArgs e)
{
foreach (UploadedFile f in RadUpload1.UploadedFiles)
{
LabelResults.Text += "File name: " + f.GetName() + "<br/>";
//Pass the name, used to generate the ID and the name of the field
LabelResults.Text += "Should create thumbnail: " + f.GetIsFieldChecked("thumbnail") + "<br/><br/>";
}
}
|
Example: Adding a Title
The example below demonstrates how to add a Title field for each file input in RadUpload. Note that the declaration of the addTitle function is before the RadUpload declaration!
ASPX
|
<script type="text/javascript">
function addTitle(radUpload, args)
{
//Get the cell which contains the file input.
// When ControlObjectsVisibility contains the CheckBoxes flag the
// first cell (index 0) is the cell with the checkbox, else the
// first cell is the cell with the file input.
var cell = args.Row.cells[1];
//Get the skinned file input (this is a DIV tag if
// EnableFileInputSkinning = true, otherwise <input type=file>)
var fileInput = cell.firstChild;
//We want the textboxes to be placed in one line (in the case
// when EnableFileInputSkinning = true and fileInput is DIV)
fileInput.style.display = "inline";
//Create the Title label and set its text
var text = document.createElement("span");
text.innerHTML = "Title: ";
cell.appendChild(text);
//Create the Title input and set its class from the used skin
var title = document.createElement("input");
title.className = "RadUploadInputField";
//Generate ID and name for the title input. RadUpload will need
// these server-side to get the value of the input
title.id = title.name = radUpload.GetID("title");
//Append the additional input
cell.appendChild(title);
}
</script>
...
<rad:radupload id="RadUpload1" runat="server" onclientadded="addTitle" />
<asp:button id="Button1" runat="server" text="Submit" onclick="Button1_Click" />
<p><asp:label runat="server" id="LabelResults"></asp:label></p>
|
VB.NET
|
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
For Each f As UploadedFile In RadUpload1.UploadedFiles
LabelResults.Text += "File name: " & f.GetName() & "<br/>"
'Pass the name, used to generate the ID and the name of the field
LabelResults.Text += "Title: " & f.GetFieldValue("title") & "<br/><br/>"
Next
End Sub
|
C#
|
protected void Button1_Click(object sender, EventArgs e)
{
foreach (UploadedFile f in RadUpload1.UploadedFiles)
{
LabelResults.Text += "Name: " + f.GetName() + "<br/>";
//Pass the name, used to generate the ID and the name of the field
LabelResults.Text += "Title: " + f.GetFieldValue("title") + "<br/><br/>";
}
}
|