jQWidgets Forums

Tagged: Button, grid, Input, jqxgrid, refresh, search, toolbar

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

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

Author

Button in Toolbar Posts

July 3, 2014 at 5:57 am Button in Toolbar #56703

Participant

Hi,
Can anyone tell me how to use a submit button in grid’s toolbar and perform a search based on the inputs provided in the toolbar?

July 3, 2014 at 9:43 am Button in Toolbar #56720

Dimitar

Participant

Hello sakthisainath,

Here is a modification of the demo Toolbar with a search button:

<!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.10.2.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;' />");
                    var submitButton = $("<button style='margin-left: 5px;'>Search</button>");
                    toolbar.append(container);
                    container.append(span);
                    container.append(input);
                    container.append(submitButton);
                    if (theme != "") {
                        input.addClass('jqx-widget-content-' + theme);
                        input.addClass('jqx-rc-all-' + theme);
                    }
                    submitButton.jqxButton();
                    var oldVal = "";
                    submitButton.click(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');
                        }
                    });
                }
            });

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

Best Regards,
Dimitar

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

July 9, 2014 at 9:51 am Button in Toolbar #56913

sakthisainath

Participant

Thank you Dimitar for your timely help. Can you please let me know, how to perform a search in toolbar with a button based on multiple inputs. That is, I mean, I want to give roll no, student name and class as inputs to perform a search. So I will need 3 comboboxes, one to choose roll no, one more to choose student name, another to choose class and when I click search button, I want to perform a search. TIA

July 9, 2014 at 2:56 pm Button in Toolbar #56933

sakthisainath

Participant

Also, if I perform a search based on the inputs, how many times will the search information be sent to the server, I mean, do I have to refresh the page everytime I perform a search? If I keep clicking the search button again and again, I don’t see any information being passed on to the server. Can anyone explain please?

July 10, 2014 at 10:18 am Button in Toolbar #56991

Dimitar

Participant

Hi sakthisainath,

Please refer to the forum topic Toolbar Filter Problem for more information on the matter.

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.