Calculate Total of RadGrid based on two columns (Qty * Price) - Clientside

[Dan]

Here is the scenario:

•   I have a RadGrid with 3 columns -- Qty -- Description -- Price Per
•   Data comes in from the server - as a list of items you can select
•   The Qty column is a RadNumbericTextbox with spinner buttons -- Price Per is set from the database
•   When you change the Qty, I want to recalculate the total of all lines for the entire grid and show it in a separate RadNumbericTextbox outside of the RadGrid
•   The math is the sum of Qty * Price Per for all lines.

Attached screenshot shows the grid I am dealing with to give a clear idea...

[Jayesh Goyani]

Hello Dan,

Please check below code snippet.
JS

<telerik:RadCodeBlock ID="RadCodeBlock" runat="server">
       <script type="text/javascript">
           function ValueChanged(sender, args) {
               var grid = $find("<%=RadGrid1.ClientID %>");

               var totalAmount = 0;

               if (grid) {
                   var MasterTable = grid.get_masterTableView();
                   var Rows = MasterTable.get_dataItems();
                   for (var i = 0; i < Rows.length; i++) {
                       var row = Rows[i];

                       var txtQuntity = row.findControl("txtQuntity");
                       var price = parseFloat(row.getDataKeyValue("Price"));
                       totalAmount = totalAmount + (parseFloat(txtQuntity.get_value()) * parseFloat(price));

                   }
               }

               var RadNumericTextBox1 = $find("<%=RadNumericTextBox1.ClientID %>");
               RadNumericTextBox1.set_value(totalAmount);

           }
       </script>
   </telerik:RadCodeBlock>

.aspx

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
       </telerik:RadScriptManager>
       <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource">
           <MasterTableView DataKeyNames="Price" ClientDataKeyNames="Price" Name="parent">
               <Columns>
                   <telerik:GridBoundColumn DataField="Price" UniqueName="Price" HeaderText="Price">
                   </telerik:GridBoundColumn>
                   <telerik:GridTemplateColumn>
                       <ItemTemplate>
                           <telerik:RadNumericTextBox ID="txtQuntity" runat="server" ShowSpinButtons="true"
                               Value="1" MinValue="1" AllowOutOfRangeAutoCorrect="true">
                               <NumberFormat DecimalDigits="0" />
                               <ClientEvents OnValueChanged="ValueChanged" />
                           </telerik:RadNumericTextBox>
                       </ItemTemplate>
                   </telerik:GridTemplateColumn>
               </Columns>
           </MasterTableView>
       </telerik:RadGrid>
       <br />
       <telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server">
       </telerik:RadNumericTextBox>

.aspx.cs

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {

        DateTime dt = new DateTime();

        dynamic data = new[] {
                new { ID = 1, Name ="Name1", customdate=dt,Price = 1.1},
                new { ID = 2, Name = "Name2", customdate=dt,Price = 1.1},
                new { ID = 3, Name = "Name3", customdate=dt,Price = 1.1},
                new { ID = 4, Name = "Name4", customdate=dt,Price = 1.1},
                new { ID = 5, Name = "Name5", customdate=dt,Price = 1.1}
            };

        RadGrid1.DataSource = data;
    }

Note : If you not able to find the quantity control from grid then use below method.

var txtQuntity = $(row.get_element()).find("input[id*='txtQuntity']").get(0);
var txtQuntity = $telerik.findControl(row.get_element(), "txtQuntity");

Thanks,
Jayesh Goyani

[Dan]

Thanks for the quick help.  That looks about right.  Here is what I ended up doing:

var totalAddons = 0.00;

function calcAddons(sender, args) {
    // First roll back any Addon Calculations
    $get("TotalOptional").value = ($get("TotalOptional").value - totalAddons).toFixed(2);
    // Clear out Addons and recalc
    totalAddons = 0.00;
    var grid = $find("<%= OptionalAddons.ClientID %>");
    var masterTable = grid.get_masterTableView();
    for (var i = 0; i < masterTable.get_dataItems().length; i++) {
        var dataItem = masterTable.get_dataItems()[i];
        var unitPrice = dataItem.getDataKeyValue("UnitPrice").replace(",", "");
        var cell = masterTable.getCellByColumnUniqueName(dataItem, "Quantity");
        var numberBox = cell.getElementsByTagName("INPUT")[0];
        if (numberBox && numberBox.value) {
            totalAddons += unitPrice * parseFloat(numberBox.value);
        }
    }
    // Update the numbers
    $get("TotalOptional").value = (parseFloat($get("TotalOptional").value) + totalAddons).toFixed(2);
}

<telerik:RadGrid runat="server" ID="OptionalAddons" AllowPaging="false" AllowMultiRowSelection="true"
    Width="100%" AllowSorting="true" AutoGenerateColumns="False" OnNeedDataSource="OptionalAddons_NeedDataSource"
    Skin="Metro" ShowFooter="false">
    <ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true" EnableRowHoverStyle="false"
        ColumnsReorderMethod="Reorder">
        <Selecting AllowRowSelect="false" EnableDragToSelectRows="true" />
        <Resizing ClipCellContentOnResize="false" AllowColumnResize="true" AllowResizeToFit="true"
            EnableRealTimeResize="true" />
    </ClientSettings>
    <MasterTableView DataKeyNames="AddOnID,Quantity,UnitPrice" ClientDataKeyNames="AddOnID,Quantity,UnitPrice"
        AllowMultiColumnSorting="true" CommandItemDisplay="None" EnableNoRecordsTemplate="true">
        <NoRecordsTemplate>
            <div style="padding: 4px 2px">
                -- No Optional Add-ons Available --</div>
        </NoRecordsTemplate>
        <Columns>
            <%--<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderStyle-Width="35" />--%>
            <telerik:GridTemplateColumn HeaderText="Qty" UniqueName="Quantity" SortExpression="Quantity"
                HeaderStyle-Width="75" ItemStyle-CssClass="centerAlign" ItemStyle-HorizontalAlign="Center"
                HeaderStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    <telerik:RadNumericTextBox runat="server" ID="Qty" Value="0" NumberFormat-DecimalDigits="0"
                        Width="50" EnabledStyle-HorizontalAlign="Right" CssClass="textbox rounded shadow hovershadow"
                        ShowSpinButtons="true" MinValue="0" MaxValue="10">
                        <ClientEvents OnValueChanged="calcAddons" />
                    </telerik:RadNumericTextBox>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="Add-Ons Included in Selected Package" UniqueName="Description"
                SortExpression="Description">
                <ItemTemplate>
                    <%# DataBinder.Eval(Container.DataItem, "Description")%>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridNumericColumn Aggregate="Sum" DataField="UnitPrice" DataType="System.Decimal"
                HeaderText="Price Per" UniqueName="UnitPrice" DataFormatString="{0:N2}" ItemStyle-HorizontalAlign="Right"
                FooterStyle-CssClass="rightAlign" ItemStyle-CssClass="rightAlign" HeaderStyle-HorizontalAlign="Right" />
        </Columns>
    </MasterTableView>
</telerik:RadGrid>