Calculate Running Total in asp.net Gridview [duplicate] - javascript

This question already has answers here:
how I can show the sum of in a datagridview column in asp.net
(2 answers)
Closed 7 years ago.
i would like to calculate running total in gridiview using javascript or any other method just to calculate the total hours and the grand total hours as users keying in the numbers. So here is how my current gridview look like
i want to calculate the running total as users key in the number as shown in the green highlighted color.
<div>
<asp:GridView ID="grvTest" runat="server"
ShowFooter="True" AutoGenerateColumns="False"
CellPadding="4" ForeColor="#333333"
GridLines="None" OnRowDeleting="grvStudentDetails_RowDeleting">
<Columns>
<asp:BoundField DataField="ID" HeaderText="Row ID" />
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:DropDownList ID="ddl1" runat="server">
<%--<asp:ListItem Value="G">test1</asp:ListItem>
<asp:ListItem Value="P">test2</asp:ListItem>--%>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Day1">
<ItemTemplate>
<asp:TextBox ID="txtDay1" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Day2">
<ItemTemplate>
<asp:TextBox ID="txtDay2" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText = "Total">
<ItemTemplate>
<asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowDeleteButton="True" />
</Columns>
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<EditRowStyle BackColor="#2461BF" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
GRAND TOTAL:
<asp:Label ID="lblGrandTotal" runat="server" Text="0"></asp:Label>
</div>

I assume that you are using a query like below to fetch data from database and binding it to your grid.
SELECT ID, NAME, HOURS1, HOURS2 FROM YOUR_TABLE
You can updated this query to have a new column to calculate your totals.
SELECT ID, NAME, HOURS1, HOURS2, HOURS1 + HOURS2 AS TOTAL FROM YOUR_TABLE
If this is not the case then please share how you are fetching and filling data into grid. So that I can suggest your more relevant solution.

Related

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);
}
});

How to open a pop dialog on click of hyperlink in a gridview (another popup)?

I have a hyper link which will open a grid view popup, which have name and other details, and the name is a hyperlink in it.When I click on that hyperlink i need to display the details of that user in another popup. How can i do it?
My Code:
<asp:GridView ID="grdNomiantionCountDetails" runat="server" AutoGenerateColumns="false"
PagerStyle-CssClass="dvPageNation1" PagerSettings-Position="Bottom" GridLines="None"
PagerStyle-HorizontalAlign="Left" Visible="true" Width="600px" HorizontalAlign="center">
<Columns>
<asp:TemplateField HeaderText="Nominated By" HeaderStyle-HorizontalAlign="Left">
<ItemStyle CssClass="bdrstyle" />
<ItemTemplate>
<br />
<asp:HyperLink Width="180px" CssClass="txtcolor" runat="server" ID="HyperLink1" Text='<%#Bind("NominatorName")%>' onclick='<%# String.Format("return viewDescription(""{0}"");",Eval("Description")) %>'></asp:HyperLink>
</ItemTemplate>
<HeaderStyle CssClass="hdrstyle" HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Institution" HeaderStyle-HorizontalAlign="Left" HeaderStyle-CssClass="hdrstyle">
<ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="400px" CssClass="txtcolor bdrstyle " />
<ItemTemplate>
<br />
<asp:Label Width="180px" CssClass="txtcolor" runat="server" ID="lblInstitution" Text='<%#Bind("Institution")%>' />
<br />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerStyle CssClass="dvPageNation1" HorizontalAlign="Left" />
</asp:GridView>
</div>
And i need to open a dialog with the description, on click of the NominatorName hyperlink
Replace
<asp:HyperLink Width="180px" CssClass="txtcolor" runat="server" ID="HyperLink1" Text='<%#Bind("NominatorName")%>' onclick='<%# String.Format("return viewDescription(""{0}"");",Eval("Description")) %>'></asp:HyperLink>
with something like
<div onclick="openPopupDialog('<%# Eval("Description") %>')">ClickMe</div>

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;
}

make (GridView with DropDownList using FilterExpression in SqlDataSource) work without reloading the page using JavaScript

How can i make this (Filter GridView with DropDownList using FilterExpression in SqlDataSource) work without reloading the page using JavaScript ?
<asp:DropDownList ID="ddlCountries" runat="server" AutoPostBack="True" DataSourceID="DropDownDataSource"
DataTextField="SC" DataValueField="SC" AppendDataBoundItems="True">
<asp:ListItem Text="All " Value="" />
</asp:DropDownList>
<asp:SqlDataSource ID="DropDownDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:CountConnectionString %>"
SelectCommand="SELECT [SC] FROM [CountTable]"></asp:SqlDataSource>
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="False" DataSourceID="GridDataSource"
DataKeyNames="ID">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" ItemStyle-Width="150"
InsertVisible="False" ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="SC" HeaderText="SC" ItemStyle-Width="150"
SortExpression="SC" />
<asp:BoundField DataField="Traffic" HeaderText="Traffic"
SortExpression="Traffic" />
</Columns>
<HeaderStyle BackColor="#3AC0F2" ForeColor="White"></HeaderStyle>
</asp:GridView>
<asp:SqlDataSource ID="GridDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:CountConnectionString %>"
SelectCommand="SELECT * FROM [CountTable]" FilterExpression="SC = '{0}'">
<FilterParameters>
<asp:ControlParameter Name="SC" ControlID="ddlCountries" PropertyName="SelectedValue" />
</FilterParameters>
</asp:SqlDataSource>

Categories