Issue with horizontal scroll bar int he grid able to see empty columns

[Ajay]

Hi All,
I am uisng paramQuery grid for results.
I am facing when I am having more columns.
If you scroll the horizontal scroll bar in the grid output, you will see that there are 4 or 5 empty columns on the right hand side of the grid.
Here is my Code:

 gridUsage.pqGrid({
                width: getSearchGridWidth(),
                height: getSearchGridHeight(),
                editable: false,
                topVisible: false,
                bottomVisible: false,
                numberCell: false,
                roundCorners: false,
                wrap: false,
                colModel: columnModel,
                dataModel: { data: [] },
                flexWidth: true,
                flexHeight: true
                // scrollModel: { pace: 'consistent', horizontal: true },
               // scrollModel: { autoFit: true }
});

Please help me in how can I restrict the scroll bar from going to right after reaching the end of grid.
or
How can I hide/restrict the empty columns on the right side of grid.

[paramvir]

have you defined extra columns in colModel

As a side note this screenshot doesn't look like that of pqGrid as pqGrid doesn't use native scrollbars. Please create a jsfiddle if possible.

Here is an example how you can hide horizontal scrollbar with flexWidth: true and scrollModel: {horizontal: false}.

http://jsfiddle.net/bphnecvm/91/

[Ajay]

Thanks for the reply.
I  did not define extra columns and I am not using Show/hide functionality for the columns as well.
I am using PQ grid in Iframe.

When i tried to see through the Html content of the PQ Grid with empty columns, I came to know that
When scrolling the horizontal scroll bar to the right,the columns  on the left side which are loosing view when scroll bar is dragged towards right are getting repeated with "visibility:hidden" on the right side and that is the reason there are empty columns on the pQ Grid.

How can I get rid of these empty columns.
For Example:
i am having  20 columns of data.
Initially when the grid loads, I am able to see  first 12 columns.
when I move the scroll bar to the right, i am able to see the remaining 8 columns and  first 4 columns with empty rows(1,2,3,4) with visibility:hidden.

Thanks for the support.

[paramvir]

They are hidden by default, I'm not sure how their borders ended up being visible in your case. ( might be some css )

It would be great if you could share a jsfiddle.

[Ajay]

I have tried adding pq grid data inside an iframe.
I am not able to display grid inside an iframe.
here is my JS fiddle code.

http://jsfiddle.net/u2f0swuw/5/

[Ajay]

Hi All,
 I ma trying to fix the issue by removing the css on scroll bar event.
I tried with the below code, I am trying to remove the css,when i debug thru the code it is working.
But it is not removing css from the actual HTML.

 $('#gridDictationStatus .pq-grid-table').find('tr').not('.pq-row-hidden').find('td').each(function () {

                            if($(this).attr('style')!=undefined)
                            {
                                $(this).removeClass('pq-grid-cell');
                            }

                        });
how to remove css from the actual HTML of pqgrid