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

CalculatedColumn In Batch Editing

12 Answers 238 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 02 Sep 2013, 02:08 AM
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

12 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
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
0
Jason
Top achievements
Rank 1
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


0
Accepted
Angel Petrov
Telerik team
answered on 04 Sep 2013, 01:30 PM
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.
0
Jason
Top achievements
Rank 1
answered on 04 Sep 2013, 02:21 PM
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.

0
Angel Petrov
Telerik team
answered on 09 Sep 2013, 09:44 AM
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
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.
0
أشرف
Top achievements
Rank 1
answered on 25 Nov 2013, 10:57 AM
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.
0
Angel Petrov
Telerik team
answered on 28 Nov 2013, 07:23 AM
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
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.
0
Renu
Top achievements
Rank 1
answered on 15 Feb 2018, 12:45 PM

Hi there,

Still the feature is not available in Kendo?

I am using Kendo UI for ASP.Net MVC.

 

0
Neil N
Top achievements
Rank 1
Veteran
Iron
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>
                        </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>
0
Eyup
Telerik team
answered on 09 Jan 2019, 04:33 PM
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.
0
Neil N
Top achievements
Rank 1
Veteran
Iron
answered on 09 Jan 2019, 05:22 PM

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,

0
Eyup
Telerik team
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.
Tags
Grid
Asked by
Jason
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Jason
Top achievements
Rank 1
Angel Petrov
Telerik team
أشرف
Top achievements
Rank 1
Renu
Top achievements
Rank 1
Neil N
Top achievements
Rank 1
Veteran
Iron
Eyup
Telerik team
Share this question
or