Determine if vertical scrollbar is visible

[Sean Severson]

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

[Veli]

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

[Sean Severson]

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

[Veli]

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

[Sean Severson]


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




[Veli]

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

[Sean Severson]

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

}

}

}

[Veli]

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