OnBatchEditCellValueChanged and changeCellValue causing many problems

[Jeremy Yoder]

 

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>

 

 

 

[Jeremy Yoder]

 

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

 

[Maria Ilieva]

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

[Jeremy Yoder]

 

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);
        }
    }
}

 

[Maria Ilieva]

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

[Jeremy Yoder]

 

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?

 

[Jeremy Yoder]

 

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.

[Maria Ilieva]

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