We Keep Coding

How To Get Value of the Same Row

I have some data in this table. When i edit the Percentage, how can i get the value of the Supply Quantity?
Below is my ASPX code:
<asp:GridView ID="grdSupplierItem" runat="server" AutoGenerateColumns="False" CssClass="Gridview3">
<Columns>
<asp:TemplateField HeaderText="Supplier">
<ItemTemplate>
<asp:Label ID="lblAutoNum" Visible="false" Text='<%# Eval("AutoNum") %>' runat="server" />
<asp:DropDownList ID="ddlSupplier" runat="server" CssClass="form-control width250">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sequence">
<ItemStyle HorizontalAlign="Right"></ItemStyle>
<ItemTemplate>
<asp:TextBox CssClass="form-control numbertext" onkeypress="return onlyNumber(event)" Width="80px" ID="txtSequence" Text='<%#String.Format("{0:n0}", DataBinder.Eval(Container.DataItem, "Sequence")) %>' runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Percentage (%)">
<ItemStyle HorizontalAlign="Right"></ItemStyle>
<ItemTemplate>
<asp:TextBox CssClass="form-control numbertext" onkeyup="javascript:text_changed(this);" ID="txtPercentage" AutoPostBack="false" OnTextChanged="txtPercentage_TextChanged" Text='<%# DataBinder.Eval(Container.DataItem, "SupplyPercentage") %>' runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Effective Date">
<ItemTemplate>
<asp:TextBox CssClass="form-control datepicker" ID="txtEffectiveDate" data-provide="datepicker" runat="server" Width="120px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Expired Date">
<ItemTemplate>
<asp:TextBox CssClass="form-control datepicker" ID="txtExpiredDate" data-provide="datepicker" runat="server" Width="120px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Unit Price(RM)">
<ItemStyle HorizontalAlign="Right"></ItemStyle>
<ItemTemplate>
<asp:TextBox CssClass="form-control numbertext text-right" OnTextChanged="txtUnitPrice_TextChanged" onkeypress="return isNumber(event)" ID="txtUnitPrice" AutoPostBack="true" Text='<%# DataBinder.Eval(Container.DataItem, "SellingPrice") %>' runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Supply Qty">
<ItemStyle HorizontalAlign="Right"></ItemStyle>
<ItemTemplate>
<asp:TextBox CssClass="form-control numbertext text-right" OnTextChanged="txtSupplyQty_TextChanged" AutoPostBack="true" onkeypress="return isNumber(event)" ID="txtSupplyQty" Text='<%# DataBinder.Eval(Container.DataItem, "SupplyQty") %>' runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Supply Value">
<ItemStyle HorizontalAlign="Right"></ItemStyle>
<ItemTemplate>
<asp:TextBox CssClass="form-control numbertext text-right" OnTextChanged="txtSupplyValue_TextChanged" AutoPostBack="true" onkeypress="return isNumber(event)" ID="txtSupplyValue" Text='<%# DataBinder.Eval(Container.DataItem, "SupplyValue") %>' runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:ButtonField Text="<img border=0 src=ImageFile/Delete1.gif>" CommandName="Delete">
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:ButtonField>
</Columns>
<RowStyle CssClass="gridrow" />
<SelectedRowStyle CssClass="gridheader" />
<HeaderStyle CssClass="gridheader" />
<AlternatingRowStyle CssClass="gridRowAlt" />
</asp:GridView>
I had tried with this JS and only manage to get the value of Percentage(%)
function text_changed(textObj) {
value = textObj.value;
var $otherInput =
textObj.closest('tr').find('input[id$="txtSupplyQty"]');
}
I need to do some calculation on the Javascript Code.

The ID for your <asp:TextBox /> will change once your client receives the page.
You'll need to get the client's text box ID in a different way if you're doing it in JavaScript. If you're using jQuery, it'll look something like this:
const textBox = $find('<%= txtSupplyQty.ClientID %>');
But beyond that, the web form controls do not support the onkeyup event listener like you have defined here.
If you really want to attach an onkeyup event, you'll have to either manually attach an event listener in a script block like I just mentioned above or you'll have to do it in your code behind.
If you're attaching an event listener in code behind, you can it to your Page_Load:
txtPercentage.Attributes.Add("onKeyUp", "text_changed(this)");

Not able to get values of textbox and label using asp.net and jquery from aspgrid (dynamic)

I have following grid
<asp:GridView ID="grdBOQ" width="100%" ShowHeaderWhenEmpty="true" AutoGenerateColumns="false" runat="server" CssClass="gvBOQdatatable">
<Columns>
<asp:TemplateField HeaderText="Sl No:">
<ItemTemplate>
<%#(grdBOQ.PageSize * grdBOQ.PageIndex) + grdBOQ.Rows.Count + 1%>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" Width="40px" Wrap="False" />
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Category Name">
<ItemTemplate>
<asp:Label runat="server" Text='<%# Bind("Category_Name") %>' ID="lblCategoryName" ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Category Description">
<ItemTemplate>
<asp:Label runat="server" Text='<%# Bind("Description") %>' ID="lblCategoryDescription" ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:TextBox ID="txtQuantity" class="form-control" runat="server" Text="0" MaxLength="8"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Unit">
<ItemTemplate>
<asp:Label runat="server" Text='<%# Bind("UOM_Name") %>' ID="lblUnit" ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Unit Rate">
<ItemTemplate>
<asp:Label runat="server" Text='<%# Bind("SellingPrice_Per_UOM") %>' ID="lblUnitRate" ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Total">
<ItemTemplate>
<asp:Label runat="server" Text='0.00' ID="lblTotalPrice" ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
<div style="width: 99%; text-align: center">
<asp:Label ID="lblEmpty" runat="server" Text="Sorry!!! No Record Found.."></asp:Label>
</div>
</EmptyDataTemplate>
</asp:GridView>
I have given following code in script tag using jquery to find asp textbox value but not working. I tried 2 different way but not getting.
First way
$("#txtQuantity").on('click', function () {
alert('testing');
});
Second Way
var recipient = $("#txtQuantity")
$("#<%=recipient.ClientID%>").on('change', function () {
alert('testing');
});
Nothing works what is the way to get. I tried the above code inside document.ready and inside aspcontent tag.As it is in grid I have now around 5 textboxes and it varies based on the values from database.

Finally I have some thing like this but no idea this is a good solution.Please advice
$("#<%=grdBOQ.ClientID %>").on('change', function () {
var GridView1 = document.getElementById('<%= grdBOQ.ClientID %>');
for (var rowId = 1; rowId < GridView1.rows.length; rowId++) {
var textValue = GridView1.rows[rowId].cells[3].children[0];
if (textValue.value != '0')
alert(textValue.value);
}
});

Add item to DropDownList in EditItemTemplate of a Gridview

I am trying to find a way to add an item to a dropdownlist using codebehind or javascript.
the dropdownlist is located within a gridview in the edit item section
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="False" DataKeyNames="pallet" DataSourceID="RFS_TW" AllowPaging="True" Width="100%">
<AlternatingRowStyle BackColor="White"></AlternatingRowStyle>
<Columns>
<asp:CommandField ShowEditButton="True" />
<asp:BoundField DataField="pallet" HeaderText="Pallet" ReadOnly="True" SortExpression="pallet" ItemStyle-Width="10%" >
<ItemStyle Width="10%" />
</asp:BoundField>
<asp:BoundField DataField="date_added" HeaderText="Date" SortExpression="date_added" ReadOnly="True" ItemStyle-Width="10%">
<ItemStyle Width="10%" />
</asp:BoundField>
<asp:BoundField DataField="department" HeaderText="Department" SortExpression="department" ReadOnly="True" ItemStyle-Width="10%">
<ItemStyle Width="10%" />
</asp:BoundField>
<asp:TemplateField HeaderText="sold_by" SortExpression="sold_by">
<EditItemTemplate>
<asp:DropDownList ID="soldby_ddl" runat="server" >
<asp:ListItem>Please Select</asp:ListItem>
</asp:DropDownList>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("sold_by") %>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="10%" />
</asp:TemplateField>
</Columns>
</asp:GridView>

Try to use
function addValues() {
var listBox = document.getElementById("soldby_ddl");
var option = new Option("value", "value");
listBox.appendChild(option);
}
or
function addValues() {
var listBox = document.getElementById("soldby_ddl");
var option = new Option("value", "value");
listBox.options[i++] = option;
}

Cannot set value in a second textbox of same cell

I have a javascript attached to two textboxes in two cells of a GridView that populates automaticaly another two textboxes in the same cell while typing.
It works fine for the first text box, but I'm getting "Uncaught TypeError: Cannot set property 'value' of undefined" error when typing in the second textbox.
Here's my javascript:
function Sync(obj, idx) {
var cell = obj.parentNode;
cell.parentNode.cells[cell.cellIndex + 2].getElementsByTagName("input")[idx].value = obj.value;
}
GridView:
<asp:TemplateField HeaderText="Country Code">
<EditItemTemplate>
<asp:TextBox ID="txtCountryCode" runat="server" Text='<%# Eval("CountryCode") %>' OnKeyUp="javascript:Sync(this, 0);"></asp:TextBox>
<br />
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" ControlToValidate="txtCountryCode" ValidationExpression="\d{1,3}" EnableClientScript="false"
ErrorMessage="The Country Code must be 1-3 numeric digits!" runat="server"
ForeColor="Red" Font-Size="Smaller">
</asp:RegularExpressionValidator>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblCountryCode" runat="server" Text='<%# Eval("CountryCode") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtNewCountryCode" runat="server"></asp:TextBox>
<br />
<asp:RegularExpressionValidator ID="RegularExpressionValidator2" ControlToValidate="txtNewCountryCode" ValidationExpression="\d{1,3}" EnableClientScript="false"
ErrorMessage="The Country Code must be 1-3 numeric digits!" runat="server"
ForeColor="Red" Font-Size="Smaller">
</asp:RegularExpressionValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Main Number">
<EditItemTemplate>
<asp:TextBox ID="txtMainNumber" runat="server" Text='<%# Eval("MainNumber")%>' OnKeyUp="javascript:Sync(this, 1);"></asp:TextBox>
<br />
<asp:RegularExpressionValidator ID="RegularExpressionValidator3" ControlToValidate="txtMainNumber" ValidationExpression="\d{1,14}" EnableClientScript="false"
ErrorMessage="The Country Code must be 1-14 numeric digits!" runat="server"
ForeColor="Red" Font-Size="Smaller">
</asp:RegularExpressionValidator>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblMainNumber" runat="server" Text='<%# Eval("MainNumber")%>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtNewMainNumber" runat="server"></asp:TextBox>
<br />
<asp:RegularExpressionValidator ID="RegularExpressionValidator4" ControlToValidate="txtNewMainNumber" ValidationExpression="\d{1,14}" EnableClientScript="false"
ErrorMessage="The Country Code must be 1-14 numeric digits!" runat="server"
ForeColor="Red" Font-Size="Smaller">
</asp:RegularExpressionValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Phone">
<ItemTemplate>
<asp:Label ID="lblPhone" runat="server" Text='<%# Eval("Phone") %>' Enabled="false"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
+
<asp:TextBox ID="txtPhoneCountryCode" runat="server" Enabled="false" Text='<%# Eval("CountryCode") %>' Width="30px"></asp:TextBox>
<asp:TextBox ID="txtPhoneMainNumber" runat="server" Enabled="false" Text='<%# Eval("MainNumber")%>' Width="100px"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtNewPhone" runat="server" Enabled="false"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>

The FooterTemplate related to your txtMainNumber textbox contains only 1 textbox txtNewMainNumber but you tried to set its 2nd textbox that does not exist, change the following
OnKeyUp="javascript:Sync(this, 1);"
with
OnKeyUp="javascript:Sync(this, 0);"

How to enable and disable the LinkButton in GridView when CheckBox in the same GridView was checked?

I have a number of Template Fields in my GridView. In which I have One CheckBox called "chkSelect" in it and in another Template Field I have one LinkButton called "lnkgvQCAttribute". Here I want to Disable the LinkButton when the CheckBox is Unchecked and Enable the LinkButton when the CheckBox is Checked. How to do this using JavaScript?
Here is my GridView's columns:
<Columns>
<asp:TemplateField HeaderText="S.No.">
<ItemTemplate>
<asp:Label ID="lblSNo" runat="server" Text='<%# Container.DataItemIndex + 1 %>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="25px" />
<ControlStyle Width="25px" />
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" Checked='<%#Bind("Select") %>' onClick="CheckedTotal();" />
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="chkSelectAll" runat="server" onclick="CheckAll();" />
</HeaderTemplate>
<ControlStyle Width="20px" />
<ItemStyle Width="20px" />
</asp:TemplateField>
<asp:BoundField DataField="PurchaseID" HeaderText="PurchaseID" Visible="false" />
<asp:BoundField DataField="POID" HeaderText="POID" Visible="false" />
<asp:BoundField DataField="PurchaseDetailID" HeaderText="PurchaseDetailID" Visible="false" />
<asp:TemplateField HeaderText="ItemID" Visible="false">
<ItemTemplate>
<asp:Label ID="lblgvItemID" runat="server" Text='<%# Bind("ItemID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Item Description" SortExpression="ItemDescription">
<ItemTemplate>
<asp:Label ID="lblItemDesc" runat="server" Text='<%# Bind("ItemDescription") %>' Style="display: none"></asp:Label>
<asp:TextBox ID="txtItemDesc" runat="server" Text='<%# Bind("ItemDescription") %>' Font-Size="Smaller" Enabled="false"></asp:TextBox>
</ItemTemplate>
<ControlStyle Width="200px" />
<ItemStyle Width="200px" />
</asp:TemplateField>
<asp:BoundField DataField="SpecificationName" HeaderText="Specification Name" SortExpression="SpecificationName">
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:TemplateField HeaderText="RD">
<ItemTemplate>
<asp:Label ID="lblgvRD" runat="server" Text='<%# Bind("RandomDimension") %>'></asp:Label></ItemTemplate>
<ItemStyle Width="40px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Planned Quantity" SortExpression="PlannedQuantity">
<ItemTemplate>
<asp:Label ID="lblPlannedQuantity" runat="server" Text='<%# Bind("PlannedQuantity") %>' />
<asp:TextBox ID="txtPlannedQuantity" runat="server" Style="display: none" Text='<%# Bind("PlannedQuantity") %>' />
</ItemTemplate>
<ControlStyle Width="60px" />
<ItemStyle Width="60px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="OnOrder Quantity" SortExpression="OnOrderQuantity">
<ItemTemplate>
<asp:Label ID="lblOnOrderQuantity" runat="server" Text='<%# Bind("OnOrderQuantity") %>' />
<asp:TextBox ID="txtOnOrderQuantity" runat="server" Style="display: none" Text='<%# Bind("OnOrderQuantity") %>' />
</ItemTemplate>
<ControlStyle Width="60px" />
<ItemStyle Width="60px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Order Quantity" SortExpression="OrderQuantity">
<ItemTemplate>
<asp:TextBox ID="txtOrderQuantity" runat="server" MaxLength="10" onkeypress="return DecimalValidate(event);" onkeyup="return calculateTotal();" Text='<%# Bind("OrderQuantity") %>' Enabled="false" />
</ItemTemplate>
<ControlStyle Width="60px" />
<ItemStyle Width="60px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Unit Rate" SortExpression="UnitRate">
<ItemTemplate>
<asp:Label ID="lblUnitRate" runat="server" Style="display: none" Text='<%# Bind("UnitRate") %>' />
<asp:TextBox ID="txtUnitRate" runat="server" onkeypress="return DecimalValidate(event);" onkeyup="return calculateTotal();" Text='<%# Bind("UnitRate") %>' Enabled="false />
</ItemTemplate>
<ControlStyle Width="90%" />
<ItemStyle Width="80px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Total Amount" SortExpression="TotalAmount">
<ItemTemplate>
<asp:TextBox ID="txtTotalAmt" runat="server" contentEditable="false" onclick="this.blur();" Style="background-color: Transparent; border: 0px; cursor: default" Text='<%# Bind("TotalAmount") %>' />
</ItemTemplate>
<ControlStyle Width="60px" />
<ItemStyle Width="60px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="ItemStatusID" Visible="false">
<ItemTemplate>
<asp:Label ID="lblgvItemStatusID" runat="server" Text='<%# Bind("ItemStatusID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="QC">
<ItemTemplate>
<asp:LinkButton ID="lnkgvQCAttribute" runat="server" CommandArgument='<%# DataBinder.Eval(Container, "RowIndex") %>' CommandName="QC" Text="QC" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
Please I need all your suggestions...

First add a reference to jQuery (download it and put it in one of site-folders, for example Scripts):
<script src="Scripts/jquery-1.2.6.pack.js" type="text/javascript"></script>
Then you should create a CssClass name for your elements, like:
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" Checked='<%#Bind("Select") %>' CssClass="chkSelect" />
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="chkSelectAll" runat="server" onclick="CheckAll();" />
</HeaderTemplate>
<ControlStyle Width="20px" />
<ItemStyle Width="20px" />
</asp:TemplateField>
and
<asp:TemplateField HeaderText="QC">
<ItemTemplate>
<asp:LinkButton ID="lnkgvQCAttribute" runat="server" CommandArgument='<%# DataBinder.Eval(Container, "RowIndex") %>'
CommandName="QC" Text="QC" CssClass="lnkgvQCAttribute" />
</ItemTemplate>
</asp:TemplateField>
Now, you can find your elements with JS and control their behavior. In this case, the checkbox is in a span, then in a td, and finally a tr. You should navigate to the tr, in the tr find the a element that have lnkgvQCAttribute class, and control it:
<script type="text/javascript">
$(document).ready(function () {
$("span.chkSelect input").click(function () {
var enabled = this.checked;
var link = $(this).parent().parent().parent().find("a.lnkgvQCAttribute");
if (enabled) {
var href = $(link).attr("data-href");
$(link).attr("href", href);
$(link).removeAttr("data-href");
} else {
var href = $(link).attr("href");
$(link).attr("data-href", href);
$(link).removeAttr("href");
}
});
});
</script>
Enjoy!

Call onclick="disableLinkButton(this)" on checkbox
function disableLinkButton(obj) {
var rowObject = getParentRow(obj);
if(obj.checked) {
rowObject.childNodes[3].disabled = true // debug and check, row Object will contain that link button as its childnodes
}
else {
rowObject.childNodes[3].disabled = false;
}
}
function getParentRow(obj) {
obj = obj.parentElement;
while(obj.tagName != "TR")
return obj;
}

Add following javascript and style onto the page:
<script type="text/javascript">
$(function () {
$("input[id*='chkSelect_']", "#<%= GridView1.ClientID %>")
.click(function () {
var linkButton = $(this).closest("tr").find("a[id*='lnkgvQCAttribute_']");
if (this.checked) {
EnableLinkButton(linkButton);
}
else {
DisableLinkButton(linkButton);
}
}) //disable turned off linkbuttons on page load
.not(":checked").each(function () {
DisableLinkButton($(this).closest("tr").find("a[id*='lnkgvQCAttribute_']"));
});
});
function EnableLinkButton(lb) {
$(lb)
.removeClass("disabled")
.attr("href", function () {
return !$(this).is("[href^='javascript:__doPostBack']") ? this.href.replace('retun false;', '__doPostBack') : this.href;
});
}
function DisableLinkButton(lb) {
$(lb)
.addClass("disabled")
.attr("href", function () { return $(this).is("[href^='javascript:__doPostBack']") ? this.href.replace('__doPostBack', 'retun false;') : this.href; });
}
</script>
<style type="text/css">
a.disabled
{
color: #e3e3e3;
text-decoration: none;
cursor: default;
}
</style>