How to access all the ItemTemplate controls through JavaScript?

[Nirav]

Hi, I am using Tekerik:RadGrid and I have columns as Quantity, UnitPrice and TotalPrice.

I provide Textboxes to enter Quantity and Unit Price and upon these entry, immediately TotalPrice Label should be calculated as quantity * Unit Price. 

Now, I also display the total of all the Total Price in a different Label control.

I want to know how can I write a Javascript function to attach it on "onkeyup" event of Quantity and Unit Price textboxes so that whenever there is any change in any quantity or any unit price, it calculates every thing and fills out total also.

Just for information, here is my RadGrid Control:

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

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

>
                                        <PagerStyle Mode="NextPrevAndNumeric" />
                                        <ClientSettings EnableRowHoverStyle="true" >
                                        </ClientSettings>
                                        <MasterTableView ShowHeadersWhenNoRecords="true">
                                            <Columns>



                                                <telerik:GridTemplateColumn HeaderText="Row_Number"
                                                    SortExpression="Row_Number" UniqueName="Row_Number">
                                                    <ItemTemplate>
                                                        <asp:Label ID="lblRow_Number" runat="server"
                                                            Text='<%# Bind("Row_Number")%>'></asp:Label>
                                                    </ItemTemplate>
                                                </telerik:GridTemplateColumn>


                                                <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") %>'
                                                            onkeyup='isNumber(this)'

                                                            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="Unit Cost"  SortExpression="UnitCost" UniqueName="UnitCost">
                                                    <ItemTemplate>
                                                        <asp:TextBox ID="txtUnitCost" Runat="server" MaxLength="10"
                                                            Text='<%# Bind("UnitCost") %>'
                                                            ToolTip="Enter Unit Cost"
                                                            visible="false"
                                                            ></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>

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

[Shinu]

Hallo Nirav,

You can attach the onkeyup event from code behind and pass the ClientIDs to the event handler. Then in the event handler, calculate the Total and set the value of the Label.

CS:

    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = (GridDataItem)e.Item;
            TextBox textbox1 = (TextBox)item.FindControl("txtQty");
            TextBox textbox2 = (TextBox)item.FindControl("txtUnitCost");
            Label label1 = (Label)item.FindControl("lblTotalCost");

            textbox1.Attributes.Add("onkeyup", "calculateTotal('"+ textbox1.ClientID +"','"+textbox2.ClientID+"','"+label1.ClientID +"')");
        }
    }

javascript:

<script type="text/javascript">
    function calculateTotal(t1, t2, l1) {
        var quantity = document.getElementById(t1).value;
        var unitCost = document.getElementById(t2).value;
        var total = quantity * unitCost;
        document.getElementById(l1).innerHTML = total;
    }
</script>

-Shinu.

[Nirav]

Really thanks for this detailed reply,
Yes, this is working perfect. But actually what I am looking for is that a JavaScript Function Where It can loop through all the Grid Items, and calculate Quantity * UnitPrice for all the Rows OR Items, And the the Total of all the TotalValues should be displayed on a different label.

If I do the above way for each line than I am little confused how to calculate the total of all the TotalValue (Qty * Unit Price to be displayed in the lblSubtotal Label outside Grid.