jQuery Grid Plugin - jqGridForum

Topic RSS

Pager positioning

09/09/2010
09:19

quailster

New Member

Members

Forum Posts: 2

Member Since:
09/09/2010

Offline

Hi. I am a Java programmer and just started with javascript stuff or web development in general, so please excuse my newbieness. I am using the jqgrid tag library for JSP, and I am having problem with positioning the pager to some place where it's visible. Currently, the grid looks like this:

As you can see, I cannot see the pager. If I increase the width of the grid, I can see it:

Unfortunately, I cannot make the grid that big just to see the pager.

Here's my code for the JSP that display the large grid width=900. The small grid has width=300. Note that the pager should still fit even with width=300.

<sjg:grid id="readingsTableTwo" dataType="json" href="%{linkDeviceReadingsTwo}" gridModel="readings" altRows="true" rowList="10,15,20" rowNum="10" width="900" pager="true">

<sjg:gridColumn name="time" index="time" title="Video Archive" sortable="false" />

<sjg:gridColumn name="string" index="string" title="String" hidden="true" />

</sjg:grid>

I have tried many things like setting pagerpos property and surround the tags with div that align everything to the left, creating a custom pager, setting the width smaller after page load, etc..

        //$(document).ready(function() {
       //   jQuery('#readingsTableTwo').jqGrid('setGridParam', {'pagerpos': 'left'});
       //    jQuery('#readingsTableTwo').jqGrid('setGridParam', {'recordpos': 'left'});
       //    jQuery('#readingsTableTwo').jqGrid('setGridParam', {pager: '#myPager'});
       //    jQuery('#readingsTableTwo').jqGrid('setGridWidth', '300');
       //    jQuery('#readingsTableTwo').trigger('reloadGrid');
        //});

I have done a search in this help form for threads with topic containing the word "pager", but none of them solved my problem.

Anyway, thank you in advance for helping!

11/09/2010
14:47

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Since the pager is divided in three equal parts, whan you create the grid with the smaller width there is no room for the pager elements at right.

There are a lot of ways to resolve. One of them is to set a zero width for the first two parts of the pager.

After constructing the grid do :

( I suppose your pager has a id - pager)

$("#pager_left, #pager_center", "#pager").width(0);

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

11/09/2010
18:30

quailster

New Member

Members

Forum Posts: 2

Member Since:
09/09/2010

Offline

Thanks for the help. I actually found a different solution that's rather ugly. I just checked the generated source of the page and found that the pager is some kind of table. Then I just tried out random CSS styling since I'm a newbie and came up with this:

        $(document).ready(function() {
            // ugly hack to get the pager to align left.
            $('.ui-pg-table tr td').css({'text-align':'left'});
        });

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 816

Currently Online:
51 Guest(s)

Currently Browsing this Page:
1 Guest(s)