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):
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
0
Hi Dave,
I don't see any problems with your code. Here is my test page. Let me know if I am missing something.
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.
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"
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
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
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.
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
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.
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:
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
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.
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.