RadGrid loses the focus when press tab on filter

[Mayur]

Hi,

I have a radgrid in which i am using filter functionality,when i enter some text on one of the column and press tab the focus gets lost whereas i want the focus on next radgrid column, i am not able to do so.


Please suggest.


Thanks.

[Viktor Tachev]

Hello Mayur,

In order for the results in the grid to be filtered a postback is triggered when an item from the FilterMenu is selected. Because of this the behavior you describe is expected - the focus is lost.

In order to focus the filter TextBox in the next column after a filter is applied you would need to use custom implementation. You could use a HiddenField to keep a value indicating what was the last column with applied filter. Based on that value you could use the client-side pageLoad event to focus the next filtering item in RadGrid.

For convenience I am attaching a sample project where the described approach is illustrated. Try using similar approach and you should be able to achieve the functionality you are looking for.

Regards,
Viktor Tachev
Telerik

[Mayur]

Thank you for the solution,but i am not able to type the text for that column how to achieve it .

[Viktor Tachev]

Hello Mayur,

I tried replicating the behavior you describe, however I was unable to. When I pressed tab after entering text in the second column filter the filtering textbox for the next column was focused. I made a short video as reference that is available here. Would you take a look at it and let me know if I am missing something?

Also would you elaborate what modifications should be made to the sample project in order for the problematic behavior to be observed?

Regards,
Viktor Tachev
Telerik

 

 

[Mayur]

Hi Viktor,

First of all thank you for replying me,but i am facing the issue in core IE8 as focus gets lost but its working in IE9 and IE10 but not in IE8 .

[Viktor Tachev]

Hi Mayur,

The reason for the behavior that you are observing in IE8 is that getElementsByClassName() is not supported in this and previous versions of the browser.

In order to overcome this you could add little code that defines the method if it is not supported by the browser. The pageLoad() method would look like the following.

function pageLoad() {

    if (typeof document.getElementsByClassName != 'function') {
        document.getElementsByClassName = function () {
            var elms = document.getElementsByTagName('*');
            var ei = new Array();
            for (i = 0; i < elms.length; i++) {
                if (elms[i].getAttribute('class')) {
                    ecl = elms[i].getAttribute('class').split(' ');
                    for (j = 0; j < ecl.length; j++) {
                        if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                            ei.push(elms[i]);
                        }
                    }
                } else if (elms[i].className) {
                    ecl = elms[i].className.split(' ');
                    for (j = 0; j < ecl.length; j++) {
                        if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                            ei.push(elms[i]);
                        }
                    }
                }
            }
            return ei;
        }
    }

    var hiddenField = document.getElementById("HiddenField1");

    if (hiddenField.value != "") {
        var filterBoxes = document.getElementsByClassName("rgFilterBox");

        var lastFocusedtextBoxId = hiddenField.value;
        var textBoxToFocus;

        for (var i = 0; i < filterBoxes.length; i++) {
            if (filterBoxes[i].id.indexOf(lastFocusedtextBoxId) != -1) {
                // check if filter was applied to the last column
                if (i < (filterBoxes.length - 1)) {
                    textBoxToFocus = filterBoxes[i + 1].id;
                    break;
                }
            }
        }

        if (textBoxToFocus) {
            document.getElementById(textBoxToFocus).focus();
        }
    }
}

Try this modification and you should see the expected results in IE8 also.

Regards,
Viktor Tachev
Telerik

 

 

[Mayur]

Thanks for your reply,i have applied code but code is not working when i press tab from Grid Template Column, the focus does not shift to next column

[Viktor Tachev]

Hi Mayur,

I have prepared a sample project where the functionality seems to work as expected on my end. The middle column is a GridTemplateColumn. When you enter a value in the filter field and press tab the third column is focused. Give the project a try and let me know if it is working for you.

Regards,
Viktor Tachev
Telerik