Angel02
asked on
Update textbox control in DataGrid using Javascript
I have a Datagrid with controls like textbox, label and dropdownlist. I am trying to update the values in the controls using javascript. I was able to successfully update the Label but I am not able to update or disable the textbox.
When the dropdownlist changes, I need to change the value in the textbox and label. When the checkbox is checked/unchecked I need to enable/ disable the texbox respectively. Below is my datagrid columns and the javascript functions I have till now.
<Columns>
<asp:TemplateColumn HeaderText="Select" ItemStyle-Width="10">
<ItemTemplate>
<asp:CheckBox ID="chkDiscount" Runat="server" CssClass="small" onclick="javascript:chkDis count(this );"></asp: CheckBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="mtgTypeDesc" HeaderText="Course Type">
<ItemStyle Width="120px" CssClass="styleyellow"></I temStyle>
</asp:BoundColumn>
<asp:TemplateColumn HeaderText="Discount Type">
<ItemStyle Width="100px" CssClass="styleyellow"></I temStyle>
<ItemTemplate>
<asp:DropDownList id="ddListDisctype" runat="server" Width="100px" onchange="javascript:discT ypeChange( this);">
<asp:ListItem Value="1" Selected="True">By Price</asp:ListItem>
<asp:ListItem Value="2">By Percent</asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Discount <br>Price/ % Off">
<ItemStyle Width="30px" CssClass="stylewhite" HorizontalAlign="Right"></ ItemStyle>
<ItemTemplate>
<asp:TextBox Runat="server" ID="txtboxDiscount" Width="50px" Text='<%#DataBinder.Eval(C ontainer.D ataItem,"p rice")%>' />
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="USD or %">
<ItemStyle Width="25px" CssClass="stylewhite"></It emStyle>
<ItemTemplate>
<asp:Label id="lblUnit" runat="server" Width="25px"></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
Javascript
------------------
function discTypeChange(elmCurrent)
{
var currVal = new String(elmCurrent.value);
var row = elmCurrent.parentElement.p arentEleme nt;
var cellUnit = row.cells[4];
var cellPrice = row.cells[7];
if(currVal==1){
cellUnit.innerHTML = "USD"; //works
row.cells[3].childNodes[0] .value = cellPrice.innerHTML; //does not work
}
else{
cellUnit.innerHTML = "%"; //works
row.cells[3].childNodes[0] .value = "0"; //works
}
}
function chkDiscount(elmCurrent)
{
var row = elmCurrent.parentElement.p arentEleme nt;
if (elmCurrent.checked == true){
alert('checked');
row.cells[3].childNodes[0] .enabled = false; //does not work
}
}
When the dropdownlist changes, I need to change the value in the textbox and label. When the checkbox is checked/unchecked I need to enable/ disable the texbox respectively. Below is my datagrid columns and the javascript functions I have till now.
<Columns>
<asp:TemplateColumn HeaderText="Select" ItemStyle-Width="10">
<ItemTemplate>
<asp:CheckBox ID="chkDiscount" Runat="server" CssClass="small" onclick="javascript:chkDis
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="mtgTypeDesc" HeaderText="Course Type">
<ItemStyle Width="120px" CssClass="styleyellow"></I
</asp:BoundColumn>
<asp:TemplateColumn HeaderText="Discount Type">
<ItemStyle Width="100px" CssClass="styleyellow"></I
<ItemTemplate>
<asp:DropDownList id="ddListDisctype" runat="server" Width="100px" onchange="javascript:discT
<asp:ListItem Value="1" Selected="True">By Price</asp:ListItem>
<asp:ListItem Value="2">By Percent</asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Discount <br>Price/ % Off">
<ItemStyle Width="30px" CssClass="stylewhite" HorizontalAlign="Right"></
<ItemTemplate>
<asp:TextBox Runat="server" ID="txtboxDiscount" Width="50px" Text='<%#DataBinder.Eval(C
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="USD or %">
<ItemStyle Width="25px" CssClass="stylewhite"></It
<ItemTemplate>
<asp:Label id="lblUnit" runat="server" Width="25px"></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
Javascript
------------------
function discTypeChange(elmCurrent)
{
var currVal = new String(elmCurrent.value);
var row = elmCurrent.parentElement.p
var cellUnit = row.cells[4];
var cellPrice = row.cells[7];
if(currVal==1){
cellUnit.innerHTML = "USD"; //works
row.cells[3].childNodes[0]
}
else{
cellUnit.innerHTML = "%"; //works
row.cells[3].childNodes[0]
}
}
function chkDiscount(elmCurrent)
{
var row = elmCurrent.parentElement.p
if (elmCurrent.checked == true){
alert('checked');
row.cells[3].childNodes[0]
}
}
do right click on the page in your web browser, choose view source and post it here
ASKER
Please find the view source attached. Please let me know if you don't find what you are looking for.
Page1.txt
Page1.txt
Thanks.
.Net put the textbox (input) inside a span so you need :
var row = elmCurrent.parentElement.p arentEleme nt.parentE lement;
instead :
var row = elmCurrent.parentElement.p arentEleme nt;
Test page : http://jsfiddle.net/HybyR/2/
You can see an other way to get the second input (index is 1 because first index is 0) inside the row
.Net put the textbox (input) inside a span so you need :
var row = elmCurrent.parentElement.p
instead :
var row = elmCurrent.parentElement.p
Test page : http://jsfiddle.net/HybyR/2/
You can see an other way to get the second input (index is 1 because first index is 0) inside the row
ASKER
Thank you leakim971! This works.
I redefined the row with an additional parentElemnt but I used the cell index in the following function because I needed to access two other controls also. I hope this is OK.
function chkDiscount(elmCurrent)
{
var row = elmCurrent.parentElement.p arentEleme nt.parentE lement;
var cellPrice = row.cells[6];
if (elmCurrent.checked == true){
//row.document.getElements ByTagName( "input")[1 ].disabled = false;
row.cells[2].disabled = false;
row.cells[3].disabled = false;
row.cells[5].disabled = false;
}
else{
row.cells[2].disabled = true;
row.cells[3].disabled = true;
row.cells[5].disabled = true;
row.cells[2].childnodes[0] .value = "1";
row.cells[3].childnodes[0] .value = cellprice.innerHTML;
row.cells[5].childnodes[0] .value = "1";
}
}
So will .net always add the <span> to the respective control? Is there a way to avoid it?
Also, I would like to keep the corresponding controls disabled when the grid loads. So that when the user checks the row, the controls are enabled only then. Can you please suggest a way of doing it?
I redefined the row with an additional parentElemnt but I used the cell index in the following function because I needed to access two other controls also. I hope this is OK.
function chkDiscount(elmCurrent)
{
var row = elmCurrent.parentElement.p
var cellPrice = row.cells[6];
if (elmCurrent.checked == true){
//row.document.getElements
row.cells[2].disabled = false;
row.cells[3].disabled = false;
row.cells[5].disabled = false;
}
else{
row.cells[2].disabled = true;
row.cells[3].disabled = true;
row.cells[5].disabled = true;
row.cells[2].childnodes[0]
row.cells[3].childnodes[0]
row.cells[5].childnodes[0]
}
}
So will .net always add the <span> to the respective control? Is there a way to avoid it?
Also, I would like to keep the corresponding controls disabled when the grid loads. So that when the user checks the row, the controls are enabled only then. Can you please suggest a way of doing it?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Works like a charm! Thank you so much.