ISSUE :
 
Profile photo
Submitted by It Pro
on March 14th, 2013 at 09:23:19 EST

How to get value in label control when user change the value in datagrid for .net 1.1 and vb.net

I have one editable datagrid control called "dgDist" which has 2 column name and amount. There is one one label control called "lblTotal" (outside the data grid).

For example

NAME AMOUNT
---- -----
TOM 0.00
POM 0.00
PAT 0.00

Total = <lblTotal>


Whenever user change the amount in the datagrid it should shows the total in that label control.

For example
if user enter

TOM 500.00
POM 200.00
PAT 0.00

Then
Total: 700


Please let me know how can I do this. This is for .NET framework 1.1 and in vb.net.
If javascript needed also please let me know the code.

Thanks for your help.


Profile photo
Replied by SBajra
on March 14th, 2013 at 11:01:55 EST
First of all, it is not clear how you implemented editable datagrid. So, can you please elaborate how you created your editable datagrid.

Based on what you have mentioned, possible solution would be.
1) If you have used any textbox for making editable datagrid then you can add some javascript to be trigged on onclick event of the textbox to do the calculation.
2) If you are using EditCommandColumn from DataGrid control, you can add some logic in your codebehind DataGrid1_UpdateCommand() event.

Again, without knowing the detail on how you created editable datagrid, its hard to provide solution.

Profile photo
Replied by It Pro
on March 14th, 2013 at 11:13:07 EST
Thanks for your reply.

editable datagrid means like this. Here is my aspx code

******************************************
<asp:DataGrid id="dgDist" runat="server" AutoGenerateColumns="false">
<HeaderStyle ForeColor="White" BackColor="#006699"></HeaderStyle>
<Columns> <asp:TemplateColumn HeaderText="NAME">
<ItemTemplate>

<asp:TextBox ID="txtGL" Runat=server Text='<%# DataBinder.EvalContainer.DataItem, "NAME") %>' Width="200">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Amount">
<ItemTemplate>
<asp:TextBox ID="txtAmount" Runat=server Text='<%# DataBinder.Eval(Container.DataItem, "Amount") %>' Width="75">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid><BR>
<asp:Label id="lblRemAmountDesc" runat="server" Visible="False" ForeColor="blue" Font-Size="10">Amount Remaining to be Distributed = $ </asp:Label>
<asp:Label id="lblTotal" runat="server" Visible="False" ForeColor="blue" Font-Size="10"></asp:Label><BR>

***************************************

Please let me know how can I use javascript click event for datagrid column.

Each time user finish entering the Amount cell, it should automatically shows the total value in that lblTotal.

Thanks once again with your help SBajra!
I really appreciate your help.
Edited on March 14th, 2013 at 11:14:41 EST

Profile photo
Replied by SBajra
on March 14th, 2013 at 14:21:14 EST
ok. I think this might work. It is not clean and you might need to work on it but it works.

This is what I did
1) Keep track of all the textboxes in data grid. This is done in DataGrid1_ItemDataBound() event in codebehind page. Actually I am building Javascript with array of textbox names so that I can do the math later. I also created new label Label2 in aspx page to hold the javascript.

private String myTextBoxList = String.Empty;
protected void DataGrid1_ItemDataBound(object sender, DataGridItemEventArgs e)
{

if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
{
TextBox myTextBox = (TextBox)e.Item.FindControl("TextBox1");
int value = 0;
int.TryParse(myTextBox.Text, out value);

myTextBoxList += "\""+ myTextBox.ClientID + "\", ";

myTextBox.Attributes.Add("onkeyup", "javascript:CalculateTotal()");

Label1.Text = (int.Parse(Label1.Text) + value).ToString();
}

if (e.Item.ItemType == ListItemType.Footer)
{
String myJavascript = "<script>function CalculateTotal(){CalculateAndDisplayTotal([" + myTextBoxList.Substring(0, myTextBoxList.Length - 2) + "])}</script>";
Label2.Text = myJavascript;
}
}


2) Then in the aspx page. This is what I did
a) I had to add new label which I named Label2 which holds Javascript with list of textboxes as an array.
b) I created another generic Javascript function to add the values. this takes in array of textboxes as an input parameter.

<script language="javascript" type="text/javascript">
function CalculateAndDisplayTotal(controlList) {
if (controlList != null && controlList.length > 0) {
var totalAmount = 0;
for (i = 0; i < controlList.length; i++) {
var amount = document.getElementById(controlList[i]).value;
if (amount != null && amount!="")
totalAmount += parseInt(amount);
}
document.getElementById("Label1").innerHTML = totalAmount;
}
}
</script>


I hope this helps.
Accepted Answer
Accepted
 Answer

Profile photo
Replied by It Pro
on March 15th, 2013 at 11:24:00 EST
Thanks for your reply. I still couldn't make it work since I use data grid and vb.net. Your suggestion does give some idea though. It would have been better if you have replied me according to my scenario.