jQWidgets Forums

Tagged: custom, grid, jqxgrid, pager, paging, toolbar

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

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

Author

Location of navigator bar Posts

September 16, 2013 at 7:46 am Location of navigator bar #29020

mail2taurus

Participant

Dear sir,

Does the grid navigator bar can move to the top of the grid?

Best regards,
Wijit

September 16, 2013 at 12:38 pm Location of navigator bar #29039

Dimitar

Participant

Hello Wijit,

Do you mean that the navigation bar be included in the grid’s toolbar?

Best Regards,
Dimitar

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

September 17, 2013 at 2:22 am Location of navigator bar #29066

mail2taurus

Participant

Dear Dimitar,

The navigation bar that I mention is the bar that use for paging the grid that normally lay under the grid.
Could we change it to the top of the grid?

Best regards,
Wijit

September 17, 2013 at 5:18 am Location of navigator bar #29075

Dimitar

Participant

Hello Wijit,

Here is an example, based on the demos Custom Pager and Toolbar:

<!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 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.