[Solved] Javascript for Autosum in Grid

[Mahdi Rafiei zamani]

Hi Guys,

I do have a grid with this definition:

<

 

telerik:RadGrid ID="rgdGrossFee" runat="server" DataSourceID="ObjectDataSource1"

 

 

GridLines="None" Skin="Office2007">

 

 

<MasterTableView AllowPaging="True" AutoGenerateColumns="False" DataKeyNames="Gro_Id"

 

 

DataSourceID="ObjectDataSource1" EditMode="EditForms" PageSize="8">

 

 

<RowIndicatorColumn>

 

 

<HeaderStyle Width="20px" />

 

 

</RowIndicatorColumn>

 

 

<ExpandCollapseColumn>

 

 

<HeaderStyle Width="20px" />

 

 

</ExpandCollapseColumn>

 

 

<Columns>

 

 

<telerik:GridBoundColumn DataField="Gro_Id" EmptyDataText="&amp;nbsp;" HeaderText="Gro_Id"

 

 

SortExpression="Gro_Id" UniqueName="Gro_Id" DataType="System.Int32" Visible="false">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="Gro_Year" EmptyDataText="&amp;nbsp;" HeaderText="Financial Year Ending"

 

 

SortExpression="Gro_Year" UniqueName="Gro_Year" DataType="System.Int32">

 

 

<ItemStyle Width="20%" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridTemplateColumn UniqueName="TemplateColumn2" SortExpression="ApplicationStatusName"

 

 

HeaderText="Uk">

 

 

<ItemTemplate>

 

 

<telerik:RadNumericTextBox ID="txtUK" runat="server" Text='<%# Bind("Gro_Uk") %>'

 

 

Width="90%" />

 

 

</ItemTemplate>

 

 

<ItemStyle HorizontalAlign="Left" Width="20%" />

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn UniqueName="TemplateColumn2" SortExpression="ApplicationStatusName"

 

 

HeaderText="USA">

 

 

<ItemTemplate>

 

 

<telerik:RadNumericTextBox ID="txtUSA" runat="server" Text='<%# Bind("Gro_USA") %>'

 

 

Width="90%" />

 

 

</ItemTemplate>

 

 

<ItemStyle HorizontalAlign="Left" Width="20%" />

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn UniqueName="TemplateColumn2" SortExpression="ApplicationStatusName"

 

 

HeaderText="Other">

 

 

<ItemTemplate>

 

 

<telerik:RadNumericTextBox ID="txtOther" runat="server" Text='<%# Bind("Gro_Other") %>'

 

 

Width="90%" />

 

 

</ItemTemplate>

 

 

<ItemStyle HorizontalAlign="Left" Width="20%" />

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn UniqueName="TemplateColumn2" SortExpression="ApplicationStatusName"

 

 

HeaderText="Total">

 

 

<ItemTemplate>

 

 

<telerik:RadNumericTextBox ID="txtTotal" runat="server" Text='<%# Bind("Gro_Total") %>'

 

 

Width="90%" />

 

 

</ItemTemplate>

 

 

<ItemStyle HorizontalAlign="Left" Width="20%" />

 

 

</telerik:GridTemplateColumn>

 

 

</Columns>

 

 

<EditFormSettings>

 

 

<EditColumn UniqueName="EditCommandColumn1">

 

 

</EditColumn>

 

 

</EditFormSettings>

 

 

<PagerStyle Mode="Slider" />

 

 

<CommandItemTemplate>

 

 

<table style="width: 100%;">

 

 

<tr>

 

 

<td width="23">

 

 

<asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Icons/20/Add.png" />

 

 

</td>

 

 

<td>

 

 

<asp:LinkButton ID="Button1" runat="server" CommandName="AddSoli" Font-Bold="true"

 

 

Text="Add New Member" CausesValidation="false" />

 

 

</td>

 

 

</tr>

 

 

</table>

 

 

</CommandItemTemplate>

 

 

</MasterTableView>

 

 

<ClientSettings EnableRowHoverStyle="true" Selecting-AllowRowSelect="true">

 

 

<Selecting AllowRowSelect="True" />

 

 

</ClientSettings>

 

 

<FilterMenu EnableTheming="True">

 

 

<CollapseAnimation Duration="200" Type="OutQuint" />

 

 

</FilterMenu>

 

</

 

telerik:RadGrid>

 

I need a javascript code that gives me the total of all amounts entered in previous columns.

can any on help?

[Princy]

Hi Mahdi Rafiei,

 

One suggestion would be adding onfocusout attribute to input textboxes from code behind and pass the textbox id to the event handler. Then in the event handler, it is possible to calculate the sum and assign the value to result textbox. Checkout the following forum link where you can find how to implement the functionality. I hope this would be of help.
Calculate sum for row values

Thanks,
Princy.

[Mike Kretzler]

I have written a solution to this that doesn't use OnBlur for every textbox in the grid, but rather relies on a Caluculate button click event.  Here is the Javascript function:

function Calculate() {
            // This is particular to my page, you will need to find the control name for your page
            // If you are using a regular RadTextBox and not RadNumericTextBox, you will need to substitute $ for _
            var valueRoot = 'ctl00$RadGridRevenue$ctl00$ctl0';
            var valueTxtTail = '$RadNumericTextBoxAmount';

            // This is a regular RadTextBox, as I can't get the Javascript to set the value of a RadNumericTextBox properly
            var totalRoot = 'ctl00_RadGridRevenue_ctl00_ctl0';
            var totalTxtTail = '_ctl00_RadTextBoxAmountTotal';
            
            // The first actual grid row has an index of 4 in my grid, but may be different in yours.
            // I start at index 3 because the footer row is declared in the rendered HTML as id 3 for some reason
            var count = 3;
            var total = 0.0;
            var txtCtrl = null;
            var txtTotal = null;
            //var valTotal = null;

            // Get the Total TextBox and value.
            txtTotal = $find(totalRoot + count + totalTxtTail);

            count++;

            // Get the first TextBox.
            txtCtrl = document.getElementById(valueRoot + count + valueTxtTail);

            //loop through the grid
            while (txtCtrl != null) {
                total += parseFloat(txtCtrl.value);

                // Get the next TextBox.
                count++;
                txtCtrl = document.getElementById(valueRoot + count + valueTxtTail);
            }

            if (txtTotal != null) {
                //set the total
                txtTotal.set_value(total);
            }
        }

The HTML for my grid is extremely long, but straight forward; there are multiple columns with the last one being a price field.  The last two column definitions are included as an example (due to the calculate button being in a different column as the total textbox):

<telerik:GridTemplateColumn UniqueName="tcSubGL" HeaderText="Sub G/L">
    <ItemTemplate>
        <telerik:RadTextBox ID="txtSubGL" runat="server" Width="40px" MaxLength="6"
                            Text='<%# Eval("SubGeneralLedgerCode") %>'>
            <ClientEvents OnBlur="BlurValidate" />
        </telerik:RadTextBox>
        <asp:Label ID="lblInvalidSubGL" runat="server" Text='' />
        <mg:WebButton ID="btnSubGL" runat="server" ImageUrl="~/App_Themes/MasterPage/SmallButtons/Search.gif"
                      UseCssHover="true" IsSmallButton="true" UsePostBack="false" TabIndex="-1" />
    </ItemTemplate>
    <FooterTemplate>
        <mg:InputLabel ID="InputLabelPaymentTotal" runat="server" Text="Payment Total:" />
    </FooterTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="TemplateColumnAmount" HeaderText="Amount &lt;span class=&quot;asterix&quot;&gt;*&lt;/span&gt;">
    <ItemTemplate>
        <telerik:RadNumericTextBox ID="RadNumericTextBoxAmount" runat="server" Width="100px"
                                   Value='<%# Eval("AmountAsDouble") %>' MinValue="0">
            <EnabledStyle HorizontalAlign="Right" />
        </telerik:RadNumericTextBox>
    </ItemTemplate>
    <FooterTemplate>
        <mg:WebButton ID="WebButtonCalculateTotal" runat="server" ImageUrl="~/App_Themes/MasterPage/Calculator.gif"
                      UsePostBack="false" OnClientClick="Calculate()" TabIndex="-1" />
        <telerik:RadTextBox ID="RadTextBoxAmountTotal" runat="server" Width="100px" Text='<%# Eval("Amount") %>'
                            ReadOnly="true" TabIndex="-1" />
    </FooterTemplate>
    <FooterStyle HorizontalAlign="Right" />
    <ItemStyle HorizontalAlign="Right" />
</telerik:GridTemplateColumn>