CalculatedColumn In Batch Editing

13 posts, 1 answers
  1. Jason
    Jason avatar
    9 posts
    Member since:
    Sep 2013

    Posted 01 Sep 2013 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 02 Sep 2013 Link to this post

    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
  3. Jason
    Jason avatar
    9 posts
    Member since:
    Sep 2013

    Posted 02 Sep 2013 Link to this post

    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


  4. Answer
    Angel Petrov
    Admin
    Angel Petrov avatar
    1076 posts

    Posted 04 Sep 2013 Link to this post

    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.
  5. Jason
    Jason avatar
    9 posts
    Member since:
    Sep 2013

    Posted 04 Sep 2013 Link to this post

    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.

  6. Angel Petrov
    Admin
    Angel Petrov avatar
    1076 posts

    Posted 09 Sep 2013 Link to this post

    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.
  7. أشرف
    أشرف avatar
    88 posts
    Member since:
    Jan 2011

    Posted 25 Nov 2013 Link to this post

    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.
  8. Angel Petrov
    Admin
    Angel Petrov avatar
    1076 posts

    Posted 28 Nov 2013 Link to this post

    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.
  9. Renu
    Renu avatar
    4 posts
    Member since:
    Jul 2017

    Posted 15 Feb 2018 Link to this post

    Hi there,

    Still the feature is not available in Kendo?

    I am using Kendo UI for ASP.Net MVC.

     

  10. Neil N
    Neil N avatar
    89 posts
    Member since:
    Aug 2012

    Posted 05 Jan Link to this post

    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>
  11. Eyup
    Admin
    Eyup avatar
    3647 posts

    Posted 09 Jan Link to this post

    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.
  12. Neil N
    Neil N avatar
    89 posts
    Member since:
    Aug 2012

    Posted 09 Jan in reply to Eyup Link to this post

    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,

  13. Eyup
    Admin
    Eyup avatar
    3647 posts

    Posted 14 Jan Link to this post

    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.
Back to Top