OnBatchEditCellValueChanged and changeCellValue causing many problems

8 posts, 0 answers
  1. Jeremy Yoder
    Jeremy Yoder avatar
    131 posts
    Member since:
    Dec 2009

    Posted 18 Mar Link to this post

     

    My RadGrid is in batch mode, and I want to update a 3rd column if the 1st or 2nd column are updated. Given my javascript and markup below, it "kind of" works, because when I update column 1 or 2 and tab off (to go to next field) it updates column 3, so that's good. But there are a couple of problems...

    1) After changing column 1 or 2, when I tab off (or mouse click off) the original cell remains in edit mode and doesn't close.

    2) Regardless if I change a value or not, when I hit the up or down arrow from any edittable cell, the focus moves to the row and cell above or below, as desired. However, the highlighted row selection doesn't change, but remains on the original line. This is needed as I have a javascript function (not included here but seen in the markup via OnRowSelected) that I need to call.

    How do I get around these 2 problems?

     

    3) Bonus question: Any way to get around all the data manipulation I'm doing to turn the string "1,000.0000" into number 1000 for my calculation? Seems I should be able to reference the RadNumericTextBox and simply call .get_value() but maybe that's not possible?

     

    function replaceString(str, oldValue, newValue) {
        // The string.replace function replaces first instance; use reg exp to replace all.
        var r = new RegExp(oldValue, "g"); // g = global, so changes them all.
        return str.replace(r, newValue);
    }
     
    function setNumber(val) {
        var temp = replaceString(val, ',', ''); // Number (and parseFloat) don't account for commas
        return Number(temp);
    }
     
    function BatchEditCellValueChanged(sender, args) {
     
        var grd = sender;
        var masterTable = grd.get_masterTableView();
        var rows = masterTable.get_dataItems();
        var rowArgs = args.get_row();
        var rowIndex = rowArgs.sectionRowIndex;
        var row = rows[rowIndex];
        var batchManager = grd.get_batchEditingManager();
        var colName = args.get_columnUniqueName();  // Column that's been changed
     
        switch (colName) {
            case 'PurchaseOrderDetailQuantity':
            case 'UnitPrice':
                var qty = batchManager.getCellValue(row.get_cell('PurchaseOrderDetailQuantity'));
                var unitPrice = batchManager.getCellValue(row.get_cell('UnitPrice'));
                var result = setNumber(qty) * setNumber(unitPrice);
                if (result !== 0) { // Never set the amount to zero.
                    batchManager.changeCellValue(row.get_cell('PurchaseOrderDetailAmount'), result);
                }
                break;
        }
    }

     

    <telerik:RadGrid ID="grdPODetails" runat="server" AllowSorting="True" AutoGenerateColumns="False" Skin="Office2010Blue" GridLines="None">
        <HeaderContextMenu EnableAutoScroll="True">
        </HeaderContextMenu>
        <MasterTableView CommandItemDisplay="Top" EditMode="Batch" InsertItemDisplay="Bottom"
                ClientDataKeyNames="PurchaseOrderDetailKey"
                DataKeyNames="PurchaseOrderDetailKey">
            <BatchEditingSettings EditType="Cell" OpenEditingEvent="Click" />
            <CommandItemSettings ShowRefreshButton="False" ShowSaveChangesButton="true" ShowCancelChangesButton="true" />
            <NoRecordsTemplate>
                No detail lines to display.
            </NoRecordsTemplate>
            <Columns>
                <telerik:GridTemplateColumn DataField="PurchaseOrderDetailQuantity" HeaderText="Quantity" UniqueName="PurchaseOrderDetailQuantity" DataType="System.Double">
                    <ItemTemplate>
                        <asp:Label ID="lblPurchaseOrderDetailQuantity" runat="server"
                            Text='<%# Eval("PurchaseOrderDetailQuantity") %>'>
                        </asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <telerik:RadNumericTextBox ID="txtPurchaseOrderDetailQuantity" runat="server" DataType="System.Decimal" MaxLength="23" Width="100%"
                            IncrementSettings-InterceptArrowKeys="false" Culture="English (United States)"
                            DbValue='<%# Bind("PurchaseOrderDetailQuantity") %>' Type="Number" NumberFormat-DecimalDigits="4" />
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn DataField="UnitPrice" HeaderText="UnitPrice" UniqueName="UnitPrice" DataType="System.Double">
                    <ItemTemplate>
                        <asp:Label ID="lblUnitPrice" runat="server"
                            Text='<%# Eval("UnitPrice") %>'>
                        </asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <telerik:RadNumericTextBox ID="txtUnitPrice" runat="server" DataType="System.Decimal" MaxLength="23" Width="100%"
                            IncrementSettings-InterceptArrowKeys="false" Culture="English (United States)"
                            DbValue='<%# Bind("UnitPrice") %>' Type="Number" NumberFormat-DecimalDigits="4" />
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn DataField="PurchaseOrderDetailAmount" HeaderText="Amount" UniqueName="PurchaseOrderDetailAmount" DataType="System.Double">
                    <ItemTemplate>
                        <asp:Label ID="lblPurchaseOrderDetailAmount" runat="server"
                            Text='<%# Eval("PurchaseOrderDetailAmount") %>'>
                        </asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <telerik:RadNumericTextBox ID="txtPurchaseOrderDetailAmount" runat="server" DataType="System.Decimal" MaxLength="21" Width="100%"
                            IncrementSettings-InterceptArrowKeys="false" Culture="English (United States)"
                            DbValue='<%# Bind("PurchaseOrderDetailAmount") %>' Type="Number" NumberFormat-DecimalDigits="2" />
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridNumericColumn DataField="PurchaseOrderDetailKey" HeaderText="PurchaseOrderDetailKey"
                    UniqueName="PurchaseOrderDetailKey" DataType="System.Int32" Visible="False" ReadOnly="True">
                </telerik:GridNumericColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings AllowKeyboardNavigation="true">
            <Selecting AllowRowSelect="True" />
            <ClientEvents OnRowSelected="RowSelected" OnBatchEditCellValueChanged="BatchEditCellValueChanged"/>
        </ClientSettings>
    </telerik:RadGrid>

     

     

     

  2. Jeremy Yoder
    Jeremy Yoder avatar
    131 posts
    Member since:
    Dec 2009

    Posted 23 Mar in reply to Jeremy Yoder Link to this post

     

    For my question 2 above, I was playing around and created a ClientEvent for OnActiveRowChanged in my grid above, as described in link below, but it doesn't work -- the function isn't even called. Maybe it's unrelated to the keyboard navigation issue, but pointing it out in case it helps. Looking forward to hearing from you regarding these issues.

    http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/events/onactiverowchanged

     

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 23 Mar Link to this post

    Hi Jeremy,

    1. I would suggest you instead of using the "BatchEditCellValueChanged" event for performing your logic to call it in "OnBatchEditClosed" event with a small timeout and see how it goes.

    2. The described behaviour is expected and in this case you shroud manually select row by using the "OnBatchEditOpened" event for example.

    3.Unfortunately this behvaiour can not be avoid after the logic is moved in the "OnBatchEditClosed" event.


    Regards,
    Maria Ilieva
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  5. Jeremy Yoder
    Jeremy Yoder avatar
    131 posts
    Member since:
    Dec 2009

    Posted 29 Mar Link to this post

     

    1) Tried your suggestion with code below. Now when I change the PurchaseOrderDetailQuantity value and tab out of the field to the UnitPrice field, it creates an endless loop and there is flickering. It does the same if I set the timeout to 100. What's the problem? Can you please post an actual code solution?

    2) That's unfortunate. Ok then, how? I need actual code. I tried with the code further down, but it doesn't work. (The code is called and if I uncomment the alert line, it seems to popup the correct row index, but it's not selecting the row.) Please advise.

     

    function BatchEditClosed(sender, args) {
     
        var grd = sender;
        var masterTable = grd.get_masterTableView();
        var rows = masterTable.get_dataItems();
        var rowArgs = args.get_row();
        var rowIndex = rowArgs.sectionRowIndex;
        var row = rows[rowIndex];
        var batchManager = grd.get_batchEditingManager();
        var colName = args.get_columnUniqueName();  // Column that's been changed
     
        switch (colName) {
            case 'PurchaseOrderDetailQuantity':
            case 'UnitPrice':
                var qty = batchManager.getCellValue(row.get_cell('PurchaseOrderDetailQuantity'));
                var unitPrice = batchManager.getCellValue(row.get_cell('UnitPrice'));
                var result = setNumber(qty) * setNumber(unitPrice);
                if (result !== 0) { // Never set the amount to zero.
                    setTimeout(function () {
                        batchManager.changeCellValue(row.get_cell('PurchaseOrderDetailAmount'), result);
                    }, 0);
                }
                break;
        }
    }

     

    function BatchEditOpened(sender, args) {
        var dataItems = args.get_tableView().get_dataItems();
        var rowID = args.get_row().id;
        for (var i = 0; i < dataItems.length; i++) {
            if (dataItems[i].get_element().id == rowID) {
                dataItems[i].set_selected(true);
                //alert(i);
            }
        }
    }

     

  6. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 04 Apr Link to this post

    Hello Jeremy,

    Note that the issue you are facing is because the tab action opens and closes cell and this is conflicting with the " changeCellValu" method and actually this scenario is not fully supported by the RadGrid control.
    You can test the attached applictaion where I demonstrates a possible custom appraoch for achieving the required functionality.
    Give this a try and see if this works for you.

    Regards,
    Maria Ilieva
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  7. Jeremy Yoder
    Jeremy Yoder avatar
    131 posts
    Member since:
    Dec 2009

    Posted 04 Apr Link to this post

     

    Your example has a few problems. If I click in any Quantity field and move off it (by clicking or whatever) the Amount columns isn't updated. Something to do with the preventCellChange value preventing it, but I don't get how that should work since it only resets when you hit tab, and the user doesn't only have to hit tab to move off a cell.

    Also, if I click any UnitPrice field and then hit the down arrow, it creates the flickering endless loop problem I posted above. And the row still isn't getting selected, so dataItems[i].set_selected(true) still doesn't work.

    You said "this scenario is not fully supported" but I don't feel like I'm asking for much -- I only want to update a field based on 2 other fields getting changed, and select the row with the focus. What exactly isn't supported?

     

  8. Jeremy Yoder
    Jeremy Yoder avatar
    131 posts
    Member since:
    Dec 2009

    Posted 06 Apr in reply to Jeremy Yoder Link to this post

     

    FYI, I don't think you need to answer this any further. I created a ticket out there to try to answer all my issues, which includes these.

  9. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 07 Apr Link to this post

    Hello,

    I will close this case and you can continue the support communication in the new opened ticket and discuss the current issues there.

    Regards,
    Maria Ilieva
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017