jQuery UI Widgets Forums Grid Getting data by search

This topic contains 6 replies, has 2 voices, and was last updated by  Programmerswe 8 years, 3 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Getting data by search #81558

    Programmerswe
    Participant

    Hi!
    I’m going to have a service that will get the data to populate the grid. However, i do not want the grid to load all the data when I get to the site, but when I’m is filtering / searching for an account, ill send the input to the service to get te accounts containing that search.
    Is there a simple way of doing this, if so, could you give me an example? The data can come from Json in the example, but just so that I can se the logic.
    Thanks!

    Getting data by search #81596

    Dimitar
    Participant

    Hi Programmerswe,

    A similar scenario is shown in the demo Toolbar. Please take a look at it.

    Best Regards,
    Dimitar

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

    Getting data by search #81661

    Programmerswe
    Participant

    Almost yeah, its a great start. However the grid is already loaded with the data when you get to the page. It should be empty and just get the data similar to the search in the input field. This should be possible to do somehow though, right?

    Getting data by search #81667

    Dimitar
    Participant

    Hi Programmerswe,

    Please take a look at the following solution. We hope it is helpful to you:

    <!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;
                        }
                    }
                );
    
                var emptySource = true;
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    source: [],
                    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 (emptySource === false && input.val().length === 0)
                            {
                                $("#jqxgrid").jqxGrid({ source: [] });
                            }
                            if (input.val().length >= 2)
                            {
                                if (emptySource === true)
                                {
                                    $("#jqxgrid").jqxGrid({ source: dataAdapter });
                                    emptySource = false;
                                }
                                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/

    Getting data by search #81673

    Programmerswe
    Participant

    Hm, yes, it’s starting to work, almost at least. Still having some difficulty with the getting of the data. The grid loads without any data. But as soon as i filled in something to search for, the grid gets filled with all the data, not only the data that i searched for.

    Getting data by search #81696

    Dimitar
    Participant

    Hi Programmerswe,

    Please try the following modification to rendertoolbar:

    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('keyup', function (event)
        {
            if (emptySource === false && input.val().length === 0)
            {
                $("#jqxgrid").jqxGrid({ source: [] });
            }
            if (input.val().length >= 1)
            {
                if (emptySource === true)
                {
                    $("#jqxgrid").jqxGrid({ source: dataAdapter });
                    emptySource = false;
                }
                if (me.timer)
                {
                    clearTimeout(me.timer);
                }
                if (oldVal != input.val())
                {
                    me.timer = setTimeout(function ()
                    {
                        $("#jqxgrid").jqxGrid('updatebounddata');
                    }, 1000);
                    oldVal = input.val();
                }
            }
        });
    }

    Best Regards,
    Dimitar

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

    Getting data by search #81777

    Programmerswe
    Participant

    Thanks for the help Dimitar!

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

You must be logged in to reply to this topic.