Calculate Client Side totals for Datagrid columns-ASP.NET

[Rattlesnake]

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

[mark007]

Any particular reason for a client side script?

 

Take a look at this article - might do what you need:

 

http://aspnet.4guysfromrolla.com/articles/020503-1.aspx

 

:)

[Rattlesnake]

Any particular reason for a client side script?

 

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.

[mark007]

Hmm, could you post the code for your entire setup of the grid?

[Rattlesnake]

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.

[mark007]

In the databound event You can assign a script to run when the textbox entry changes using:

 

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®+c.Value

OldValues®=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

 

:)