How do I keep focus on PXNumberEdit field after postback?

Question

I have a PXNumberEdit field which, on enter, adds a product to a grid on a customized SO301000 page. The insert works and the field is emptied after the product is added. However, I would like to return the focus to that field. There doesn't seem to be a SetFocus method for the field.

I have tried using the SO301000.cs code behind to set the focus, by adding a function for onValueChanged to save the object as session variable and on pageload to set the focus on the saved object. This causes the page to never finish loading.

I have also tried to use jquery in various ways but that hasn't worked either. Is there a way to do this?

Answer 1

The Hack

There is no SetFocus method in the framework like there is for SetEnabled/SetDisplayName/SetVisibility because most events are raised on focus changes and the framework ensures that the focus is not lost on every record updates. To set it up manually, you will then need to wait that the callback is completed before setting the focus.

To do so you will need to add a Javascript delegate to the list of event handlers to be called once the callback is over. The following code will set the focus on Customer Reference Nbr. every time Customer ID is changed (in SO301000):

<script type="text/javascript">
    function FormView_Load() {
        px_callback.addHandler(setFocusOnCustRef);
        return;
    }

    var setFocus = false;
    function CustomerID_ValueChanged() {
        setFocus = true;
        return;
    }

    function setFocusOnCustRef(context, error) {
        if (setFocus === true)
        {
            setFocus = false;
            var refNbr = px_alls["edCustomerRefNbr"];
            refNbr.focus();
        }
        return;
    }
</script>
<px:PXFormView ID="form" runat="server" DataSourceID="ds" Style="z-index: 100" Width="100%" DataMember="Document" Caption="Order Summary"
    NoteIndicator="True" FilesIndicator="True" LinkIndicator="True" EmailingGraph="PX.Objects.CR.CREmailActivityMaint,PX.Objects"
    ActivityIndicator="True" ActivityField="NoteActivity" DefaultControlID="edOrderType" NotifyIndicator="True"
    TabIndex="14900" ClientEvents-Initialize="FormView_Load">

     ...

    <px:PXSegmentMask CommitChanges="True" ID="edCustomerID" runat="server" DataField="CustomerID" AllowAddNew="True"
            AllowEdit="True" DataSourceID="ds" ClientEvents-ValueChanged="CustomerID_ValueChanged"/>

     ...

</px:PXFormView>

Note that I added ClientEvents-Initialize="FormView_Load" on the PXFormView and ClientEvents-ValueChanged="CustomerID_ValueChanged" on the CustomerID's PXSegmentedMask.

As you can see this is a hack... When the setFocusOnCustRef is raised we have just refreshed the record (RowSelected) and we don't know what was changed prior to that (what field has been changed? was the change canceled?). The context that is passed to the delegate is only related to re-updating the records. To get a better understanding of what events are raised and in which order, please refer to the Update Scenario Event Model:

Thoughts and Tips

1. I don't know much of your implementation but I would like to point out that your needs look very similar to the function Add Stock Item that opens a SmartPanel with the buttons Add/Add & Close/Cancel. If the callback is raised from a button you will have meaningful information in your context and won't need to add a Javascript event on ValueChanged.
2. When you Save/Cancel. The focus will return to your first form element in the tab order (if successful).
3. You can set the Tab Order directly in the PXUIFieldAttribute : PXUIField(DisplayName = "Asset ID", Visibility = PXUIVisibility.SelectorVisible, TabOrder=1)]