jQWidgets Forums

Tagged: custom, generic, grid, id, jqxgrid, pager, pagerrenderer, reuse

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

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

Author

Generic Custom Pager Posts

January 20, 2015 at 6:45 am Generic Custom Pager #65645

Participant

I have written a custom pager which has first page button and last page button. But I am not able to reuse that code. Could you please help me out in making it reusable. I’m pasting the code here.

var self =this;
var gridName= "jqxgrid";

var commonpagerrenderer = function () {
	var localization = getLocalization('en');
	
	var element = $("<div style='margin-right: 10px; margin-top: 5px; width: 100%; height: 100%;'></div>");
	var datainfo = $("#"+gridName).jqxGrid('getdatainformation');
	var paginginfo = datainfo.paginginformation;
	var pagescount = paginginfo.pagescount;
	
	var leftButton = $("<div style='padding: 0px; float: right;'><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: right;'><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 });
	
	var firstButton = $("<div style='padding: 0px; margin: 0px 3px; float: right;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
	firstButton.find('div').addClass('jqx-icon-arrow-first');
	firstButton.width(36);
	firstButton.jqxButton({ theme: theme });
	
	var lastButton = $("<div style='padding: 0px; margin: 0px 10px 0px 0px; float: right;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
	lastButton.find('div').addClass('jqx-icon-arrow-last');
	lastButton.width(36);
	lastButton.jqxButton({ theme: theme });
	
	var pagergotoinput = $('<div style="margin-right: 7px; width: 27px; height: 17px; float: right;"><input style="margin-top: 0px; text-align: right; width: 27px;" value='+(paginginfo.pagenum + 1)+' type="text"/></div>');
	pagergotoinput.find('input').addClass('jqx-input');
	pagergotoinput.find('input').addClass('jqx-widget-content');
	pagergotoinput.find('input').addClass('jqx-grid-pager-input');
	pagergotoinput.find('input').addClass('jqx-rc-all');
	
	
	var pagershowrowscombo = $('<div id="gridpagerlist" style="margin-top: 0px; margin-right: 7px; float: right;"></div>');
	var o = this.pagesizeoptions;
    var q = 0;
    for (var p = 0; p < o.length; p++) {
        if (paginginfo.pagesize >= o[p]) {
            q = p
        }
    }
	pagershowrowscombo.jqxDropDownList({ width: 50, height: 16, dropDownHeight: 80, placeHolder: "Page size", source: o, selectedIndex: q });
	
	var pagershowrows = $('<div style="margin-right: 7px; float: right;"></div>');
	pagershowrows.text(localization.pagergotopagestring);
	
	var pagergoto = $('<div style="float: right; margin-right: 7px;"></div>');
	pagergoto.text(localization.pagershowrowsstring);
	
	lastButton.appendTo(element);
	rightButton.appendTo(element);
	leftButton.appendTo(element);
	firstButton.appendTo(element);
	var label = $("<div style='margin-right: 7px; float: right;'></div>");
	label.text(1 + paginginfo.pagenum * paginginfo.pagesize + "-" + Math.min(datainfo.rowscount, (paginginfo.pagenum + 1) * paginginfo.pagesize) + localization.pagerrangestring + datainfo.rowscount);
	label.appendTo(element);
	
	pagershowrowscombo.appendTo(element);
	pagergoto.appendTo(element);
	
	pagergotoinput.appendTo(element);
	pagershowrows.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('mousedown', lastButton, 'jqx-icon-arrow-last-selected-' + theme, true);
		handleStates('mouseup', lastButton, 'jqx-icon-arrow-last-selected-' + theme, false);
		handleStates('mousedown', firstButton, 'jqx-icon-arrow-first-selected-' + theme, true);
		handleStates('mouseup', firstButton, 'jqx-icon-arrow-first-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);
		handleStates('mouseenter', lastButton, 'jqx-icon-arrow-last-hover-' + theme, true);
		handleStates('mouseleave', lastButton, 'jqx-icon-arrow-last-hover-' + theme, false);
		handleStates('mouseenter', firstButton, 'jqx-icon-arrow-first-hover-' + theme, true);
		handleStates('mouseleave', firstButton, 'jqx-icon-arrow-first-hover-' + theme, false);
	}
	rightButton.click(function () {    	
			$("#"+gridName).jqxGrid('gotonextpage');
	});
	leftButton.click(function () {
		$("#"+gridName).jqxGrid('gotoprevpage');
	});
	lastButton.click(function () {
		$("#"+gridName).jqxGrid('gotopage', pagescount);		         
	});
	firstButton.click(function () {
		$("#"+gridName).jqxGrid('gotopage', 0);
	});
	
	pagergotoinput.change(function(){
		$("#"+gridName).jqxGrid('gotopage', (pagergotoinput.find('input').val()-1));
	})
	
	pagershowrowscombo.on('select', function (event) {
        var args = event.args;
        if (args) {
            var item = args.item;
            var label = item.label;
            $("#"+gridName).jqxGrid({ pagesize: parseInt(label) });
        }
    });;
	
	return element;	
}

January 20, 2015 at 8:34 am Generic Custom Pager #65664

Dimitar

Participant

Hello kuberasamrat,

Here is a suggested solution:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to customzie the rendering of the jqxGrid's
        Pager.</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 gridId = this.element.id;

                var element = $("<div style='margin-left: 10px; margin-top: 5px; width: 100%; height: 100%;'></div>");
                var datainfo = $("#" + gridId).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);

                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(element);
                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 () {
                    $("#" + gridId).jqxGrid('gotonextpage');
                });

                leftButton.click(function () {
                    $("#" + gridId).jqxGrid('gotoprevpage');
                });

                return element;
            }

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

            $("#jqxgrid2").jqxGrid(
            {

                source: dataAdapter,
                columnsresize: true,
                width: 850,
                pageable: true,
                autoheight: true,
                pagerrenderer: pagerrenderer,
                columns: [
                    { 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="jqxgrid1">
        </div>
        <br />
        <div id="jqxgrid2">
        </div>
    </div>
</body>
</html>

January 20, 2015 at 10:25 am Generic Custom Pager #65672

kuberasamrat

Participant

Hi Dimitar,

Thank you very much. You made my day.

Author

Posts

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

You must be logged in to reply to this topic.