jQuery UI Widgets Forums Grid Button in Toolbar

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Button in Toolbar #56703

    sakthisainath
    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?

    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/

    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

    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?

    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/

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

You must be logged in to reply to this topic.