Solved

Update textbox control in DataGrid using Javascript

Posted on 2013-02-07
6
740 Views
Last Modified: 2013-02-12
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
Comment
Question by:Angel02
  • 3
  • 3
6 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 38866255
do right click on the page in your web browser, choose view source and post it here
0
 

Author Comment

by:Angel02
ID: 38866671
Please find the view source attached. Please let me know if you don't find what you are looking for.
Page1.txt
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38866707
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

 

Author Comment

by:Angel02
ID: 38870523
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38871097
Q1: Yes
Q2: No
Q3: http://jsfiddle.net/HybyR/4/
0
 

Author Closing Comment

by:Angel02
ID: 38882093
Works like a charm! Thank you so much.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question