Profound Logic Forums

Posted: **Tue Dec 07, 2021 3:47 pm**

Here's the situation.
I have a grid full of items. The requirement is that the user scans a UPC code, or enters an item number, the grid automatically scrolls to that item in the grid, a quantity text box is focused on, and highlighted. The user enters a quantity, and scans the next item. This was working sort of. The findItem function is called on the change event of the item number field. The item is found in the grid and the grid scrolls to that item. However, I'm getting a null object when trying to .focus() and .select() the text box so the user can enter data. This is the JS Code:

Code: Select all

function findItem(itemIn) {
    ajaxJSON({
        url: "/profoundui/universal/SBTValidItem",
        params: {
            itemNumber: itemIn
        },
        method: "get",
        async: false,
        handler: function (ob) {
            if (ob.success) {
                var x = findRow(ob.itemNumber);
                if (x === 0) {
                    this.focus();
                    var thisItem = getObj("txtItemNumber");
                    pui.errorTip(thisItem, "Item not found in grid");
                    thisItem.focus(); 
                    thisItem.select();
                } else {
                    
                    setTimeout (function() {
                        this.focus();                        
                        pui.set("txtItemNumber",ob.itemNumber);
                        let myGrid = getObj("Grid1");
                        myGrid.grid.scrollToRow(x);
                        let myCount = "txtCount." + x;
                        let objCount = getObj(myCount);
                        objCount.focus(); <--- here is where the code fails. Says objCount is null
                        objCount.select();
                    },200);
                }

            }
            else {
                this.focus();
                var thisItem = getObj("txtItemNumber");
                applyProperty(thisItem, "set focus ", "true");
                applyProperty(thisItem, " field type ", "textbox");
                pui.errorTip(thisItem, "Invalid Item/UPC Number");
                thisItem.select();
            }
        }

    });
}

function findRow(itemNumber) {
    var myGrid = getObj("Grid1");
    var recordCount = myGrid.grid.getRecordCount();
    var found = 0;
    myGrid.grid.scrollToRow(recordCount);
    myGrid.grid.scrollToRow(1);

    for (var x = 1; x <= recordCount; x++) {
        var curItem = myGrid.grid.getDataValue(x, "SFITM#");
        if (itemNumber == curItem) {
            var count = getObj("txtCount." + x);
            found = x
            return found;
        }

    }
    return found;
}

Funny thing is that I can see that ID in the Elements section of the Chrome developer tools. However getObj fails to return a reference to it.

Posted: **Tue Dec 07, 2021 5:00 pm**

It's hard to say without being able to run/debug it.

But, these are my thoughts (educated guess):

The grid does not create the HTML DOM elements until you scroll each row onto the screen. For example, if you wanted to access row 50 of the grid, your code would look for DOM element "txtCount.50". But, if row 50 has never been on the screen, it will not exist yet.
Your code does myGrid.grid.scrollToRow(x) -- which would cause it to scroll that row into view (so if the HTML doesn't exist, it will be created). However, I suspect the HTML creation is being done in the background, so most likely your getObj() would run before it is created.
You also do this.focus() -- and honestly, this may work fine? But, as an experienced JS programmer, I'm not even sure what 'this' would be at this point. It's in a setTimeout() called from an AJAX response handler... what would 'this' reflect? I would suggest not coding like that -- even if it works -- it's really hard to follow.

Posted: **Wed Dec 08, 2021 9:13 am**

Thanks Scott, that all makes sense. And thanks for the JS tip.

Posted: **Wed Dec 08, 2021 9:20 am**

So, it was as simple as, after the scrollToRoll(), nesting the select logic in another setTimout function. Now it works fine.

Thanks again.

Profound Logic Forums

Problem with Finding an item in a grid (again)

Problem with Finding an item in a grid (again)

Re: Problem with Finding an item in a grid (again)

Re: Problem with Finding an item in a grid (again)

Re: Problem with Finding an item in a grid (again)