jQWidgets Forums

Tagged: custom, footer, grid, Header, jqxgrid, pager, paging, position, toolbar

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

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

Author

Paging in the Grid.. Posts

November 21, 2013 at 7:05 am Paging in the Grid.. #33008

ajayetw2009

Participant

Hi Sir,

I want to show the paging in search result set in both header and footer in the jqxGrid ,is there is any way for getting such types for functionality.

Thanks with regards,

Ajay Kumar

November 21, 2013 at 9:24 am Paging in the Grid.. #33025

ajayetw2009

Participant

Hi Sir,

please help me……

Thanks with regards,

Ajay Kumar

November 21, 2013 at 9:35 am Paging in the Grid.. #33032

Dimitar

Participant

Hello Ajay Kumar,

Please check out the forum topic Location of navigator bar for an example of a paging in the grid’s toolbar.

Best Regards,
Dimitar

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

November 21, 2013 at 9:49 am Paging in the Grid.. #33036

ajayetw2009

Participant

Hi Sir,

There is no topic exists in this location..

plz help ..

Thanks with regards,

Ajay Kumar

November 22, 2013 at 7:40 am Paging in the Grid.. #33125

Dimitar

Participant

Hi Ajay Kumar,

The topic can be found here:
http://www.jqwidgets.com/community/topic/location-of-navigator-bar/

I re-post the example if you still have any issues with opening the link:

<!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">
        $(document).ready(function () {
            var theme = "";
            // 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;
                    }
                }
            );
            var self = this;
            $("#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,
                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>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.