Get Horizontal Scroll Bar on the Page Instead of Grid

[NaveenBhatParticipant]

Hello,

The JqxWidjet is really a nice set of tools. I created a sample application using the trial version and our business team has impressed with the ui and bought the full licence.

Now there is a business requirement for which it seems that there is no native support in jqxGrid.

The requirement is, when we resize the column, we would like to see a scroll-bar on the parent container instead of the grid itself. We can get the same behavior for height by setting the autoheight property to true, but there is no such support for width. I created a sample here to understand the situation better: http://jsfiddle.net/knvn/Dm8BA/

In the sample given above, resize the columns and you will see a scrollbar on the grid instead of the page unlike height.

I have done a workaround by assigning the modified width of the column to gird width but its not 100% perfect. It works well 90% of the time but still fails few times. Here is the code i used to do it.

            $("#jqxgrid").on('columnresized', function (event) {
                    var args = event.args; var column = args.column;
                    var modifiedWidth = args.newwidth - args.oldwidth;
                    var newGridSize = $('#contenttablejqxgrid').width() + modifiedWidth;
                    // Resize grid with column.
                    $("#jqxgrid").jqxGrid({ width: newGridSize });
             });

Working sample: http://jsfiddle.net/knvn/Lxm4r/

In the above sample you can see a scroll bar on the page instead of grid when you resize the colun. However, it won’t work well with less data. Here is the steps to reproduce the issue in above sample:

1. Reduce the loop count to 5.
2. Drag any column to the right as max as possible.
3. Drag any column to left as less as possible.

You will see a scrollbar on the grid now, instead of page.

Please help me to resolve this. It would be nice, if you provide some native support in the next version.

Thanks,
-Naveen Bhat

[Peter StoevKeymaster]

Hi Naveen,

jqxGrid always works with its Scrollbars. The vertical scrollbar is not displayed when autoheight is true only because the Grid’s Height is equal to the Sum of its Row Heights so there is no overflow of the content in that case. The behavior that you are looking for seems to be autowidth, but we do not have such feature at present.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[NaveenBhatParticipant]

Yes, I understand that. I don’t have any issue with the height or vertical scrollbar. It works as expected. The issue I am having is with the width or horizontal scroll bar. I also, understand that you are not supporting that feature natively at the moment. However, I am requesting you to provide some workaround. I have tried my level best for this, but it won’t work well with less data (refer my original post to reproduce the issue). I believe you can provide a temporary workaround for this. Please help me out.

Technically speaking, this can be achieved by increasing/decreasing the width of the grid itself when you increase/decrease the column size. This is what I tried to achieve with the below code and succeeded partially

$("#jqxgrid").on('columnresized', function (event) {
                    var args = event.args; var column = args.column;
                    var modifiedWidth = args.newwidth - args.oldwidth;
                    var newGridSize = $('#contenttablejqxgrid').width() + modifiedWidth;
                    // Resize grid with column.
                    $("#jqxgrid").jqxGrid({ width: newGridSize });
             });

Still there are times when the div contenttablejqxgrid overflows the parent div causing a scrollbar on the grid.

[Author]

Posts