[maximus2014Participant]

Thank you very much Stoev.

[maximus2014Participant]

Hi Dimitar, I tested as per your suggestion, but the error persists.On clicking the button number is changed but on paging completion the initial data is displayed. Where should I place the ‘pagechanged’ function. I’ve placed it outside the paging button click. Thanks in advance.

[maximus2014Participant]

Hi dimitar, the find feature has been put on hold by the client. so your feedback will be used when we get a go on from the client.
I am facing a small issue but couldn’t correct that till now. I am using a custom pager having two buttons incorporated with server-side pagination. Server-side pagination is working perfectly but the ‘page information(eg: 1 -100 of 200) is not updating while pagination is used. on clicking ‘next’ or ‘previous’ button, info is temporarily updated but on completion of paging initial info is displayed. What may be the issue? The page info code is given below:

var label = $(“<div style=’font-size: 11px; margin: 2px 3px; float: right;’></div>”);
label.text(“1-” + paginginfo.pagesize + ‘ of ‘ + datainfo.rowscount);
label.appendTo(element);

rightButton.click(function (event) {
$(“#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);

});

Thanks in advance.

[maximus2014Participant]

Hi 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 option

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

[maximus2014Participant]

Thanks dimitar, that helped me. I would like to know how we will pass the parameters to the server for filtering. As this is a customized feature, how will we call the default server-side filtering functionality of the grid with all the default parameters incorporated? If this is possible, lot of time for extra coding will be saved. Thanks in advance.

[maximus2014Participant]

Thank you so much Dimitar, the link helped a lot and solved my doubts. Could you please tell me how to get the full list of the conditions such as ‘Equal’ ‘Not equal’ that are used in the filtering functionality. I would like to add a dropdownlist in the search window containing all the conditions so that user can select. Thanks in advance

[maximus2014Participant]

Thank you Dimitar for your valuable reply. I would like keep intact the other modules in the pager ie the default ‘Got to page’ textbox, ‘Show rows’ dropdown ‘next’ page and ‘previous’ page links. Please tell me how this is possible. I tried to add the ‘Show rows’ dropdown, but failed. Thanks in advance.

[maximus2014Participant]

Hi Peter,

On right-clicking the row or column header how will I get the corresponding column details in grid using hidecolumn method? I tried jquery scripting to find the position of the column in the row on which right-click is made, thereby finding the column name from jqxgrid ‘columns’ array.But it didn’t give the needed result. Thanks in advance.

[maximus2014Participant]

Hi,

In the server data returned, I’ve passed rows and row count. Should I pass the number of pages info along with the response? Total number of pages is calculated in the server. If so what is the name of the parameter that handles the number of pages using which total records is calculated?

Thanks in advance.

[maximus2014Participant]

Hi Dimitar,

Is it possible to set background of a row to ‘color’ value in the database table? I have different color values for each record in my database.

[maximus2014Participant]

Hi Peter,

Thank you for your reply.
I’ve already written the client-side script as shown in the example. I am using Django for server side querying and pagination. Is there any example of jqxgrid with django framework? I’ve used generic views of django for querying and paging.
Thanks in advance.

[maximus2014Participant]

Thank you Dimitar. That helped a lot.

[maximus2014Participant]

Thanks Peter for your reply. I’ve implemented filtering with virtualmode true by modifying the “rendergridrows” callback function.

Old code:

rendergridrows: function () {
return dataAdapter.records;
},

Corrected one:

rendergridrows: function (obj) {
return obj.data;
},

[Author]

Posts