jQWidgets Forums

Tagged: filter, grid, paging, sort

This topic contains 8 replies, has 3 voices, and was last updated by Peter Stoev 12 years, 9 months ago.

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

Author

how to include filter/sort/paging in grid Posts
July 15, 2012 at 5:54 pm how to include filter/sort/paging in grid #5964

mr_putersmit
Participant

How do I enable filter/sort/paging all in the same grid? I have tried to use a combination of column commands but for some reason, I keep getting a binding to data error. What is the correct way to enable this combination please. Thanks

July 16, 2012 at 8:01 am how to include filter/sort/paging in grid #5983

mr_putersmit
Participant

Ok I have now tried to join the filter code with sort code, but now get unexpected token error. Do I need to merge sort code with filter code? Thanks

July 16, 2012 at 8:36 am how to include filter/sort/paging in grid #5984

Peter Stoev
Keymaster

Hi mr_putersmit,

You don’t have to merge files or something else. You have to include the appropriate files in your project and set the pageable, sortable and filterable properties of jqxGrid to true.

I suggest you to take a look at the help documentation and the following demos, too.

Includes Filtering and Sorting: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/filtering.htm?classic
Includes Paging: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/filtering.htm?classic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 16, 2012 at 9:50 am how to include filter/sort/paging in grid #5991

mr_putersmit
Participant

Thank you peter. Is the purpose of the file: jqx-all.js to replace all required seperate js files? Thanks

July 16, 2012 at 2:57 pm how to include filter/sort/paging in grid #6007

shougom
Member

I was unable to get all 3 to work at the same time also. Along with editing. Strange things started to happen.

So i decided to just go with filtering and hope its good enough. Many posts keep referencing a php example which made 0 sense to me.

mr_putersmit please let me know if you figure how to get all 3 working in the same grid. Ive tried everything. One aspect just kept breaking the other when trying to blend all 3. Its a real tease because independtly they all work great! But what good is a grid if you dont have all 3.

So youre not alone. Now hopefully I can figure out how to edit without breaking the filtering.

July 16, 2012 at 5:43 pm how to include filter/sort/paging in grid #6011
Peter Stoev
Keymaster
Here’s a working sample which includes sorting, filtering and paging.
```
<!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.7.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.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="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = generatedata(500);
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            $("#jqxgrid").jqxGrid(
            {
                source: source,
                filterable: true,
                sortable: true,
                pageable: true,
                autoheight: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Order Date', datafield: 'date', width: 100, cellsformat: 'd' },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
July 17, 2012 at 10:28 am how to include filter/sort/paging in grid #6037

mr_putersmit
Participant

shougom

Hi. After playing with this for some time, the way I got it to work was to just use the jqx-all.js file instead of dependencies. Hope that helps. Cheers

July 17, 2012 at 7:28 pm how to include filter/sort/paging in grid #6058

shougom
Member

Peter Stoev

Thanks for checking into it.

But I will believe it works when i see it against a sql backend and all 3 or your controller methods in the demos for paging, sorting and filtering working in unison. in my opinion an array data source is just not a practical example. And your only showing the view not the controller which is critical to the sql demo.

July 17, 2012 at 7:59 pm how to include filter/sort/paging in grid #6059

Peter Stoev
Keymaster

Hi shougom,

In the latest version we added a sample with paging+sorting+filtering using php and mysql. The data is coming from database, not from an array. You can find it in the phpdemos folder in the download package. Hope you find it helpful.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
Author

Posts

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

You must be logged in to reply to this topic.