jQWidgets Forums

Tagged: angular grid, autofocus, custom filter textbox, focus, grid, jquery grid, jqxgrid

This topic contains 4 replies, has 2 voices, and was last updated by Dimitar 9 years, 4 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

custom filter textbox autofocus Posts

January 4, 2016 at 8:16 am custom filter textbox autofocus #80007

Rajesh

Participant

HI All,

I implement custom text filter its working very nice
but i have just one requirement i want to show filter textbox autofocus
i already apply autofocus property but not working for filter textbox

Thanks,
Rajesh.

January 5, 2016 at 2:23 pm custom filter textbox autofocus #80052

Rajesh

Participant

Hi All,

Please reply if have any solution its urgent

Thanks,
Rajesh

January 6, 2016 at 8:17 am custom filter textbox autofocus #80088

Dimitar

Participant

Hi Rajesh,

I am not sure how you have created the custom text filter, but here is a solution that might be suitable in your case:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "jsonp",
                datafields: [
                    { name: 'countryName' },
                    { name: 'name' },
                    { name: 'population', type: 'float' },
                    { name: 'continentCode' },
                    { name: 'adminName1' }
                ],
                async: false,
                url: "http://api.geonames.org/searchJSON",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 20,
                    username: "jqwidgets"
                }
            };

            var dataAdapter = new $.jqx.dataAdapter(source,
                {
                    formatData: function (data) {
                        data.name_startsWith = $("#searchField").val();
                        return data;
                    }
                }
            );

            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                columns: [
                    { text: 'City', datafield: 'name', width: 170 },
                    { text: 'Country Name', datafield: 'countryName', width: 200 },
                    { text: 'Population', datafield: 'population', cellsformat: 'f', width: 170 },
                    { text: 'Continent Code', datafield: 'continentCode', minwidth: 110 }
                ],
                showtoolbar: true,
                autoheight: true,
                rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div style='margin: 5px;'></div>");
                    var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'>Search City: </span>");
                    var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 223px;' />");
                    toolbar.append(container);
                    container.append(span);
                    container.append(input);
                    if (theme != "") {
                        input.addClass('jqx-widget-content-' + theme);
                        input.addClass('jqx-rc-all-' + theme);
                    }
                    var oldVal = "";
                    input.on('keydown', function (event) {
                        if (input.val().length >= 2) {
                            if (me.timer) {
                                clearTimeout(me.timer);
                            }
                            if (oldVal != input.val()) {
                                me.timer = setTimeout(function () {
                                    $("#jqxgrid").jqxGrid('updatebounddata');
                                }, 1000);
                                oldVal = input.val();
                            }
                        }
                        else {
                            $("#jqxgrid").jqxGrid('updatebounddata');
                        }
                    });

                    $('#searchField').focus();
                }
            });

        });
    </script>
</head>
<body class='default'>
    <div id='jqxgrid'>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

January 6, 2016 at 11:47 am custom filter textbox autofocus #80115

Rajesh

Participant

Thanks DImitar,

but its not works for mi

thanks,
Rajesh

January 6, 2016 at 12:08 pm custom filter textbox autofocus #80121

Dimitar

Participant

Hi Rajesh,

You need to select your custom text filter with jQuery and call the .focus() method, e.g.:

$('#searchField').focus();

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.