[rs@workParticipant]

I want to make the jqxGrid default pager as LEFT ALIGN (presently displaying RIGHT ALIGN by default).

Please inform if the above solution will work, and also where to implement the code — CSS or JS ?

[rs@workParticipant]

I have implemented this CUSTOM PAGING code into web page with JQXGRID.
The paging is working/incrementing correctly, but the PAGING LABEL IS NOT DISPLAYING NUMBER LABEL – INCREMENTING as it should.
The new incremented paging label (51 – 100 of 500) is only displaying (for a fraction of a second) when button is clicked.
Thereafter the label is back to its original number (1 – 50 of 500).

Please inform me how to display the INCREMENTED PAGING LABEL like this –
1 – 50 of 500
51- 100 of 500
101 – 150 of 500
151 – 200 of 500………THANKS.

// BELOW IS YOUR CUSTOM PAGING CODE IMPLEMTED BY ME

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

var dropdown = $(‘<div style=”float: left;”></div>’);
dropdown.jqxDropDownList({ source: [‘5′, ’10’, ’20’], selectedIndex: 1, width: 50, height: 17, autoDropDownHeight: true })
dropdown.on(‘change’, function (event) {
var args = event.args;
if (args) {
var item = args.item;
var label = item.label;
$(‘#jqxgrid’).jqxGrid({ pagesize: parseInt(label) });
}
});

leftButton.appendTo(element);
rightButton.appendTo(element);
dropdown.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 () {
$(“#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);
});

[Author]

Posts