We are using iggrid and the paging control in the grid is getting wrapped when the width of the page layout is small. Do we have an option to apply a scrollbar for the paging control alone?
Attached the screenshot, please find.
Hello Prasath,
You can choose between two different approaches:
1. Remove some of the paging interface using the following igGridPaging options: showPagerRecordsLabel, showFirstLastPages, showPrevNextPages2. Use CSS to make the horizontal scrollbar - here are the CSS rules which assume that the grid has ID = 'grid2'
<style> #grid2_pager { white-space: nowrap; overflow-x: scroll; } #grid2_pager>div.ui-iggrid-paging { display: inline-block; width: 400px; float: none; } #grid2_pager_label { float: none; padding-right: 20px; } </style>
<style>
#grid2_pager {
white-space: nowrap;
overflow-x: scroll;
}
#grid2_pager>div.ui-iggrid-paging {
display: inline-block;
width: 400px;
float: none;
#grid2_pager_label {
padding-right: 20px;
</style>
Both of the approaches are demonstrated in the attached sample.
Best regards, Martin Pavlov Infragistics, Inc.
Thanks Martin for your reply and the sample source code.
We still have the issue because we are dynamically setting the width for the grid in percentage. We should see the scrollbar based on the width set.
#grid2_pager>div.ui-iggrid-paging {display: inline-block;width: 30%;float: none; }
Hi Jason,
Yes, it worked. Thanks much for your assistance.
Regards,
Prasath C
Does my new workaround for the pager meet your requirements? Please let me know if I may be of any further help.
Prasath,
There's one other way I can think of doing this. It involves manipulating the DOM a bit which I can't say I'm a fan of as this may introduce unexpected behavior. However, it should give you the behavior you want. First, change the CSS that Martin provided so that you have just the following two styles (note that one of these is a new style):
#grid_pager { white-space: nowrap; overflow-x: auto;}#grid_pager_scroll_container { min-width: 590px;}
Next, wire up the pagerRendered event of the Paging feature. In here, append a new div to the grid_pager element and give it an ID of grid_pager_scroll_container. After that, perform an appendTo operation on the grid_pager_label and the grid_pager>div.ui-iggrid-paging elements, adding them to the new div.
pagerRendered: function (evt, ui) { $('#grid_pager').append('<div id="grid_pager_scroll_container"></div>'); $('#grid_pager_label').appendTo('#grid_pager_scroll_container'); $('#grid_pager>div.ui-iggrid-paging').appendTo('#grid_pager_scroll_container'); }
I've created a fork of the jsFiddle so you can see all of this working together.
Thanks Jason for the reply.
For smaller pane container, the solution works fine. However in the bigger pane, the label and the paging control are left aligned. But we need to have the label (#grid_pager_label) aligned on left side and paging control (.ui-iggrid-paging) aligned on right as it was by default. Can this be done?
In this instance you will want to keep the width that you highlighted here set to 400px. That selector is grabbing the container element for just the buttons and drop down controls in the paging container. If you modify the width of that then that section will only take up 30% of its parent container and give you a weird wrapping effect.
If instead you set the width on only the grid itself the footer will follow that width for you automatically. I've thrown together a jsFiddle to demonstrate this for you. As a note, I do recommend making one small change from what Martin provided if you only want the scroll bar to show up when the content exceeds the width of its parent: change overflow-x: scroll to overflow-x: auto. I've added that implementation in the jsFiddle example I provided. To see the impact all of this has, resize the pane that contains the running igGrid in the jsFiddle example and you'll see the scrollbar appear when the grid is small enough.