jQWidgets Forums

Tagged: dataadapter, getdatainformation, serverside search

This topic contains 6 replies, has 3 voices, and was last updated by Mariya 11 years, 12 months ago.

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

Author

searching remotely & getdatainformation Posts

June 18, 2013 at 1:58 pm searching remotely & getdatainformation #23353

rrust

Member

Dear jqWidgets Team,

I am trying to implement a server side search functionality with the jqxGrid widget.
On keyup on the search input, I want to reset the paging information. The dataAdapter is fine with this. Now I want to update the paging information within the grid widget. But:

$(“#grid”).jqxGrid(‘getdatainformation’);

always delivers the same information, except I use gotopage, gotoprevpage, gotonextpage methods.

I tried to get the paging information via getdatainformation upon bindingcomplete.

$(“#grid”).on(‘bindingcomplete’,function() {
var datainfo = $(“#grid”).jqxGrid(‘getdatainformation’);
});

no luck unfortunately.

Is there a working example somewhere for server side searching?
Is it possible to get paging information from the dataAdapter rather than from the grid widget?

best, r.rust

June 18, 2013 at 2:22 pm searching remotely & getdatainformation #23354

support

Participant

Hi rrust,

Please take a look at the following example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/toolbar.htm
If you have any further questions, please do not hesitate to contact us.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 18, 2013 at 2:46 pm searching remotely & getdatainformation #23356

rrust

Member

Dear Mariya,

Thanks for the quick reply! Unfortunately the example does not feature a pager. In fact, my implementation is based on exactly this one.

To be more clear about the problem I am facing:
The dataAdapter does the right thing. Everything is working great.

But: the paginginformation inside the grid widget won’t be updated upon the binding of a modified data set.

BTW: is there a jsfiddle type of playground? That way I could provide a working example with the problem.

best, r.rust

June 19, 2013 at 6:37 am searching remotely & getdatainformation #23385

support

Participant

Hi rrust,

Please take a look at the following example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this example the Grid is bound to a Remote Data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.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/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // prepare the data
            var source =
            {
                datatype: "jsonp",
                datafields: [
                    { name: 'countryName' },
                    { name: 'name' },
                    { name: 'population', type: 'float' },
                    { name: 'continentCode' },
                    { name: 'adminName1' }
                ],
                async: false,
                url: "http://ws.geonames.org/searchJSON",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 20
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source,
                {
                    formatData: function (data) {
                        data.name_startsWith = $("#searchField").val();
                        return data;
                    }
                }
            );
            $("#jqxgrid").jqxGrid(
            {
                width: 680,
                source: dataAdapter,
                theme: theme,
                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();
                            }
                        }
                    });
                }
            });

});

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 19, 2013 at 9:09 am searching remotely & getdatainformation #23404

rrust

Member

Dear Mariya,

I put up a minimal example based on yours: http://jsfiddle.net/rrust/H4yBp/

What I try to achieve is:

1. Search for something e.g. “Som” and use the pager until you reach the last page.

https://lh5.googleusercontent.com/-27kt0G8L5Zw/UcFz6qGtxRI/AAAAAAAABXA/8AiTIFlx2GU/w515-h158-no/001.png

2. Type in another search e.g. “Art”

https://lh5.googleusercontent.com/-27kt0G8L5Zw/UcFz6qGtxRI/AAAAAAAABXA/8AiTIFlx2GU/w515-h158-no/001.png

When searching for something new I need the paging information to be reset.
So ist there a way to do something like $(“#jqxgrid”).jqxGrid(‘setcurrentpage’,0); ?

Thanks for looking into this,

best r.rust

June 24, 2013 at 8:18 am searching remotely & getdatainformation #23662

rrust

Member

Whoever runs into this as well:
As a workaround you’ll need use the ‘gotopage’ method and intercept the xhr with abort() at the moment.
This sets the pagenum to the first page.
After that the search xhr can be triggered…

@mariya: has someone of the jqWidgets Team had the chance to look into this?

best,
r.rust

June 24, 2013 at 9:25 am searching remotely & getdatainformation #23671

Mariya

Participant

Hi rrust,

In order to reset the page number you can use the ‘gotopage’ method.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.