jQWidgets Forums

Tagged: font size, grid, jqxgrid, pageable

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

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

Author

pageable font size Posts

January 24, 2015 at 11:11 am pageable font size #65955

mustafa

Participant

hello

1.I just want to see the right and left arrows
2.How can I do font size ? example : font-size : 12px

January 26, 2015 at 1:28 pm pageable font size #66016

Nadezhda

Participant

Hello mustafa,

1. Here is an example with ‘pageable’ property set to true: http://jsfiddle.net/1ptoLg1z/.
2. You can use css or jQuery method css() to set the font-size value.

Best Regards,
Nadezhda

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

January 26, 2015 at 2:33 pm pageable font size #66019

Nadezhda

Participant

Hello mustafa,

Here is an example with custom pager in jqxGrid:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.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.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            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;
            var pagerrenderer = function () {
                var element = $("<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 });

                leftButton.appendTo(element);
                rightButton.appendTo(element);

                // 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');
                });

                return element;
            }

            $("#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);
            });

            $("#jqxgrid").jqxGrid(
           {

               source: dataAdapter,
               columnsresize: true,
               width: 850,
               pageable: true,
               autoheight: true,
               pagerrenderer: pagerrenderer,
               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' }
               ]
           });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

Author

Posts

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

You must be logged in to reply to this topic.