CalculatedColumn In Batch Editing in UI for ASP.NET AJAX

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

CalculatedColumn In Batch Editing

12 Answers 151 Views

Grid

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

12 Answers, 1 is accepted

answered on 02 Sep 2013, 08:36 AM

Hi Jason,

Please try the following code snippet.I was able to get the changes made to the columns be reflected on the calculated column automatically when the values are changed and saved.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSource1"

GridLines="None" AllowPaging="true" ShowFooter="true" AllowAutomaticDeletes="true"

AllowAutomaticInserts="true" AllowAutomaticUpdates="true">

<MasterTableView DataKeyNames="OrderID" EditMode="Batch" CommandItemDisplay="Top">

<Columns>

<telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID" />

<telerik:GridBoundColumn UniqueName="ProductID" DataField="ProductID" HeaderText="ProductID" />

<telerik:GridBoundColumn DataField="UnitPrice" HeaderText="UnitPrice" UniqueName="UnitPrice" />

<telerik:GridBoundColumn DataField="Quantity" HeaderText="Quantity" UniqueName="Quantity" />

<telerik:GridBoundColumn DataField="Discount" HeaderText="Discount" UniqueName="Discount" />

<telerik:GridCalculatedColumn HeaderText="Total" UniqueName="TotalPrice" DataType="System.Double"

DataFields="UnitPrice, Quantity" Expression="{0}*{1}" FooterText="Total : " Aggregate="Sum">

</telerik:GridCalculatedColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind_newConnectionString3 %>"

DeleteCommand="DELETE FROM [Order details] WHERE [OrderID] = @OrderID" InsertCommand="INSERT INTO [Order details] ([OrderID],[UnitPrice], [Quantity],[ProductID],[Discount]) VALUES (@OrderID, @UnitPrice, @Quantity,@ProductID,@Discount)"

SelectCommand="SELECT [OrderID], [UnitPrice], [Quantity],[ProductID],[Discount] FROM [Order details] "

UpdateCommand="UPDATE [Order details] SET [UnitPrice] = @UnitPrice,  [Quantity] = @Quantity,[ProductID]=@ProductID,[Discount]=@Discount WHERE [OrderID] = @OrderID">

<DeleteParameters>

<asp:Parameter Name="OrderID" Type="Int32"></asp:Parameter>

</DeleteParameters>

<InsertParameters>

<asp:Parameter Name="OrderID"></asp:Parameter>

<asp:Parameter Name="ProductID"></asp:Parameter>

<asp:Parameter Name="UnitPrice"></asp:Parameter>

<asp:Parameter Name="Quantity"></asp:Parameter>

<asp:Parameter Name="Discount"></asp:Parameter>

</InsertParameters>

<UpdateParameters>

<asp:Parameter Name="OrderID" Type="Int32"></asp:Parameter>

<asp:Parameter Name="ProductID"></asp:Parameter>

<asp:Parameter Name="UnitPrice"></asp:Parameter>

<asp:Parameter Name="Quantity"></asp:Parameter>

<asp:Parameter Name="Discount"></asp:Parameter>

</UpdateParameters>

</asp:SqlDataSource>

Thanks,
Princy

answered on 02 Sep 2013, 10:02 AM

Dear Princy

thank you for your help. it seems by your code, the calculated column only has been updated after saved, can I get it updated in client side before saved? so the customer can review the total price before saved.

I intercept the client events OnBatchEditSetCellValue="SetCellValue"

but in SetCellValue , I couldn't find the cell of "Total Price"

function SetCellValue(sender, args) {

if (args.get_columnUniqueName() === "Quantity" || args.get_columnUniqueName() === "UnitPrice") {

var row = args.get_row();

var tableview = args.get_tableView();

alert(row.get_cell("TotalPrice").innerText);

// var cell = tableview.getCellByColumnUniqueName(row, "UnitPrice");

//alert(cell.innerHTML);

}

I'd tried many ways to get the cell, above code is failure on get total price cell. Is there any API document for these functions?

PS: I don't need update total price to db, like your code. I just want the interface friendly.

thank you very much.

With best regards

Jason

Accepted

answered on 04 Sep 2013, 01:30 PM

BatchEditingAndCalculatedColumn.zip

Hello Jason,

I am sorry to say but the current implementation of the batch editing functionality does not support modifying the value in the calculated column before an update in the database. However you could log this as a feature request in our feedback portal and if it gets popular enough we might consider including it in a future release.

For now this is achievable by manually calculating the value and placing it in the HTML. A sample demonstration on how to achieve this can be observed in the attached website.

Regards,
Angel Petrov
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

answered on 05 Jan 2019, 04:41 PM

I've been following the example attached by Angel and have run into three issues with the code below.

1) Decimal values in Fee are ignored. So a 4.08 fee x 1 UnitsSold = 4.00 SoldFee

2) Values greater than 999 in UnitsSold are formatted with a comma and calculations result in a NaN.

3) The calculated WeightSold column can be overriden by the user and so is editable. When the javascript populates the column the numeric textbox disappears.

<script type="text/javascript">

function CellValueChanged(sender,args) {

var value = args.get_value();

var columnName = args.get_columnUniqueName();

var feeValue;

var weightValue;

if (columnName == "UnitsSold") {

feeValue = parseDouble(args.get_row().cells[2].innerText);

args.get_row().cells[5].innerText = (value * feeValue).toFixed(2);

weightValue = parseDouble(args.get_row().cells[3].innerText);

args.get_row().cells[6].innerText = value * weightValue;

}

function parseDouble(value) {

if (typeof value == "string") {

value = value.match(/^-?\d*/)[0];

}

return !isNaN(parseInt(value)) ? value * 1 : NaN;

}

</script>

<telerik:RadGrid ID="grdSalesReport" runat="server" CellSpacing="-1" DataSourceID="dsGrdSalesReport" GridLines="Both" Visible="False" AllowAutomaticUpdates="True">

<GroupingSettings CollapseAllTooltip="Collapse all groups"></GroupingSettings>

<MasterTableView AutoGenerateColumns="False" DataKeyNames="ProducerReportDetailID" DataSourceID="dsGrdSalesReport" EditMode="Batch" CommandItemDisplay="Bottom">

<CommandItemSettings ShowAddNewRecordButton="False" ShowRefreshButton="False"/>

<BatchEditingSettings EditType="Cell" />

<Columns>

<telerik:GridBoundColumn DataField="ShortDescription" FilterControlAltText="Filter ShortDescription column" HeaderText="Class" SortExpression="ShortDescription"

UniqueName="ShortDescription" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LongDescription" FilterControlAltText="Filter LongDescription column" HeaderText="Description" SortExpression="LongDescription" UniqueName="LongDescription" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Fee" DataType="System.Decimal" FilterControlAltText="Filter Fee column" HeaderText="Fee" SortExpression="Fee" UniqueName="Fee" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="AvgWeight" DataType="System.Decimal" FilterControlAltText="Filter AvgWeight column" HeaderText="Average Weight" SortExpression="AvgWeight" UniqueName="AvgWeight" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="UnitsSold" DataType="System.Int32" FilterControlAltText="Filter UnitsSold column" HeaderText="Units Sold" SortExpression="UnitsSold" UniqueName="UnitsSold">

<ItemTemplate>

<asp:Label runat="server" ID="lblUnitsSold" BorderStyle="Solid" BorderWidth="2px" BorderColor="#007abb" Width="100px" CssClass="RightAlign" Text='<%# Eval("UnitsSold", "{0}") %>'></asp:Label>

</ItemTemplate>

<EditItemTemplate>

<span>

<telerik:RadNumericTextBox RenderMode="Lightweight" Width="100px" runat="server" ID="tbUnitsSold" CssClass="RightAlign" MinValue="0">

</telerik:RadNumericTextBox>

<span style="color: Red">

<asp:RequiredFieldValidator ID="RequiredFieldValidator1"

ControlToValidate="tbUnitsSold" ErrorMessage="*Required" runat="server" Display="Dynamic">

</asp:RequiredFieldValidator>

</span>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="SoldFee" DataType="System.Decimal" FilterControlAltText="Filter SoldFee column" HeaderText="Total Fee" ReadOnly="True"

SortExpression="SoldFee" UniqueName="SoldFee" >

<ItemStyle CssClass="RightAlign"/>

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="WeightSold" DataType="System.Decimal" FilterControlAltText="Filter WeightSold column" HeaderText="Total Weight" SortExpression="WeightSold" UniqueName="WeightSold">

<ItemTemplate>

<asp:Label runat="server" ID="lblWeightSold" BorderStyle="Solid" BorderWidth="2px" BorderColor="#007abb" Width="100px" CssClass="RightAlign" Text='<%# Eval("WeightSold", "{0}") %>'></asp:Label>

</ItemTemplate>

<EditItemTemplate>

<span>

<telerik:RadNumericTextBox RenderMode="Lightweight" Width="100px" runat="server" ID="tbWeightSold" CssClass="RightAlign">

</telerik:RadNumericTextBox>

<span style="color: Red">

<asp:RequiredFieldValidator ID="RequiredFieldValidator2"

ControlToValidate="tbWeightSold" ErrorMessage="*Required" runat="server" Display="Dynamic">

</asp:RequiredFieldValidator>

</span>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="ProducerReportDetailID" DataType="System.Int32" FilterControlAltText="Filter ProducerReportDetailID column" HeaderText="ProducerReportDetailID" ReadOnly="True" SortExpression="ProducerReportDetailID" UniqueName="ProducerReportDetailID" Display="False">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings AllowKeyboardNavigation="true">

<ClientEvents OnBatchEditSetCellValue="CellValueChanged" />

</ClientSettings>

</telerik:RadGrid>

answered on 09 Jan 2019, 04:33 PM

RadGridEditBatchCalculateMartin.zip

Hi Neil,

You can use the approach demonstrated in the following article to achieve this requirement:
https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/batch-editing/how-to/update-calculated-column-client-side

Alternatively, you can also use another approach as demonstrated in the attached web site sample.

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 14 Jan 2019, 02:57 PM

Hello Neil,

You can resolve this using the following approach:

Once the calculation is ready and you will set it to the numBox cell, you can use one of these instead of changing the html of the cell:

1. If you are using Cell type batch editing and the numbox cell is not currently opened, you can use the changeCellValue method by the dedicated Batch API:
https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/batch-editing/client-side-api

2. If you are using Row type batch editing and the numbox cell is currently opened, you can access the RadNumericTextBox Telerik object and use the numBox.set_value(calculatedValue) approach. You can find it using the findControl method:
https://www.telerik.com/support/kb/aspnet-ajax/details/access-telerik-controls-on-client-side

That should do the trick. If there are any remaining issues, you can open a formal support ticket to send us your grid configuration.

Regards,
Eyup
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.