This is a migrated thread and some comments may be shown as answers.

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

2 Answers 486 Views
Grid
Top achievements
Rank 1
Dan asked on 23 Apr 2012, 11:57 PM
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...

## 2 Answers, 1 is accepted

0
Accepted
Jayesh Goyani
Top achievements
Rank 2
answered on 24 Apr 2012, 10:09 AM
Hello Dan,

Please check below code snippet.
JS
<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));

}
}

}
</script>

.aspx
<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" />
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
<br />

.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}
};

}

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
0
Dan
Top achievements
Rank 1
answered on 24 Apr 2012, 06:20 PM
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
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);
}

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>
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"
<ItemTemplate>
<telerik:RadNumericTextBox runat="server" ID="Qty" Value="0" NumberFormat-DecimalDigits="0"
ShowSpinButtons="true" MinValue="0" MaxValue="10">
</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>

Tags
Grid