Tab inside Tab with JQXGrid as content having vertical scroll bar

[pankyParticipant]

Hi

I have a Tab Control with two tabs in side Tab Control [ Dynamic tabs].

In my one of inner tab content [first tab content] , I have JQXGrid and some other controls.

I have set as below of my Div tag for my first Tab content.

<div id="divEval" style="height: 100%">

But I am getting vertical scroll bar for this Tab Content as my JQXGrid has no paging and so it’s height increases dynamically. If I set

style="overflow: hidden;"

Then it does not show all Tab contents.

Thanks

Panky

[Peter StoevKeymaster]

Hi panky,

It is not necessary to make the Grid’s height to be “autoheight” when you use Paging. This property could be set to false and the Grid’s height will not increase dynamically.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[pankyParticipant]

Thanks Peter,

I tried to use autoHeight: true and it worked for Fix content vertical scroll bar.

I have Tab control [tabMain] with Dynamic Tabs having IFrame src =”ABCD.aspx” on my main page.

On ABCD.aspx page I have Table [tbl1] at top and then I have another Tab Control [tabContent] with JQXGrid.

if I use “autoHeight: true” of “tabMain” it don’t show all contents of Tab. [It only shows table and not Tab on ABCD.aspx Page]

If I use height:’100%’ then for 100 rows Grid will cut at the bottom.

Thanks
Panky

[Peter StoevKeymaster]

Hi Panky,

Actually, my point was to set “autoheight” to false so the Grid’s size will be Static. In addition, you may see the http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/integration.htm?web demo which shows how to fit a Grid inside a Tab.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[pankyParticipant]

Thanks Peter,

It worked for one scenario, when Grid has 100 rows.

I have same grid where some times it has 5 rows and some times it could have 100 rows.

so how could I take care of it, buy setting grid autoheight = true/false in JS based on count of records?

appreciate your response.

Thanks
Panky

[Peter StoevKeymaster]

Hi Panky,

Set the Grid to a fixed height without setting autoheight so its height will be always a fixed number and will not increase. Another option is to set its height in percentages as in the demo I suggested you to look. You can get the number of records loaded through
jqxDataAdapter by setting its loadComplete callback function and inside the function write: var count = dataAdapter.records.length; More details about jqxDataAdapter – http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[pankyParticipant]

Thanks Peter,

I put

var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: onLoadCompelte });

and set jqxGrids autoheight and height based on number of records and it worked like as expected.

Thanks a ton

-Panky

[Author]

Posts