I had a form in which I made some textboxes using javascript. Basically I gave a button and Onclick of that button I add a Textbox using Javascript.
These values were then taken in a string on the server side and stored in different List columns.
Now I want to create Edit Functionality. So I have to retrieve values from the List COlumns and Insert it in the Textboxes.
This was easy when my controls were server controls but How can I do this for textboxes that were created using Javascript.
I am new to client side scripting. Any help will be appreciated.
All I need is a way to get the values from the List COlumn and then create those textboxes again with those values.
PS: Please advise if you wana see the code for how I have created the textboxes and got those values on the server side.
Thanks!
Javascript Code to create Textboxes:
<script type="text/javascript">
function GetDynamicTextBoxB(value)
{ return '<input name = "DynamicTextBoxB" type="text" value = "' + value + '" />' + '<input type="button" value="Remove" onclick = "RemoveTextBoxB(this)" />' }
var y = 0;
function AddTextBoxB() {
if (y < 10) {
var div = document.createElement('DIV'); div.innerHTML = GetDynamicTextBoxB(""); document.getElementById("TextBoxContainerB").appendChild(div);
}
else {
alert("Only 10 CSPs can be added")
} y++
}
function RemoveTextBoxB(div)
{ document.getElementById("TextBoxContainerB").removeChild(div.parentNode); }
function RecreateDynamicTextboxesB() {
var values = eval('<%#Values%>');
if (values != null) {
var html = ""; for (var i = 0; i < values.length; i++)
{ html += "<div>" + GetDynamicTextBoxB(values[i]) + "</div>"; } document.getElementById("TextBoxContainerB").innerHTML = html;
}
}
$("#tabs-1").ready(RecreateDynamicTextboxesB);
// // window.onload = RecreateDynamicTextboxesB;
</script>
Code Behind to Get these values on the server side and storing in List COlumns
string PartyACSP1 = string.Empty, PartyACSP2 = string.Empty, PartyACSP3 = string.Empty, PartyACSP4 = string.Empty, PartyACSP5 = string.Empty, PartyACSP6 = string.Empty, PartyACSP7 = string.Empty, PartyACSP8 = string.Empty, PartyACSP9 = string.Empty, PartyACSP10 = string.Empty;
if (textboxValues != null)
{
PartyACSP1 = safeGetString(textboxValues, 0);
PartyACSP2 = safeGetString(textboxValues, 1);
PartyACSP3 = safeGetString(textboxValues, 2);
PartyACSP4 = safeGetString(textboxValues, 3);
PartyACSP5 = safeGetString(textboxValues, 4);
PartyACSP6 = safeGetString(textboxValues, 5);
PartyACSP7 = safeGetString(textboxValues, 6);
PartyACSP8 = safeGetString(textboxValues, 7);
PartyACSP9 = safeGetString(textboxValues, 8);
PartyACSP10 = safeGetString(textboxValues, 9);
}
newISDAAgreement[Constants.PartyACSPColumn] = PartyACSP1;
newISDAAgreement[Constants.PartyACSP2Column] = PartyACSP2;
newISDAAgreement[Constants.PartyACSP3Column] = PartyACSP3;
newISDAAgreement[Constants.PartyACSP4Column] = PartyACSP4;
newISDAAgreement[Constants.PartyACSP5Column] = PartyACSP5;
newISDAAgreement[Constants.PartyACSP6Column] = PartyACSP6;
newISDAAgreement[Constants.PartyACSP7Column] = PartyACSP7;
newISDAAgreement[Constants.PartyACSP8Column] = PartyACSP8;
newISDAAgreement[Constants.PartyACSP9Column] = PartyACSP9;
newISDAAgreement[Constants.PartyACSP10Column] = PartyACSP10;
while retrieving data from list column you must have a map of the data for which you want to create an edit functionality. for e.g.
suppose you have the data
listcolumn = {'data1': 123, 'data2': 234, 'data3': 345}
so just you can loop into that data and create the textboxes with its value in it.
for(key in listcolumn){
create a textbox and its value from listcolumn[key] (this will give you the value for that particular textbox)
}
or if are not comfortable with the dictionary thing
you can use the either way i.e. data is list form
listcolumn = [123,234,345]
for(data in listcolumn){
create a textbox and insert value in it.
}
but i would be preffered that you use JSON format from server side to front end
and you can parse the data using JSON.parse(data). And will get the dictionary as an object.
I would suggest to use a different architecture:
knockout.js - for a client-sisde, where you could develop your MVVM,
MVC - as the app type,
Ajax to send the queries to the server side for your ops like Loading,Saving, etc.
Related
I am trying to create a dynamic menu with a title and group of checkboxes. So the output would be something like this: (pseudocode-ly)
Title 1
-checkbox1 -checkbox2 -checkbox3
Title 2
-checkbox1 -checkbox2 -checkbox3
I can get the Title back just fine, but my checkboxes are not. (See below)
Care
System.Web.UI.WebControls.CheckBoxList
Corporate & Enterprise Solutions
System.Web.UI.WebControls.CheckBoxList
I realize I am returning a DataSet, I just don't know how to handle it.
BusinessUnit bu = new BusinessUnit();
DataSet businessNames = bu.ListBusinessUnitNames();
ArrayList buNames = new ArrayList();
if (businessNames.Tables.Count > 0 && businessNames.Tables[0].Rows.Count > 0)
{
foreach (DataRow row in businessNames.Tables[0].Rows)
{
buNames.Add(row["BSUN_NAME"].ToString());
}
}
int counter = 1;
foreach (string name in buNames)
{
Label lblName = new Label();
lblName.ID = "unitName_" + counter;
lblName.Text = name;
CheckBoxList chkBoxes = new CheckBoxList();
chkBoxes.ID = name + "Programs_" + counter;
foreach (string item in buNames)
{
DataSet buPrograms = bu.ListBusinessUnitPrograms(item);
foreach (DataRow row in buPrograms.Tables[0].Rows)
{
chkBoxes.DataTextField = row[0].ToString();
chkBoxes.Text = chkBoxes.DataTextField;
}
}
programs.InnerHtml += lblName.Text + chkBoxes;
counter++;
}
Here are the mechanics for doing it in code:
ListItem LI1 = new ListItem("aaa");
ListItem LI2 = new ListItem("bbb");
LI1.Selected = true;
LI2.Selected = false;
chkBoxes.Items.Add(LI1);
chkBoxes.Items.Add(LI2);
(Assuming you're using WebForms [aspx])
In your code example, the statement programs.InnerHtml += lblName.Text + chkBoxes; is appending the value of the default .ToString() implementation of the chkBoxes object. To actually add the checkboxes to the page, you will need some sort of container control (such as a Placeholder) on the page, and append your dynamically created control to the container's Controls collection via phPlaceholder.Controls.Add(chkBoxes)
I'm trying to build several gridpanels with the result of a search in the DB.
But they never appears...
Here is my code, what's wrong with it ?
http://pastebin.com/WuTZwZrP
EDIT
Ok, got it. For those who have the same problem, I solved it by adding this to the GridPanel :
RenderTo = this.ExtPanel.ClientID
And this after the build :
ext.GridPanel grid = this.BuildGridPanel(forwarder.Key, forwarder.Value);
grid.Render();
//this.ExtPanel.Controls.Add(grid);
public void AddGridPanel()
{
Ext.Net.GridPanel g=new Ext.Net.GridPanel();
Ext.Net.Store store1=new Ext.Net.Store();
Model model = new Model();
for (int i = 1; i < tas.getTaskDE().Count / 2; i++)
{
fields = fields + "," + tas.getTaskDE()[i].FieldName;
ModelField modelField = new ModelField();
modelField.Name = tas.getTaskDE()[i].FieldName;
model.Fields.Add(modelField);
if (tas.getTaskDE()[i].Visibility == "true")
{
g.ColumnModel.Columns.Add(new ColumnBase[] {
new Column
{
Text = tas.getTaskDE()[i].FieldADName,
DataIndex = tas.getTaskDE()[i].FieldName,
Flex = 1
},
});
}
}
SqlDataSource s = new SqlDataSource();
s.ConnectionString =ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
s.SelectCommand = query;
store1.Model.Add(model);
store1.DataSource = s;
store1.DataBind();
g.Store.Add(store1);
g.Render(this.Form);
}
this an example of dynamic gridpanel hope it helps
I have the latest version of telerik (2013) but I am with the following problem, I need to change the value of a radnumerictextbox using javascript (client side), but after I set a value using JQuery or javascript regular control changes value because daa format, follows the control and js code:
<telerik: RadNumericTextBox id = "txtValor" runat = "server" EnableEmbeddedSkins = "false" Height = "15px" Skin = "Corporate" Width = "90%">
<NumberFormat DecimalSeparator="," DecimalDigits="2" />
</ telerik:RadNumericTextBox>
I try this
$(idCampo).val(_valorTotal.replace(".", ","));
$(nomeCampo).text(_valorTotal.replace(".", ","));
when running a postback the mask is lost, for example:
2000.55 = 200,055.00
And also tried this:
$(idCampo).val(parseFloat (_valorTotal));
$(idCampo).text(_valorTotal.replace (".", ""));
when executed the value is shown without masks, but when generated the postback event is placed usually
2000.55 = 2.000,55
Would have some event to update fields in the mask? Would otherwise not have tried to set a value in control?
you need a function java script
use my script :)
function Moneda(formato) {
var num = formato;//parseFloat("40000.51239");
var cadena = ""; var aux;
var cont = 1,m,k;
if(num<0) aux=1; else aux=0;
num=num.toString();
for(m=num.length-1; m>=0; m--){
cadena = num.charAt(m) + cadena;
if(cont%3 == 0 && m >aux) cadena = "." + cadena; else cadena = cadena;
if(cont== 3) cont = 1; else cont++;
}
cadena = cadena.split(".").join(",");
var separacion = "";
var quitarDobleComa = cadena.search(",,");
separacion = cadena.substring((quitarDobleComa+2),cadena.length);
separacion = separacion.split(",").join("");
var formatoPunto = cadena.substring(0,quitarDobleComa);
var final = formatoPunto +"."+ separacion;
return final;
}
I use the AsyncUpload
<telerik:RadAsyncUpload runat="server" ID="rada_attach" OnClientFileUploaded="onClientFileUploaded"
MultipleFileSelection="Disabled" InitialFileInputsCount="1" MaxFileInputsCount="1"
Width="100%" />
function onClientFileUploaded(radAsyncUpload, args) {
var row = args.get_row(),
inputName = radAsyncUpload.getAdditionalFieldID("TextBox"),
inputType = "text",
inputID = inputName,
input = createInput(inputType, inputID, inputName),
label = createLabel(inputID),
br = document.createElement("br");
row.appendChild(br);
row.appendChild(input);
row.appendChild(label);
}
function createInput(inputType, inputID, inputName) {
var input = document.createElement("input");
input.setAttribute("type", inputType);
input.setAttribute("id", inputID);
input.setAttribute("name", inputName);
return input;
}
I want to access the textbox (which created dynamically) in .cs.
How to do that ?
The Full Answer :
var $ = $telerik.$;
function onClientFileUploaded(radAsyncUpload, args) {
var $row = $(args.get_row());
var inputName = radAsyncUpload.getID("TextBox");
var inputType = "text";
var inputID = inputName;
var input = createInput(inputType, inputID, inputName);
var label = createLabel(inputID);
$row.append("<br/>");
$row.append(label);
$row.append(input);
}
function createInput(inputType, inputID, inputName) {
var input = '<input type="' + inputType + '" id="' + inputID + '" name="' + inputName + '" />';
return input;
}
function createLabel(forArrt) {
var label = '<label for=' + forArrt + '>info: </label>';
return label;
}
foreach (UploadedFile UF in rada_attach.UploadedFiles)
{
if (UF.GetFieldValue("TextBox") != null)
{
OBJ.File_name = UF.GetFieldValue("TextBox");
}
else
{
OBJ.File_name = UF.GetName();
}
In my opinion documentation is well clear. Check the Description tab on page you refer on. You can access value of dynamic textboxes with code below on postback:
if (rada_attach.UploadedFiles.Count > 0) {
for (var index = 0; index < rada_attach.UploadedFiles.Count; ++index) {
var textBoxValue = rada_attach.UploadedFiles[index].GetFieldValue("TextBox");
}
}
BTW, this scenario is well-dcoumented here: Adding Information to Uploaded Files
You need to check the Request.Form values (that were in the posted form) on postback and perform a check on all the fields that were posted back.
I am guessing that you won't know the name/id of the textbox if it was created on the client-side dynamically? Note that it would be the name of the form field that the Request object in .cs would see.
Only once you have posted back can you access that value in the .cs
first of all there is a searchbox form and a view form. after passing the value of the id in the searchbox, it should return all the values that matches with the id of that person after the textchange method occured. but it doesn't display a single value on the textboxes. here is my code
public void first_tab_search(string key)
{
key = txtSearch.Text;
var first = from a in dbcon.personal_informations where a.last_name == key select a;
foreach (var setThem in first)
{
txtsurname.Text = setThem.last_name;
txtfirstname.Text = setThem.first_name;
txtmiddlename.Text = setThem.middle_name;
txtID.Text = setThem.userid;
txtweight.Text = setThem.weight;
txttin.Text = setThem.tin;
txtsss.Text = setThem.sss;
txtaeno.Text = setThem.agency_employee_no;
txtbloodtype.Text = setThem.blood_type;
txtcitizenship.Text = setThem.citizenship;
txtcivilstatus.Text = setThem.civil_status;
txtcpno.Text = setThem.cell_no;
txtdob.Text = setThem.datetime_of_birth.ToString();
txtemail.Text = setThem.email_address;
txtgender.Text = setThem.sex;
txtgsis.Text = setThem.gsis_id;
txtheight.Text = setThem.height;
txtnameext.Text = setThem.name_ext;
txtpagibig.Text = setThem.pagibig_id;
txtpermaaddr.Text = setThem.permanent_address;
txtpermatelno.Text = setThem.permanent_telno;
txtpermazip.Text = setThem.permanent_zipcode;
txtphilhealth.Text = setThem.philhealth;
txtpob.Text = setThem.place_of_birth;
txtresidentialaddr.Text = setThem.residential_address;
txtresitelno.Text = setThem.residential_telno;
txtresizip.Text = setThem.residential_zipcode;
txtweight.Text = setThem.weight;
}
}
You have a whole host of problems going on here.
You pass a key into the method, and then immediately overwrite it with the contents of your search box.
Your search could return more than one result, and therefore your code is looping through each result and overwriting the output values with the last returned row. Use += rather than + in your loop, i.e.
txtsurname.Text += setThem.last_name;
Your code is currently case sensitive, this may be the desired approach but might not be.