This topic contains 13 replies, has 3 voices, and was last updated by Dimitar 10 years, 7 months ago.
-
Hi,
I’m new in jqxgrid. I would like to add a button to the pager panel of my grid. I tried myself but somehow the button doesn’t work. My code is as below:$(“#pagerjqxgrid”).prepend(‘<div style=”float:left;margin-left:3px;”><button id=”reload”>
</button></div>’);
$(“#reload”).jqxButton();$(“#reload”).click( function(){
$(“#jqxgrid”).jqxGrid({ source: source });
});I’ve placed this code outside the source and jqxgrid definition.
Thanks in advanceHi Dimitar, I’ve created a custom page renderer so that I can add two buttons in the pagination tab. While I ‘previous’ or ‘next’ page, the page info label is not updating. What may be the issue? My custom page renderer script is given below. Thanks in advance.
var pagerrenderer = function () {
var element = $(“<div style=’margin-top: 5px; width: 100%; height: 100%;’></div>”);
var datainfo = $(“#jqxgrid”).jqxGrid(‘getdatainformation’);
var paginginfo = datainfo.paginginformation;
// create navigation buttons.
var leftButton = $(“<div style=’padding: 1px; float: right;’><div style=’margin-left: 9px; width: 14px; height: 16px;’></div></div>”);
leftButton.find(‘div’).addClass(‘jqx-icon-arrow-left’);
leftButton.width(36);
leftButton.jqxButton();
var rightButton = $(“<div style=’padding: 1px; margin: 0px 3px; float: right;’><div style=’margin-left: 9px; width: 14px; height: 16px;’></div></div>”);
rightButton.find(‘div’).addClass(‘jqx-icon-arrow-right’);
rightButton.width(36);
rightButton.jqxButton();
// append the navigation buttons to the container DIV tag.
rightButton.appendTo(element);
leftButton.appendTo(element);
// create a page information label and append it to the container DIV tag.
var label = $(“<div style=’font-size: 11px; margin: 2px 3px; font-weight: bold; float: right;’></div>”);
label.text(“1-” + paginginfo.pagesize + ‘ of ‘ + datainfo.rowscount);
label.appendTo(element);
// records per page optionvar recordsPerPageDropDown = $(“<div style=’padding: 0px; margin: 0px 3px; float: right;’></div>”);
var sizes = new Array(500, 1000, 1500);
recordsPerPageDropDown.jqxDropDownList({ width: 55, height: 17, dropDownHeight: 80, source: sizes,selectedIndex: 1 });recordsPerPageDropDown.on(‘select’, function (event) {
var args = event.args;
if (args) {
var item = args.item;
var label = item.label;
$(‘#jqxgrid’).jqxGrid({ pagesize: parseInt(label) });
}
});
recordsPerPageDropDown.appendTo(element);
var recordsPerPageLabel = $(“<div style=’padding: 0px; margin: 0px 3px; float: right;’>Show Rows:</div>”);
recordsPerPageLabel.appendTo(element);// navigate to the next page when the right navigation button is clicked.
rightButton.click(function () {
$(“#jqxgrid”).jqxGrid(‘gotonextpage’);
var datainfo = $(“#jqxgrid”).jqxGrid(‘getdatainformation’);
var paginginfo = datainfo.paginginformation;
label.text(1 + paginginfo.pagenum * paginginfo.pagesize + “-” + Math.min(datainfo.rowscount, (paginginfo.pagenum + 1) * paginginfo.pagesize) + ‘ of ‘ + datainfo.rowscount);
});
// navigate to the previous page when the left navigation button is clicked.
leftButton.click(function () {
$(“#jqxgrid”).jqxGrid(‘gotoprevpage’);
var datainfo = $(“#jqxgrid”).jqxGrid(‘getdatainformation’);
var paginginfo = datainfo.paginginformation;
label.text(1 + paginginfo.pagenum * paginginfo.pagesize + “-” + Math.min(datainfo.rowscount, (paginginfo.pagenum + 1) * paginginfo.pagesize) + ‘ of ‘ + datainfo.rowscount);
});
//Refresh Button
var refreshButton = $(“<div style=’float: left;width:30px;’></div>”);
refreshButton.append(‘
‘)
//refreshButton.jqxButton();
refreshButton.appendTo(element);
refreshButton.click(function() {
$(“#jqxgrid”).jqxGrid({ source: source });
$(“#datespan”).html(‘Selected ‘+start_date+’ to ‘+end_date);
$(“#active”).html(‘ [‘+selectedRows);
$(“#total”).html(totalRows);
});
//Search Button
var searchButton = $(“<div style=’float: left;width:30px;’></div>”);
searchButton.append(‘
‘);
searchButton.appendTo(element);// return the new pager element.
return element;
}
You must be logged in to reply to this topic.