Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

setting ScrollArea dynamically in Javascript

6 Answers 108 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dave Hollen
Top achievements
Rank 1
Dave Hollen asked on 16 Feb 2010, 07:07 PM
Hello,

I am using a Radgrid which I am setting the ScrollArea on the OnGridCreated Client Event.

The issue I am running into is when the user puts the grid into edit mode.  I have a user control as the Edit form for the grid. 

The javascript I have does not seem to be calculating the height correctly when the grid is in edit mode.

Is there a way that I can get the height of the user control in Javascript so that I can adjust the ScrollArea accordingly? 

Here is my Javascript (works fine if grid not in Edit Mode):

function

 

rgUsers_Client_OnGridCreated(sender, args)

 

{

 

 

 

 

var scrollArea = sender.GridDataDiv;

 

 

if (scrollArea)

 

{

 

var masterTable = sender.get_masterTableView();

 

 

if (masterTable)

 

{

 

var element = masterTable.get_element();

 

 

if (element)

 

{

 

var dataHeight = element.clientHeight;

 

 

if (dataHeight < 350)

 

{

scrollArea.style.height = dataHeight + 17 +

"px";

 

}

}

}

}

}

Thanks!
Dave

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 17 Feb 2010, 01:44 PM
Hi Dave,

I don't see any problems with your code. Here is my test page. Let me know if I am missing something.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<script runat="server">
 
    protected void rgUsers_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 2;
        string colName = "Column";
 
        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }
 
        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();
 
            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }
 
        (sender as RadGrid).DataSource = dt;
    }
 
</script>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<telerik:RadGrid
    ID="rgUsers"
    runat="server"
    AutoGenerateEditColumn="true"
    OnNeedDataSource="rgUsers_NeedDataSource">
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
        <ClientEvents OnGridCreated="rgUsers_Client_OnGridCreated" />
    </ClientSettings>
    <MasterTableView CommandItemDisplay="Top" />
</telerik:RadGrid>
 
<script type="text/javascript">
 
function rgUsers_Client_OnGridCreated(sender, args)
{
    var scrollArea = sender.GridDataDiv;
    if (scrollArea)
    {
        var masterTable = sender.get_masterTableView();
        if (masterTable)
        {
            var element = masterTable.get_element();
            if (element)
            {
                var dataHeight = element.clientHeight;
                if (dataHeight < 350)
                {
                    scrollArea.style.height = dataHeight + 17 + "px";
                }
            }
        }
    }
}
 
</script>
 
</form>
</body>
</html>


Kind regards,
Dimo
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
Dave Hollen
Top achievements
Rank 1
answered on 17 Feb 2010, 01:59 PM
verticalscrollbar.jpg
Dimo,

The issue I am having is that when the grid is in edit mode, even though I am setting the scroll area the vertical scroll bar still shows and it is only needed to scroll 4 or 5 pixels (see attached screen shot).

When the grid is not in edit mode, the scroll area is set correctly and no vertical scroll bar is displayed.
0
Dimo
Telerik team
answered on 17 Feb 2010, 02:04 PM
Hi Dave,

Probably there is something in the edit form, which expands after the scrollArea height calculation. Try setting a larger height.

Kind regards,
Dimo
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
Dave Hollen
Top achievements
Rank 1
answered on 17 Feb 2010, 02:07 PM
Dimo,

Thanks for all the help so far.

One more question - in the java script that I posted, is there a way to dynamically get what the "17" corresponds to in this line of code:

scrollArea.style.height = dataHeight + 17 +

 

"px";


What is the 17?  I got this code from one of the online help articles on the Telerik website.

Thanks,
Dave

0
robertw102
Top achievements
Rank 1
answered on 17 Feb 2010, 02:13 PM
I believe the "17" is to compensate for the header row.
0
Dimo
Telerik team
answered on 17 Feb 2010, 02:44 PM
Hello,

The number 17 is for the horizontal scrollbar height. You can get that dynamically with

var scrH = Telerik.Web.UI.Grid.getScrollBarHeight();


Regards,
Dimo
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
Dave Hollen
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Dave Hollen
Top achievements
Rank 1
robertw102
Top achievements
Rank 1
Share this question
or