Grid retaining focus after clicking outside

[MBTreeParticipant]

Hi,

We are currently using a jqxgrid as part of a form for users to fill out. Many of the cells in the grid use a custom dropdownlist or other editor. However, whenever a user tries to click on another text box (or anything) outside of the grid while a cell is being edited, the focus shifts to the top-left-most cell instead of wherever the user clicked.

Looking at the call to endcelledit in the handler, no value is passed for the focus parameter, so the focus will always shift to the top-left-most cell.

Is this intended behavior? If so, is there a way we can change our code to allow the grid to relinquish focus with just one click, without using a prototype to override the whole endcelledit function?

Thanks in advance for any assistance you are able to provide.

[HristoParticipant]

Hello MBTree,

I would like to suggest you look at this example.
It demonstrates how to stop editing of one cell without saving the changes.
Could you clarify your issue?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[MBTreeParticipant]

Thanks for the response,

I can’t seem to get your example to work, the cellselect function is never being called and even if I hardcode a row number in, the cell always saves the changes.

However, my issue is not with saving, it’s with focus.

There is a specific event listener, in the jqxgrid source, that listens for when there is a mousedown event outside the grid while a cell is being edited.
When this happens, there is a call to endcelledit as follows:

self.endcelledit(self.editcell.row, self.editcell.column, false, true);

since there is no fifth argument passed, the focus parameter is undefined, so when there is a call to setfocus:

var setfocus = function () {
                if (focus != false) {
                    if (me.isTouchDevice()) {
                        return;
                    }

                    if (!me.isNestedGrid) {
                        var topPos = me.getScrollTop();
                        var leftPos = me.getScrollLeft();

                        try
                        {
                            me.element.focus();
                            me.content.focus();
                            if (topPos != me.getScrollTop()) {
                                window.scrollTo(leftPos, topPos);
                            }

                            setTimeout(function () {
                                me.element.focus();
                                me.content.focus();
                                if (topPos != me.getScrollTop()) {
                                    window.scrollTo(leftPos, topPos);
                                }
                            }, 10);
                        }
                        catch (error) {
                        }
                    }
                }
            }

The focus will always be pulled to the grid itself.

My issue is that this design means that if I am editing a cell, then try to click on an input outside the gird and type something in there, instead of typing in the outside textbox, I end up typing in the grid instead. So every time a user is working on the grid, they have to double-click to work on something outside of the grid, which is frustrating and non-intuitive.

I’m asking if this is intended behavior, and if so is there a way within the API to change this behavior?

I added an input to your example that helps demonstrate the issue I’m running into: here

[Author]

Posts