Pager on top of grid - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 6 replies, has 5 voices, and was last updated by shanegarner 10 years, 1 month ago.

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

Author

Pager on top of grid Posts

January 14, 2013 at 3:30 pm Pager on top of grid #13582

Participant

Hi,
is it possible to use standard grid pager on top position of grid?
Is it possible to use grid on top and bottom at the same time?

Offtopic:
Is it possible to search at this forum?

Best regards
Gabriel

January 14, 2013 at 4:10 pm Pager on top of grid #13584

Peter Stoev

Keymaster

Hi Gabriel,

1. It is not possible to put the Pager on top of the Grid.
2. Yes, it is possible to search in the Forum. When you login into your account, a Dashboard menu is displayed with a Search Button displayed on the top-right corner of your screen. Clicking on it will open a Search field. Another option is to open the Dashboard and there is a Search Forum textbox, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 21, 2013 at 12:24 pm Pager on top of grid #13982

cloudsurfer

Member

1) How to add button to the pagerrenderer?

January 21, 2013 at 12:43 pm Pager on top of grid #13983

Peter Stoev

Keymaster

Hi cloudsurfer,

The following sample demonstrates how to implement a custom pager with custom buttons: custompager.htm.

Best Regards,
Peter Stoev

jQwidgets Team
http://www.jqwidgets.com

June 26, 2014 at 1:36 pm Pager on top of grid #56442

cosmic

Participant

You should update the information in this post because it IS possible to put the Pager on top of the Grid.

Also the example you have of the top of Grid paging does not return data because the service does not return anything (found at http://www.jqwidgets.com/community/topic/location-of-navigator-bar/).

But using your trusty generatedata routines work like a charm.

<!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/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            // prepare the data
            var source =
           {
               localdata: generatedata(55),
               datafields:
               [
                   { name: 'firstname', type: 'string' },
                   { name: 'lastname', type: 'string' },
                   { name: 'productname', type: 'string' },
                   { name: 'quantity', type: 'number' },
                   { name: 'price', type: 'number' },
                   { name: 'total', type: 'number' }
               ],
               datatype: "array"
           };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var self = this;
            $("#jqxgrid").jqxGrid(
            {
                width: 680,
                source: dataAdapter,
                theme: theme,
                columns: [
                  { text: 'First Name', dataField: 'firstname', width: 200 },
                  { text: 'Last Name', dataField: 'lastname', width: 200 },
                  { text: 'Product', dataField: 'productname', width: 170 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsalign: 'right', cellsformat: 'c2' }
                ],
                showtoolbar: true,
                pageable: true,
                autoheight: true,
                rendertoolbar: function (toolbar) {
                    var container = $("<div style='margin-left: 10px; margin-top: 5px; width: 100%; height: 100%;'></div>");
                    var datainfo = $("#jqxgrid").jqxGrid('getdatainformation');
                    var paginginfo = datainfo.paginginformation;
                    var leftButton = $("<div style='padding: 0px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
                    leftButton.find('div').addClass('jqx-icon-arrow-left');
                    leftButton.width(36);
                    leftButton.jqxButton({ theme: theme });
                    var rightButton = $("<div style='padding: 0px; margin: 0px 3px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
                    rightButton.find('div').addClass('jqx-icon-arrow-right');
                    rightButton.width(36);
                    rightButton.jqxButton({ theme: theme });
                    container.appendTo(toolbar);
                    leftButton.appendTo(container);
                    rightButton.appendTo(container);
                    var label = $("<div style='font-size: 11px; margin: 2px 3px; font-weight: bold; float: left;'></div>");
                    label.text("1-" + paginginfo.pagesize + ' of ' + datainfo.rowscount);
                    label.appendTo(container);
                    self.label = label;
                    // update buttons states.
                    var handleStates = function (event, button, className, add) {
                        button.on(event, function () {
                            if (add == true) {
                                button.find('div').addClass(className);
                            }
                            else button.find('div').removeClass(className);
                        });
                    }
                    if (theme != '') {
                        handleStates('mousedown', rightButton, 'jqx-icon-arrow-right-selected-' + theme, true);
                        handleStates('mouseup', rightButton, 'jqx-icon-arrow-right-selected-' + theme, false);
                        handleStates('mousedown', leftButton, 'jqx-icon-arrow-left-selected-' + theme, true);
                        handleStates('mouseup', leftButton, 'jqx-icon-arrow-left-selected-' + theme, false);
                        handleStates('mouseenter', rightButton, 'jqx-icon-arrow-right-hover-' + theme, true);
                        handleStates('mouseleave', rightButton, 'jqx-icon-arrow-right-hover-' + theme, false);
                        handleStates('mouseenter', leftButton, 'jqx-icon-arrow-left-hover-' + theme, true);
                        handleStates('mouseleave', leftButton, 'jqx-icon-arrow-left-hover-' + theme, false);
                    }
                    rightButton.click(function () {
                        $("#jqxgrid").jqxGrid('gotonextpage');
                    });
                    leftButton.click(function () {
                        $("#jqxgrid").jqxGrid('gotoprevpage');
                    });
                },
                pagerrenderer: function () {
                    return "";
                }
            });
            $("#jqxgrid").on('pagechanged', function () {
                var datainfo = $("#jqxgrid").jqxGrid('getdatainformation');
                var paginginfo = datainfo.paginginformation;
                self.label.text(1 + paginginfo.pagenum * paginginfo.pagesize + "-" + Math.min(datainfo.rowscount, (paginginfo.pagenum + 1) * paginginfo.pagesize) + ' of ' + datainfo.rowscount);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxgrid'>
    </div>
</body>
</html>

June 27, 2014 at 4:32 am Pager on top of grid #56477

Peter Stoev

Keymaster

Hi cosmic,

Rendering a custom UI inside the Grid’s Toolbar is not a Top pager 🙂 You can render custom UI outside the Grid which uses the Grid’s API, too. For the others, Top Pager in jqxGrid is not built-in and we still don’t have it. If you want to use custom UI rendered in the Toolbar, you can look at the other posts in this topic or build custom UI in the Grid’s Toolbar or outside the Grid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 4, 2015 at 4:55 am Pager on top of grid #66461

shanegarner

Participant

Is allowing the pager to be at the top on the road map? This is a feature I am interested in.

Thanks!

Author

Posts

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

You must be logged in to reply to this topic.