[Solved] How to calculate total of all the Grid ItemTemplate Textboxes values on change of any value -- CLIENTSIDE ONLY

[Nirav]

Hi, I am developing a Webpage where I have RadGrid for multiple Products Entry.

It has Product Name, Quantity, UnitPrice and Total Price Fields.

User can keep adding products, quantity, UnitPrice and also can change any of the existing quantity, unitprice.

Total Price should always be calculated automatically as Quantity * Unit Price, upon any change on Quantity TextBox or UnitPrice Textbox.

I also have one more Server Label where I display Total of Total Price.

Now what I am looking for is a JavaScript Function to calculate all the Rows Quantity * its Unit Price and display it to its Total Price. And total of the Total price ( of all the rows ) should be displayed to the server side Label.

Can someone please help me for this JavaScript function? I think I can attach it to the ItemTemplate's Controls while binding Grid so that if there is any change in that Control Values, It should always calculate Total of All the Rows of Grid.

Here is my Grid: In the given code,

• I always want to calculate lblTotalCost Value to be txtQty  * txtUnitCost. And total of all the Rows lblTotalCost Value should be displayed in lblSubTotal.Text. These values should be changed always when user enters or changes any value in txtQty or txtUnitCost. It should always recalculate all the total upon any change in any rows quantity or unit cost value.

• In the Footer Template, lblFooterTotalCost should always be calculated when entered txtEnterQty  * txtEnterUnitCost

#############################################################

<telerik:RadGrid ID="RadGridDetails" runat="server" AllowPaging="false"
AllowSorting="true" AutoGenerateColumns="False" GridLines="Both"
OnNeedDataSource="RadGridDetails_needdatasource" Skin="Default"
OnItemCreated="RadGridDetails_ItemCreated"
OnItemDataBound="RadGridDetails_ItemDataBound"
ShowFooter="true"

>
<PagerStyle Mode="NextPrevAndNumeric" />
<ClientSettings EnableRowHoverStyle="true">

</ClientSettings>
                                        <MasterTableView ShowHeadersWhenNoRecords="true">
                                            <Columns>


                                                <telerik:GridTemplateColumn >
                                                    <ItemTemplate>
                                                        <asp:Button runat="server" ID="btnDeleteProduct" text="Delete"
                                                            CssClass="ButtonCSS"
                                                            ToolTip="Click here to delete this product"
                                                            CausesValidation="true"
                                                            OnClientClick="javascript:return confirm('Are you sure you want to delete this Product Information? ');"
                                                            onclick="btnDeleteProduct_Click"
                                                            CommandArgument='<%#
                                                            Eval ( "RequestInfoProductDetailID").ToString()
                                                            + ";" +
                                                            Eval ( "Row_Number").ToString()
                                                            %>'
                                                            />
                                                    </ItemTemplate>
                                                    <FooterTemplate>
                                                        <asp:Button runat="server" ID="btnAddProduct" text="Add New Product"
                                                            CssClass="ButtonCSS"
                                                            ToolTip="Click here to add this new product to the list"
                                                            CausesValidation="true" onclick="btnAddProduct_Click"
                                                            />
                                                    </FooterTemplate>
                                                </telerik:GridTemplateColumn>



                                                <telerik:GridTemplateColumn HeaderText="Quantity" UniqueName="Quantity">
                                                    <ItemTemplate>
                                                        <asp:TextBox ID="txtQty" Runat="server" MaxLength="7"
                                                            Text='<%# Bind("Quantity") %>'
                                                            ToolTip="Enter quantity"
                                                            ></asp:TextBox>
                                                                    <asp:CompareValidator ID="cvQty" runat="server"
                                                                    Display="Dynamic" ErrorMessage="Please enter a valid quantity"
                                                                    ControlToValidate="txtQty"  Operator="DataTypeCheck"
                                                                    Type="Integer" ></asp:CompareValidator>
                                                    </ItemTemplate>
                                                    <FooterTemplate>
                                                        <asp:TextBox ID="txtEnterQty" Runat="server" MaxLength="7"
                                                            ToolTip="Enter quantity"
                                                            ></asp:TextBox>
                                                                    <asp:CompareValidator ID="cvEnterQty" runat="server"
                                                                    Display="Dynamic" ErrorMessage="Please enter a valid quantity"
                                                                    ControlToValidate="txtEnterQty"  Operator="DataTypeCheck"
                                                                    Type="Integer" ></asp:CompareValidator>
                                                    </FooterTemplate>
                                                </telerik:GridTemplateColumn>

                                                <telerik:GridTemplateColumn HeaderText="Product Name" SortExpression="ProductName"
                                                    UniqueName="ProductName">
                                                    <ItemTemplate>
                                                        <asp:TextBox ID="txtProductName" Runat="server" MaxLength="50"
                                                            Text='<%# Bind("ProductName") %>'
                                                            ToolTip="Enter ProductName"
                                                            ></asp:TextBox>
                                                    </ItemTemplate>
                                                    <FooterTemplate>
                                                        <asp:TextBox ID="txtEnterProductName" Runat="server" MaxLength="50"
                                                            ToolTip="Enter ProductName"
                                                            ></asp:TextBox>
                                                    </FooterTemplate>
                                                </telerik:GridTemplateColumn>



                                                <telerik:GridTemplateColumn HeaderText="Unit Cost"  SortExpression="UnitCost" UniqueName="UnitCost">
                                                    <ItemTemplate>
                                                        <asp:TextBox ID="txtUnitCost" Runat="server" MaxLength="10"
                                                            Text='<%# Bind("UnitCost") %>'
                                                            ToolTip="Enter Unit Cost"
                                                            ></asp:TextBox>
                                                                    <asp:CompareValidator ID="cvUnitCost" runat="server"
                                                                    Display="Dynamic" ErrorMessage="Please enter a valid amount"
                                                                    ControlToValidate="txtUnitCost"  Operator="DataTypeCheck"
                                                                    Type="Double" ></asp:CompareValidator>
                                                    </ItemTemplate>
                                                    <FooterTemplate>
                                                        <asp:TextBox ID="txtEnterUnitCost" Runat="server" MaxLength="10"
                                                            ToolTip="Enter Unit Cost"
                                                            ></asp:TextBox>
                                                                    <asp:CompareValidator ID="cvEnterUnitCost" runat="server"
                                                                    Display="Dynamic" ErrorMessage="Please enter a valid amount"
                                                                    ControlToValidate="txtEnterUnitCost"  Operator="DataTypeCheck"
                                                                    Type="Double" ></asp:CompareValidator>
                                                    </FooterTemplate>
                                                </telerik:GridTemplateColumn>

                                                <telerik:GridTemplateColumn HeaderText="Total Cost"
                                                    SortExpression="TotalCost"
                                                    UniqueName="TotalCost">
                                                    <ItemTemplate>
                                                        <asp:Label runat="server" ID="lblTotalCost" Text='<%# Bind("TotalCost") %>' ></asp:Label>
                                                    </ItemTemplate>
                                                    <FooterTemplate>
                                                        <asp:Label runat="server" ID="lblFooterTotalCost" ></asp:Label>
                                                    </FooterTemplate>
                                                </telerik:GridTemplateColumn>

                                            </Columns>
                                            <EditFormSettings>
                                                <PopUpSettings ScrollBars="None" />
                                            </EditFormSettings>
                                            <ExpandCollapseColumn Resizable="False" Visible="False">
                                                <HeaderStyle />
                                            </ExpandCollapseColumn>
                                            <RowIndicatorColumn Visible="False">
                                                <HeaderStyle />
                                            </RowIndicatorColumn>
                                        </MasterTableView>
                                    </telerik:RadGrid>




<asp:Label ID="lblSubTotal" runat="server" ></asp:Label>

#############################################################

[Tsvetoslav]

Hello Nirav,

 I believe the following online example should provide enough directions on how to accomplish your scenario:
http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandinput/defaultcs.aspx?product=grid

Regards,
Tsvetoslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.