Bind additional field to database

[Abdul]

I am trying to use the example that I saw on this forum to get value from a dropdown list as my additional field, however, I am not showing the drop down list.

Here is the modified javascript code:

function onClientFileUploaded(radAsyncUpload, args) {
     var row = args.get_row(),
          inputName = radAsyncUpload.getAdditionalFieldID("objName"),
          inputID = inputName,
          input = createSelect(inputID, inputName),
          label = createLabel(inputID),
          br = document.createElement( "br" );

     row.appendChild( br );
     row.appendChild( label );
     row.appendChild( input );
}

function createSelect(inputID, inputName)
{
    var input = "<select id='" + inputID + "' name='" + inputName + "'><option value='Volvo'>Volvo</option><option value='Ford'>Ford</option><option value='SAAB'>SAAB</option><option value='Toyota'>Toyota</option><option value='BMW'>BMW</option><option value='OTHERS'>OTHERS</option></select>";
    return input;
}


function createLabel(forArrt) {
     var label = document.createElement( "label" );

     label.setAttribute( "for", forArrt );
     label.innerHTML = "Select a value: ";

     return label;
}

Please tell me what I am doing wrong as I am not very good at javascript. Besides, how do I get the value into a variable so I can get this over to the database.

Any assistance will be appreciated.

Thank you guys.

[Hristo Valyavicharski]

Hi Abdul,

This java script throws an error:

function createSelect(inputID, inputName)
{
    var input = "<select id='" + inputID + "' name='" + inputName + "'><option value='Volvo'>Volvo</option><option value='Ford'>Ford</option><option value='SAAB'>SAAB</option><option value='Toyota'>Toyota</option><option value='BMW'>BMW</option><option value='OTHERS'>OTHERS</option></select>";
    return input;
}

because it creates a string instead of object. Try to replace this code with:

function onClientFileUploaded(radAsyncUpload, args) {
    var row = args.get_row(),
         inputName = radAsyncUpload.getAdditionalFieldID("Select"),
         inputID = inputName,
         select =  createSelect(inputID, inputName),
         label = createLabel(inputID),
         br = document.createElement("br");

    row.appendChild(br);
    row.appendChild(label);
    row.appendChild(select);

}

function createSelect(inputID, inputName) {
    var select = document.createElement("select");
    select.id = inputID;
    select.name = inputName

    for (var i = 0; i < 10; i++) {
        var opt = document.createElement("option");
        opt.value = i;
        opt.text = "Option " + i;
        select.appendChild(opt);
    }

    return select;
}

function createLabel(forArrt) {
    var label = document.createElement("label");

    label.setAttribute("for", forArrt);
    label.innerHTML = "Select Option: ";

    return label;
}

then on the server you could get selected value using GetFieldValue():

protected void rbUpload_Click(object sender, EventArgs e)
{
    foreach (UploadedFile file in RadAsyncUpload1.UploadedFiles)
    {
        var selectedValue = file.GetFieldValue("Select");
        //Save file into the DB
    }
}

Please find the attached sample.

Regards,
Hristo Valyavicharski
Telerik

[Abdul]

I want to express my gratitude to you guys for the assistance. I will try the codes sent and will report back. Really appreciate the help.

[Abdul]

Hello Hristo Valyavicharski,

The Javascript codes worked perfect and I was able to retrieve the value from the select option from the code behind page. The only modification that I did to the javascript was to add an array consisting of my value, text pairs and then looped through the array. I have included this modification to the function createSelect:

function createSelect(inputID, inputName) {
    var select = document.createElement("select");
    select.id = inputID;
    select.name = inputName

    var langArray = [
    {value: "FRD", text: "Ford"},
    {value: "CHV", text: "Chevrolet"}
    {value: "VLV", text: "Volvo"}
    ];

    var il = langArray.length;


    for (var i = 0; i < il; i++) {
        var opt = document.createElement("option");
        opt.value = langArray[i].value;
        opt.text = langArray[i].text;;
        select.appendChild(opt);
    }


    return select;
}

Once again thank you guys.