Setting Focus on Filter when Query is Run

BLOMASKY

I have many queries with the filter bar enabled. (see below). How can I have the 1st filter field get focus when the user starts the query. (In this example, I would like the cursor to start in the Filter field for the customer name).

Thanks

Bruce

Screen Shot 2019-02-14 at 12.05.05 PM.png

aware_support

No easy way to do it - you would need to write a Javscript that executes after query has been rendered

idpSteve

Try add this to the render script:

$("k-input:first").focus();

Let me know if it works 🙂

EDIT: The render script of the query 😛

BLOMASKY

idpSteve wrote
Try add this to the render script:

$("k-input:first").focus();

Let me know if it works 🙂

EDIT: The render script of the query 😛

Thanks for the try, but this did not work. (Am I the only one who has a customer requesting this?)

Bruce

aware_support

The expression $("k-input:first").focus(); selects the first input field on the screen. A filter may not be the first one - it depends on what else is there beside the query.

So you need to set it in the first (possibly) field INSIDE the query element.

$('#" + parser.m_widgetInfo.wrapperId) gives you the query element.

So maybe this will work:
$('#" + parser.m_widgetInfo.wrapperId).find ("k-input:first").focus ()

If not, it should give you an idea what to do to get it to work.

johntalbott

aware_support wrote
The expression $("k-input:first").focus(); selects the first input field on the screen. A filter may not be the first one - it depends on what else is there beside the query.

So you need to set it in the first (possibly) field INSIDE the query element.

$('#" + parser.m_widgetInfo.wrapperId) gives you the query element.

So maybe this will work:
$('#" + parser.m_widgetInfo.wrapperId).find ("k-input:first").focus ()

If not, it should give you an idea what to do to get it to work.

There is a missing "dot" before k-input. It should be:
$('#" + parser.m_widgetInfo.wrapperId).find (".k-input:first").focus ()

Other options that produce the same result.

widget.element.find(".k-input:first").focus()

widget.element.find(".k-input").first().focus()

It's not likely going to be noticeable, but I believe the last one is technically the fastest.

BLOMASKY

Thank you all idea how to set focus on 1st filter in query. But all of the solutions have some issues.

None of them work if you are using a pulldown menu to launch the query. Some of them work once, (the 1st time I run it, it opens a new tab and the first filter has focus, but if I close the tab, and try again, nothing happens.)

With Jaymers help we guessed it was happening too early in the process so tied this to the databound event, so it looks like this:

var myGrid = widget;
myGrid.bind("dataBound", onGridDatabound);
function onGridDatabound(e) {
widget.element.find(".k-input").first().focus();
}

This will now run reliably if I call the query off of the top menu bar, but does not work if the query is part of a pulldown menu item.

Bruce

aware_support

In theory it shouldn't matter how the query was called. If there is nothing in the Javascript console, check if it is still a timing issue:

setTimeout (function () {
widget.element.find(".k-input").first().focus();
}, 2000);

where 2000 is time delay in milliseconds that you can vary.