CalculatedColumn In Batch Editing

[Jason]

I'd like know how to use CalculatedColumn in Batch Editing mode. The most common scenario is UnitPrice * Quantity = Total Price. 

CalculatedColumn works fine in first inquiry. But when grid in Batch Editing mode, the Calculated Column in Client side has no mechanism to  automatically calculate.  I try to update total price cell  by java code, but I found there is no way to find the element. 

Please kindly help me to implement this. 

With best regards

Jason

[Princy]

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

[Jason]

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

[Angel Petrov]

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

[Jason]

Dear Angel

Thank you for your help.  This demo helps a lot.

Meanwhile, align attributions are missing from new row inserted in Batch Editing mode.

[Angel Petrov]

Hello Jason,

Do you mean that the editors in the new records are not aligned properly? The was such an issue when some of the columns were hidden by setting Display="False". However this problem is already fixed and if you download the latest internal build you should not experience such behavior.

Regards,
Angel Petrov
Telerik

[أشرف]

Greetings,

My company business requires this feature too. In fact, I'm currently writing a general solution to this problem.
Was this feature requested on the feedback portal? If so, please provide me with the issue link to upvote it.

[Angel Petrov]

Hi Ashraf,

I researched our feedback portal but was unable to find a feature request for the mentioned functionality. For now you can follow the approach demonstrated in the below attached project.

Regards,
Angel Petrov
Telerik

[Renu]

Hi there,

Still the feature is not available in Kendo?

I am using Kendo UI for ASP.Net MVC.

 

[Neil N]

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>
                        </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>
                        </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>

[Eyup]

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

[Neil N]

Hi Eyup,

Please look at my point #3 again: "The calculated WeightSold column can be overriden by the user and so
is editable. When the javascript populates the column the numeric textbox disappears."

My code follows the approach in the article you pointed out but the article does not have have the same scenario and won't encounter the same issue. That is, the calculated column is also editable and thus has an EditItemTemplate,

[Eyup]

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