• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 780
  • Last Modified:

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:chkDiscount(this);"></asp:CheckBox>
                                                      </ItemTemplate>
                                                </asp:TemplateColumn>
                                                <asp:BoundColumn DataField="mtgTypeDesc" HeaderText="Course Type">
                                                      <ItemStyle Width="120px" CssClass="styleyellow"></ItemStyle>
                                                </asp:BoundColumn>
                                                <asp:TemplateColumn HeaderText="Discount Type">
                                                      <ItemStyle Width="100px" CssClass="styleyellow"></ItemStyle>
                                                      <ItemTemplate>
                                                            <asp:DropDownList id="ddListDisctype" runat="server" Width="100px" onchange="javascript:discTypeChange(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(Container.DataItem,"price")%>' />
                                                      </ItemTemplate>
                                                </asp:TemplateColumn>
                                                <asp:TemplateColumn HeaderText="USD or %">
                                                      <ItemStyle Width="25px" CssClass="stylewhite"></ItemStyle>
                                                      <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.parentElement;
                        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.parentElement;
                  if (elmCurrent.checked == true){
                        alert('checked');
                        row.cells[3].childNodes[0].enabled = false; //does not work
                        }      
                  }
0
Angel02
Asked:
Angel02
  • 3
  • 3
1 Solution
 
leakim971PluritechnicianCommented:
do right click on the page in your web browser, choose view source and post it here
0
 
Angel02Author Commented:
Please find the view source attached. Please let me know if you don't find what you are looking for.
Page1.txt
0
 
leakim971PluritechnicianCommented:
Thanks.
.Net put the textbox (input) inside a span so you need :
var row = elmCurrent.parentElement.parentElement.parentElement;
instead :
var row = elmCurrent.parentElement.parentElement;

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
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
Angel02Author Commented:
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.parentElement.parentElement;
                  var cellPrice = row.cells[6];
                  if (elmCurrent.checked == true){
                           //row.document.getElementsByTagName("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?
0
 
leakim971PluritechnicianCommented:
Q1: Yes
Q2: No
Q3: http://jsfiddle.net/HybyR/4/
0
 
Angel02Author Commented:
Works like a charm! Thank you so much.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now