paging buttons and icons issues

[DavidSimmonsParticipant]

Are there any changes to the paging object or the uses of icons. This used to work under jqwidgets-ver3.8.0 and before but now I don’t get my buttons for paging. I also use multiple custom buttons all with icons within the different tableLeft and tableRight cells so you will understand the uses of the table object.

var pagerrendererObject = this;
var pagerrenderer = function () {
var datainformation = $(jqxgrid).jqxGrid(‘getdatainformation’);
var paginginformation = datainformation.paginginformation;
var records = datainformation.rowscount;
var pagenum = paginginformation.pagenum;
var pagesize = paginginformation.pagesize;
var pagescount = paginginformation.pagescount;

var container = $(“<div style=’margin-left: 4px; margin-top: 2px; margin-bottom: 2px; margin-right: 4px; width: 99%; height: 100%;’></div>”);

var table = $(“<table cellpadding=’0′ cellspacing=’0′ style=’width: 100%’></table>”);
table.appendTo(container);

var tableRow = $(“<tr style=’width: 100%; height: 100%’></tr>”);
tableRow.appendTo(table);

var tableLeft = $(“<td id=’tableLeft’ style=’width: 100px; margin-right:auto; white-space:nowrap background-color: black;’></td>”);
tableLeft.appendTo(tableRow);

var tableLeftSpace = $(“<td id=’tableLeftSpace’ style=’width: 20%; white-space:nowrap background-color: black;’></td>”);
tableLeftSpace.appendTo(tableRow);

var tableCenter = $(“<td id=’tableCenter’ style=’width: 50px; margin-left:auto; margin-right:auto; white-space:nowrap background-color: black;’></td>”);
tableCenter.appendTo(tableRow);

var tableRightSpace = $(“<td id=’tableRightSpace’ style=’width: 20%; white-space:nowrap background-color: black;’></td>”);
tableRightSpace.appendTo(tableRow);

var tableRight = $(“<td id=’tableRight’ style=’width: 20%; margin-left:auto; white-space:nowrap background-color: black;’></td>”);
tableRight.appendTo(tableRow);

var leftButton = $(“<div style=’float: left;’><span></span></div>”);
leftButton.find(‘span’).addClass(‘ui-icon ui-icon-triangle-1-w’);
leftButton.width(20);
leftButton.jqxTooltip({content: ‘Previous Record!’, position: ‘mouse’, name: ‘Tooltip’, theme: theme});
leftButton.appendTo(tableCenter);

leftButton.click(function () {
$(jqxgrid).jqxGrid(‘gotoprevpage’);
});

var pagingLabel = $(“<div style=’font-size: 11px; margin-left: 4px; margin-top: 2px; margin-bottom: 2px; margin-right: 4px; float: left;’ ></div>”);
pagingLabel.text(1 + pagenum + ‘ of ‘ + pagescount + ‘ Pages ‘ + ‘ (PageSize ‘ + pagesize + ‘) ‘ + records + ‘ Records’);
pagingLabel.appendTo(tableCenter);
pagerrendererObject.pagingLabel = pagingLabel;

var rightButton = $(“<div style=’float: left;’><span></span></div>”);
rightButton.find(‘span’).addClass(‘ui-icon-triangle-1-e’);
rightButton.width(20);
rightButton.jqxTooltip({content: ‘Next Record!’, position: ‘mouse’, name: ‘Tooltip’, theme: theme});
rightButton.appendTo(tableCenter);

rightButton.click(function () {
$(jqxgrid).jqxGrid(‘gotonextpage’);
});

var handleStates = function (event, button, className, add) {
button.bind(event, function () {
if (add == true) {
button.find(‘div’).addClass(className);
}
else
button.find(‘div’).removeClass(className);
});
}

if (theme != ”) {
handleStates(‘mousedown’, rightButton, ‘icon-arrow-right-selected-‘ + theme, true);
handleStates(‘mouseup’, rightButton, ‘icon-arrow-right-selected-‘ + theme, false);
handleStates(‘mousedown’, leftButton, ‘icon-arrow-left-selected-‘ + theme, true);
handleStates(‘mouseup’, leftButton, ‘icon-arrow-left-selected-‘ + theme, false);
handleStates(‘mouseenter’, rightButton, ‘icon-arrow-right-hover-‘ + theme, true);
handleStates(‘mouseleave’, rightButton, ‘icon-arrow-right-hover-‘ + theme, false);
handleStates(‘mouseenter’, leftButton, ‘icon-arrow-left-hover-‘ + theme, true);
handleStates(‘mouseleave’, leftButton, ‘icon-arrow-left-hover-‘ + theme, false);
}

return container;
};

$(jqxgrid).bind(‘pagechanged’, function () {
var datainformation = $(jqxgrid).jqxGrid(‘getdatainformation’);
var paginginformation = datainformation.paginginformation;
var records = datainformation.rowscount;
var pagenum = paginginformation.pagenum;
var pagesize = paginginformation.pagesize;
var pagescount = paginginformation.pagescount;
pagerrendererObject.pagingLabel.text(1 + pagenum + ‘ of ‘ + pagescount + ‘ Pages ‘ + ‘ (PageSize ‘ + pagesize + ‘) ‘ + records + ‘ Records’);
});

[Peter StoevKeymaster]

Hi DavidSimmons,

There are no changes in our icons or in our CSS styles. We also never had CSS class called icon-arrow-right-selected so I do not think that this has ever worked with our CSS styles. Probably these are your custom CSS Classes.

Best Regards,
Peter Stoev

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

[Author]

Posts