This is a migrated thread and some comments may be shown as answers.

Determine if vertical scrollbar is visible

7 Answers 181 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sean Severson
Top achievements
Rank 1
Sean Severson asked on 23 Jun 2010, 09:47 PM
I am handling the resizing of columns in my master and detail tables via JavaScript and need to know how to determine if the vertical scroll bar is visible in the grid. 

Sean M. Severson

7 Answers, 1 is accepted

Sort by
0
Veli
Telerik team
answered on 29 Jun 2010, 08:03 AM
Hello Sean,

If you are using Scrolling in RadGrid, you can use the RadGrid client object to compare the scroll height and the offset height of the GridDataDiv:

$find("<%= RadGrid1.ClientID %>").GridDataDiv.scrollHeight
$find("<%= RadGrid1.ClientID %>").GridDataDiv.offsetHeight

A difference between the two values (particularly, scrollHeight being larger) indicates vertical scrolling.

Sincerely yours,
Veli
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Sean Severson
Top achievements
Rank 1
answered on 06 Jul 2010, 04:03 PM
Veli,

Your suggestion works well, except for when I expand a parent record to show child records.  When I do this the scrollHeight is greater than the offsetHeight even though the scrollbar is not visible in the grid even with the expansion of the child records.

Sean M. Severson
0
Veli
Telerik team
answered on 07 Jul 2010, 07:54 AM
Hi Sean,

The only time an element can have a greater scrollHeight than offsetHeight and not show any scroll bars is when the element overflow is set to "visible" or "hidden". This is not the case with the GridDataDiv in RadGrid.

Can you post some sample code that will help us reproduce this? It might be possible that these calculations are mare before RadGrid fully updates it's elements (for example checking the scrollHeight and offsetHeight before a parent item is actually expanded).

Another approach to check if the grid shows a scroll bar is to calculate the difference between the offsetHeights of the GridDataDiv and the MasterTableView:

$find("<%= RadGrid1.ClientID %>").GridDataDiv.offsetHeight
$find("<%= RadGrid1.ClientID %>").get_masterTableView().get_element().offsetHeight


Sincerely yours,
Veli
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Sean Severson
Top achievements
Rank 1
answered on 07 Jul 2010, 03:09 PM

Veli,


The problem appears to be that when i expand a parent to display the children, $find("<%= RadGrid1.ClientID %>").GridDataDiv.offsetHeight is set to 10 instead of the true offsetHeight, which is more like 350. So, my code thinks that the scroll bar is displayed since


$find("<%= RadGrid1.ClientID %>").get_masterTableView().get_element().offsetHeight

> $find("<%= RadGrid1.ClientID %>").GridDataDiv.offsetHeight

Some background, I am loading the child rows on demand when the user clicks the expand button on the parent row.

Wouldn't $find("<%= RadGrid1.ClientID %>").GridDataDiv.offsetHeight show a slightly larger offsetHeight when the child rows are displayed for one parent than before any child row expansion?

Sean M. Severson


0
Veli
Telerik team
answered on 08 Jul 2010, 11:36 AM
Hello Sean,

Some background, I am loading the child rows on demand when the user clicks the expand button on the parent row.

In this case, I suggest you use the client-side GridCreated event for your calculations, as you need to wait for the response to arrive and RadGrid to recreate its structure.

Can you post some code we can look at if the problem persists?

Kind regards,
Veli
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Sean Severson
Top achievements
Rank 1
answered on 08 Jul 2010, 01:38 PM
Veli,

I have provided some code, but I'm not sure how valuable it will be in isolation.  The javascript that resizes my grid is run on the resize event of the window (window.onresize).  Essentially, this code supports the resizing of the browser window and keeps the columns in the parent and child rows alligned.  The two issues I am experiencing are that the scrollbarsize is being set incorrectly when a parent row is expanded to display its children and the child columns don't quite match up exactly with the parent columns.

I'll try running the scripts on the GridCreated and see if the problem of the incorrect setting of the scrollbarsize persists.

Sean M. Severson.

function reSizectl00_ContentPlaceHolder1_rg_rgRenewalList()
{
//debugger;
//doing try catch just to make sure that we display grid even if there is a javascript error!@
try
{
var w=0;
var h=0;
var pageheight = document.documentElement.clientHeight;
var pagewidth = document.documentElement.clientWidth ;
  
var objGrid = $find('ctl00_ContentPlaceHolder1_rg_rgRenewalList');
if (objGrid != null)
{
var elemTop = getElementTop(objGrid.get_element());
var elemLeft = getElementLeft(objGrid.get_element());
h = (pageheight - elemTop - 25);
w = (pagewidth - elemLeft - elemLeft - 5);
saveWidthctl00_ContentPlaceHolder1_rg_rgRenewalList = w;
if (w > 0)
{
reSizeGridToctl00_ContentPlaceHolder1_rg_rgRenewalList(h,w);
objGrid.repaint();
}
}
}
catch(e) {
//Catch the error thrown and do something with it.
alert("You have this problem:\n\t" + e.description);
}
if ($get('ctl00_ContentPlaceHolder1_rg_gridholder') != null)
ctl00_ContentPlaceHolder1_rg_gridholder.style.display = "block";
}
function reSizeGridToctl00_ContentPlaceHolder1_rg_rgRenewalList(h,w)
{
var gridObject =  $find('ctl00_ContentPlaceHolder1_rg_rgRenewalList');
var gridElement = gridObject.get_element();
  
gridElement.style.width = w + "px";
gridElement.style.height = h + "px";
gridObject.repaint();
debugger;
  
var masterTableView = gridObject.get_masterTableView();
if (masterTableView == null)
{
return;
}
var hdr = gridObject.get_masterTableViewHeader();
if (hdr == null)
{
return;
}
var scrollbarsize = 0;
var detailTables = gridObject.get_detailTables();
  
var masterTable = masterTableView.get_element();
if (masterTable.offsetHeight > gridObject.GridDataDiv.offsetHeight)
{scrollbarsize = 20;
}
var c0,c1,c2,c3,c4,c5,c6,c7,c8,c9,c10;
c0 = 19; //indicator
c10 = 50; //action
w = w - c0 - c10 - c10 - scrollbarsize - 5;
c1 = Math.round(w * .08); //PolicyNumber
c2 = Math.round(w * .15); //Insured name
c3 = Math.round(w * .08); //Expiration Date
c4 = Math.round(w * .08); //Premium
c5 = Math.round(w * .10); //Agent
c6 = Math.round(w * .08); //Status
c7 = Math.round(w * .15); //TaskType
c8 = Math.round(w * .13); //Assigned To
c9 = Math.round(w * .13); //Owner
//adjust for rounding
c10 = c10 + w - c1 - c2 - c3 - c4 - c5 - c6 - c7 - c8 - c9;
hdr.ColGroup.Cols[0].width = masterTableView.ColGroup.Cols[0].width = c0 + "px"; //ind
hdr.ColGroup.Cols[1].width = masterTableView.ColGroup.Cols[1].width = c1 + "px"; //PolicyNumber
hdr.ColGroup.Cols[2].width = masterTableView.ColGroup.Cols[2].width = c2 + "px"; //Insured name
hdr.ColGroup.Cols[3].width = masterTableView.ColGroup.Cols[3].width = c3 + "px"; //Expiration Date
hdr.ColGroup.Cols[4].width = masterTableView.ColGroup.Cols[4].width = c4 + "px"; //Premium
hdr.ColGroup.Cols[5].width = masterTableView.ColGroup.Cols[5].width = c5 + "px"; //Agent
hdr.ColGroup.Cols[6].width = masterTableView.ColGroup.Cols[6].width = c6 + "px"; //Status
hdr.ColGroup.Cols[7].width = masterTableView.ColGroup.Cols[7].width = c7 + "px"; //TaskType
hdr.ColGroup.Cols[8].width = masterTableView.ColGroup.Cols[8].width = c8 + "px"; //Assigned To
hdr.ColGroup.Cols[9].width = masterTableView.ColGroup.Cols[9].width = c9 + "px"; //Owner
hdr.ColGroup.Cols[10].width = masterTableView.ColGroup.Cols[10].width = c10 + "px"; //action
for (var j = 0; j < detailTables.length; j++) {
if(detailTables[j].get_name() == "AssociatedPolicies")
{
detailTables[j].ColGroup.Cols[0].width = c1-1 + "px"; //PolicyNumber
detailTables[j].ColGroup.Cols[1].width = c2-1 + "px"; //Insured Name
detailTables[j].ColGroup.Cols[2].width = c3-1 + "px"; //Expiration Date
detailTables[j].ColGroup.Cols[3].width = c4-1 + "px"; //Premium
detailTables[j].ColGroup.Cols[4].width = c5-1 + "px"; //Agent
detailTables[j].ColGroup.Cols[5].width = c6-1 + "px"; //Status
detailTables[j].ColGroup.Cols[6].width = c7-1 + "px"; //TaskType
detailTables[j].ColGroup.Cols[7].width = c8-1 + "px"; //Assigned To
detailTables[j].ColGroup.Cols[8].width = c9-1 + "px"; //Owner
detailTables[j].ColGroup.Cols[9].width = c10-1 + "px"; //action
}
}
}
0
Veli
Telerik team
answered on 09 Jul 2010, 12:03 PM
Hi Sean,

Yes, you can call the same method in GridCreated as, at this point, RadGrid will be re-initialized after postback. Also try it with a small timeout, e.g. 200 or 300 ms:

function gridCreated(sender, args)
{
    setTimeout(function()
    {
        //call your functions here
    }, 300);
}


Veli
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
Sean Severson
Top achievements
Rank 1
Answers by
Veli
Telerik team
Sean Severson
Top achievements
Rank 1
Share this question
or