ParamQuery grid support forum

General Category => ParamQuery Pro Evaluation Support => Topic started by: tailchaser on October 02, 2015, 10:32:23 am

Title: Customizing Pager Bar?
Post by: tailchaser on October 02, 2015, 10:32:23 am

Just recently started using ParamQuery Pro, so I have been pouring over the extensive documentation and demos. However, I'm not clear on the best way to customize the pager bar. I am wanting to move a couple of things around like the refresh icon, records per page, add a couple of icons that fire off other processes, etc.

I have considered writing some jQuery and move the stuff around and add the stuff I need. I wanted to see if there was a better way to do this that I may have overlooked.

Can anybody point me in the right direction here?

Thanks,
Steve

Title: Re: Customizing Pager Bar?
Post by: paramvir on October 05, 2015, 10:56:05 am

The pager can be customized to some extent by the localization strings in pageModel, Ex: http://paramquery.com/pro/demos/flex

You might have to use jQuery to move the icons around or add more icons to it, the way you have mentioned already.

Title: Re: Customizing Pager Bar?
Post by: tailchaser on October 05, 2015, 07:42:42 pm

Thanks for the reply.

As it turns out, this is pretty easy to do after all and it remains the same after a refresh (unlike the current grid tool we are using). For anybody interested, here is what I did to customize it. I added some jQuery code in the grid initialization to invoke after the "create" event:

Code: [Select]

create:function( event, ui ) {
                var part1 = '<span class="pq-ui-button ui-widget-header" tabindex="0" rel="tooltip" title="';
var part2 = '"><span class="ui-icon ';
var part3 = '"></span></span>';
$(".pq-grid-footer").prepend('<span class="pq-separator"></span>');
$(".pq-grid-footer").prepend(part1 + "New Window" + part2 + "ui-icon-newwin" + part3);
$(".pq-grid-footer").prepend(part1 + "Save As PDF" + part2 + "ui-icon-disk" + part3);
$(".pq-grid-footer").prepend($(".pq-grid-footer .pq-ui-button[title='Refresh']"));
$(".pq-grid-footer").prepend(part1 + "Customize Search" + part2 + "ui-icon-wrench" + part3);
$(".pq-grid-footer .pq-ui-button[title='Last Page'] ~ .pq-separator, pq-page-placeholder").remove();
       }

I have attached a screenshot from my test environment.