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
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.vbPublic 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 SubEnd Class0
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
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.