Calculate Client Side totals for Datagrid columns-ASP.NET

R

Rattlesnake

Freshman
Joined
Dec 23, 2003
Messages
47
Hi,
I have a ASP.net form that has datagrid that is used to enter the timereport for employees.
The datagrid has 4 columns for 150% Overtime,200%OVertime,Annual Leave,Sick Leave
The datagrid will have 28,30 or 31 rows depending on the month for which the time report is.
The columns are TemplateColumns that have textboxes .
I want to create a CLIENT SIDE script that will automtically calculate the totals for each column in the time report. (It

should calculate without postbacks)
The text names are txtOT150,txtOT200,txtAnnualLeave,txtSickLeave.

How can I create this client side script? I know this will have to be done at the Datagrid_ItemDataBound event and then use

RegisterStartupScript method.

I have the following code ready in the Datagrid_ItemDataBound event . What I need is the code to create the javascipt.

Dim txtOT150 As New TextBox
Dim txtOT200 As New TextBox
Dim txtAnnualLeave As New TextBox
Dim txtSickLeave As New TextBox

txtOT150 = CType(e.Item.Cells(1).FindControl("txtCost"), TextBox)
txtOT200= CType(e.Item.Cells(iPriceCol).FindControl("txtCost"), TextBox)
txtAnnualLeave = CType(e.Item.Cells(1).FindControl("txtCost"), TextBox)
txtSickLeave = CType(e.Item.Cells(1).FindControl("txtCost"), TextBox)



Thanks
 
Any particular reason for a client side script?
Click to expand...

I need the total to be calculated as soon as the user enters a value in the textbox. And I donot want it to postback after every change in the textbox.

By the way , the datagrid is a fully editable databgrid.
 
Hi below is the code for the datagrid
<asp:datagrid id="dgTR" runat="server" Width="402px" CssClass="Grid" ShowFooter="True" AutoGenerateColumns="False">
<Columns>
<asp:TemplateColumn HeaderText="Day">
<ItemTemplate>
<asp:TextBox id=txtTRDay1 runat="server" Width="27px" Text='<%# DataBinder.Eval(Container, "DataItem.TRDay") %>' CssClass="GridText" ReadOnly="True"></asp:TextBox>
</ItemTemplate>

<asp:TemplateColumn HeaderText="150% OT">
<ItemTemplate>
<asp:TextBox id=txtOT1001 runat="server" CssClass="GridText" Text='<%# DataBinder.Eval(Container, "DataItem.OT100") %>' ToolTip="100% Over Time" Width="27px">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>

<asp:TemplateColumn HeaderText="200% OT">
<ItemTemplate>
<asp:TextBox id=txtOT2001 runat="server" CssClass="GridText" Text='<%# DataBinder.Eval(Container, "DataItem.OT200") %>' ToolTip="200% Over Time" Width="27px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>

<asp:TemplateColumn HeaderText="Annual Leaves">
<ItemTemplate>
<asp:TextBox id=txtAL runat="server" Width="27px" Text='<%# DataBinder.Eval(Container, "DataItem.AL") %>' CssClass="GridText" ToolTip="Annual Leave"> </asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>

<asp:TemplateColumn HeaderText=Sickl Leaves">
<ItemTemplate>
<asp:TextBox id=txtSL runat="server" Width="27px" Text='<%# DataBinder.Eval(Container, "DataItem.SL") %>' CssClass="GridText" ToolTip="Sick Leave"> </asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>


</Columns>

</asp:datagrid>



I also have have 4 textboxes (not part of the datagrid). txtOT150Total ,txtOT200Total,txtALTotal,txtSLTotal. I want to display the totals in these textboxes.
 
In the databound event You can assign a script to run when the textbox entry changes using:

Visual Basic: 
Dim txtOT150 As TextBox=CType(e.Item.Cells(1).Controls(0), TextBox)
txtOT150.Attributes("OnKeyPress")="RedoSums(this, " & e.Item.ItemIndex & ")"

This would then make each textbox call the RedoSums function passing a reference to the row that changed and to the control. If we then perhaps had an array of the old values then the new sum could be calced using OldSum+NewValue-OldValue.

e.g.

function RedoSums(c,r) {
tSum=document.getElementById("txtOT150Total");
tSum.Value=tSum.Value-OldValues(r)+c.Value
OldValues(r)=c.Value
}

You would then just need to build an array of the start values when the page loads e.g.

var OldValues=new Array(NumRows);
OldValues(0)=1;
OldValues(1)=2;
'etc.

making sure that OldValues has global scope.

Another alternative would be to have a javascript function that looped through all the controls and checked if the id contained txtOT1001 (the data grid will generate unique ids for each control but they will contain your template id names).

HTH

:)
 
Back
Top