If you have a RadformDecorator DecoratedControls="All" and a grid with a GridCheckBoxColumn or a Template column with a checkbox and click refresh in the grid commandtemplate. The Grids MasterTableView Clientheight is reduced 1px per row.
This is causing issue with my autoresize of the grid height. My grid height is autosize on initial load correctly, but when I refresh I get an undesired scrollbar on my grid.
This was an interesting one to chase down.
html on initial pageload
<
input
id
=
"ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl04_ctl00"
class
=
"rfdRealInput"
disabled
=
"disabled"
name
=
"ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl04$ctl00"
CHECKED
=
"checked"
type
=
"checkbox"
_rfddecoratedID
=
"_rfdSkinnedctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl04_ctl00"
>
<
label
id
=
"_rfdSkinnedctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl04_ctl00"
class
=
" rfdCheckboxChecked rfdInputDisabled"
for
=
"ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl04_ctl00"
unselectable
=
"on"
> </
label
>
html after a page refresh ****** (NOTE the missing closing tag on the Label) ******
<
input
name
=
"ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl04$ctl00"
disabled
=
"disabled"
class
=
"rfdRealInput"
id
=
"ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl04_ctl00"
type
=
"checkbox"
CHECKED
=
"checked"
_rfddecoratedID
=
"_rfdSkinnedctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl04_ctl00"
/>
<
label
class
=
" rfdCheckboxChecked rfdInputDisabled"
id
=
"_rfdSkinnedctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl04_ctl00"
for
=
"ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl04_ctl00"
unselectable
=
"on"
>
5 Answers, 1 is accepted
0
Hi Roger,
After extended testing I was not able to come across any suspicious behavior in the decorated checkbox column. It is, of course, perfectly possible that my tests do not cover your scenario completely and I may be missing crucial details. Therefore I should advise you to create a support ticket and attach a sample project there that demonstrates the issues that you are experiencing so that I can investigate them in depth.
As far as the not closed <label> tag is concerned, it is strange that you are experiencing such problems, as these DOM elements are created through client-side code and are not rendered through the HTML content on the page, thus it is almost impossible that they are not closed. As you are experiencing such issues, this makes the case even more peculiar and it will be really interesting to investigate what exactly is going wrong.
Best wishes,
Niko
the Telerik team
After extended testing I was not able to come across any suspicious behavior in the decorated checkbox column. It is, of course, perfectly possible that my tests do not cover your scenario completely and I may be missing crucial details. Therefore I should advise you to create a support ticket and attach a sample project there that demonstrates the issues that you are experiencing so that I can investigate them in depth.
As far as the not closed <label> tag is concerned, it is strange that you are experiencing such problems, as these DOM elements are created through client-side code and are not rendered through the HTML content on the page, thus it is almost impossible that they are not closed. As you are experiencing such issues, this makes the case even more peculiar and it will be really interesting to investigate what exactly is going wrong.
Best wishes,
Niko
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
Roger
Top achievements
Rank 1
answered on 02 Aug 2011, 07:51 PM
See if you can reproduce using the below
As stated in my original post the DataHeight is 1px different per row if I have a checkbox in the grid after a postback.
Initial load for the below it's 282, which is shown via the alert in the JS, after it's loaded click refresh in the command template, it's 272. If you reduce or add to the number of rows the difference will vary by 1px per row added or deleted.
As stated in my original post the DataHeight is 1px different per row if I have a checkbox in the grid after a postback.
Initial load for the below it's 282, which is shown via the alert in the JS, after it's loaded click refresh in the command template, it's 272. If you reduce or add to the number of rows the difference will vary by 1px per row added or deleted.
Master
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Master2.master.vb" Inherits="TestWeb08.Master2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
id
=
"Head1"
runat
=
"server"
>
<
title
>TestWeb08</
title
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
</
telerik:RadScriptManager
>
<
telerik:RadFormDecorator
ID
=
"RadFormDecorator2"
DecoratedControls
=
"All"
runat
=
"server"
DecorationZoneID
=
"ZoneID2"
Skin
=
"Default"
></
telerik:RadFormDecorator
>
<
div
id
=
"ZoneID2"
style="margin-left: auto; margin-right: auto;
height: 100%;">
<
telerik:RadAjaxPanel
Style
=
"text-align: left;"
ID
=
"PagePanel"
runat
=
"server"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
>
<
asp:ContentPlaceHolder
ID
=
"ContentPlaceHolder1"
runat
=
"server"
>
</
asp:ContentPlaceHolder
>
</
telerik:RadAjaxPanel
>
</
div
>
</
form
>
</
body
>
</
html
>
TestGrid.aspx
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestGrid.aspx.vb" Inherits="TestWeb08.TestGrid"
MasterPageFile="~/Master2.Master" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
asp:Content
ID
=
"Content1"
runat
=
"server"
ContentPlaceHolderID
=
"ContentPlaceHolder1"
>
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
PageSize
=
"25"
AllowPaging
=
"true"
AllowSorting
=
"True"
Skin
=
"Default"
CellPadding
=
"-1"
CellSpacing
=
"-1"
AutoGenerateColumns
=
"True"
GridLines
=
"None"
Width
=
"950px"
BorderWidth
=
"0"
HorizontalAlign
=
"Center"
>
<
HeaderStyle
VerticalAlign
=
"Bottom"
/>
<
MasterTableView
EditMode
=
"PopUp"
Caption
=
"Projects"
CommandItemDisplay
=
"Top"
NoMasterRecordsText
=
"No Rows Returned!"
RetrieveNullAsDBNull
=
"False"
HorizontalAlign
=
"Center"
CellPadding
=
"-1"
CellSpacing
=
"-1"
BorderWidth
=
"1"
BorderColor
=
"Gray"
BorderStyle
=
"Solid"
>
<
Columns
>
<
telerik:GridCheckBoxColumn
DataField
=
"CheckBox"
HeaderText
=
"CheckBox"
SortExpression
=
"CheckBox"
HeaderStyle-Width
=
"50"
>
<
HeaderStyle
Width
=
"50px"
HorizontalAlign
=
"Center"
></
HeaderStyle
>
<
ItemStyle
HorizontalAlign
=
"Center"
/>
</
telerik:GridCheckBoxColumn
>
<
telerik:GridTemplateColumn
>
<
ItemTemplate
>
<
asp:CheckBox
ID
=
"chkbChecked"
runat
=
"server"
Checked='<%# bind("CheckBox") %>' />
</
ItemTemplate
>
</
telerik:GridTemplateColumn
>
</
Columns
>
</
MasterTableView
>
<
ClientSettings
EnableRowHoverStyle
=
"True"
>
<
ClientEvents
OnMasterTableViewCreated
=
"ResizeGrid"
/>
<
Scrolling
AllowScroll
=
"true"
ScrollHeight
=
"100%"
UseStaticHeaders
=
"true"
/>
</
ClientSettings
>
<
PagerStyle
AlwaysVisible
=
"false"
Mode
=
"NextPrevNumericAndAdvanced"
/>
</
telerik:RadGrid
>
<
script
type
=
"text/javascript"
>
function ResizeGrid(sender, args) {
try {
if (sender) {
var scrollArea = document.getElementById(sender.get_id() + "_GridData");
var dataHeight = sender.get_masterTableView().get_element().clientHeight; //gets the actual height of the grid
alert('dataHeight : ' + dataHeight + ' ScrollArea: ' + scrollArea.style.height);
scrollArea.style.height = dataHeight + "px"
}
}
catch (ex) {
//alert(ex);
}
}
</
script
>
</
asp:Content
>
TestGrid.vb
Public Partial Class TestGrid
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
Private Sub RadGrid1_NeedDataSource(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource
Dim dt As New DataTable
'Add our columns
For i As Integer = 0 To 5
dt.Columns.Add("Field" + i.ToString, GetType(String))
Next
dt.Columns.Add("CheckBox", GetType(Boolean))
Dim row As DataRow
For r As Integer = 0 To 9
row = dt.NewRow
For c As Integer = 0 To 5
row("Field" + c.ToString) = "Value " + r.ToString
Next
row("CheckBox") = True
dt.Rows.Add(row)
Next
Me.RadGrid1.DataSource = dt
End Sub
End Class
0
Hello Roger,
The provided code was just enough for me to reproduce the issue that you are experiencing. The reason for this situation is the way the form decorator decorates the controls after a server postback and after an ajax postback.
In the first case the decorator waits for all the controls to load and applies the decoration. When the MasterTableView has been created the checkboxes have already been decorated.
After an ajax request the content is first changed and the created event is raised. However the request has not been completed on the client-side and the form decorator still hasn't decorated the table. This the state when the alert you have implemented is shown. After that, when the request has been completed, the form decorator jumps in and decorates the checkboxes. However the resize method has already passed and the new dimensions of the decorated controls are not taken under consideration.
Basically you have two options.
First is to simply decide to not change the dimensions of the table's container and let the browsers deal with.
The second option is to force the decoration of the controls through the decorate method of the form decorator.
And the getFormDecorator method can be placed in the master page:
Hope this helps.
All the best,
Niko
the Telerik team
The provided code was just enough for me to reproduce the issue that you are experiencing. The reason for this situation is the way the form decorator decorates the controls after a server postback and after an ajax postback.
In the first case the decorator waits for all the controls to load and applies the decoration. When the MasterTableView has been created the checkboxes have already been decorated.
After an ajax request the content is first changed and the created event is raised. However the request has not been completed on the client-side and the form decorator still hasn't decorated the table. This the state when the alert you have implemented is shown. After that, when the request has been completed, the form decorator jumps in and decorates the checkboxes. However the resize method has already passed and the new dimensions of the decorated controls are not taken under consideration.
Basically you have two options.
First is to simply decide to not change the dimensions of the table's container and let the browsers deal with.
The second option is to force the decoration of the controls through the decorate method of the form decorator.
function
ResizeGrid(sender, args)
{
//return;
try
{
if
(sender)
{
var
formDecorator = getFormDecorator();
var
table = sender.get_masterTableView().get_element();
formDecorator.decorate(table);
var
scrollArea = document.getElementById(sender.get_id() +
"_GridData"
);
var
dataHeight = sender.get_masterTableView().get_element().clientHeight;
//gets the actual height of the grid
alert(
'dataHeight : '
+ dataHeight +
' ScrollArea: '
+ scrollArea.style.height);
scrollArea.style.height = dataHeight +
"px"
;
}
}
catch
(ex)
{
alert(ex);
}
}
function
getFormDecorator() {
return
$find(
"<%= RadFormDecorator2.ClientID %>"
); }
Hope this helps.
All the best,
Niko
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
Roger
Top achievements
Rank 1
answered on 04 Aug 2011, 02:47 PM
Thanks Niko your workaround worked as described.
Is this something that is going to be resolved in future releases or is this just the way it is and we'll have to continue to use the workaround?
Roger
Is this something that is going to be resolved in future releases or is this just the way it is and we'll have to continue to use the workaround?
Roger
0
Hello Roger,
This is more of a limitation of the Ajax Framework's PageRequestManager, rather than an issue with the RadFormDecorator. There for certain are scenarios where this feature is working just fine and others where this does not work as expected. The cause of the issue in your case is the way the event handlers are executed. This provided solution should be always kept in mind as a way to evade the unexpected behavior.
Hope this explanation is informative and instructive enough.
Regards,
Niko
the Telerik team
This is more of a limitation of the Ajax Framework's PageRequestManager, rather than an issue with the RadFormDecorator. There for certain are scenarios where this feature is working just fine and others where this does not work as expected. The cause of the issue in your case is the way the event handlers are executed. This provided solution should be always kept in mind as a way to evade the unexpected behavior.
Hope this explanation is informative and instructive enough.
Regards,
Niko
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.