RadFormDecorator and Grid CheckBox

6 posts, 0 answers
  1. Roger
    Roger avatar
    38 posts
    Member since:
    May 2008

    Posted 29 Jul 2011 Link to this post

    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">
  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 02 Aug 2011 Link to this post

    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
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Roger
    Roger avatar
    38 posts
    Member since:
    May 2008

    Posted 02 Aug 2011 Link to this post

    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.
    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" %>
    <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
  5. Niko
    Admin
    Niko avatar
    387 posts

    Posted 04 Aug 2011 Link to this post

    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.
    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);
        }
    }
    And the getFormDecorator method can be placed in the master page:
    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.
  6. Roger
    Roger avatar
    38 posts
    Member since:
    May 2008

    Posted 04 Aug 2011 Link to this post

    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

  7. Niko
    Admin
    Niko avatar
    387 posts

    Posted 05 Aug 2011 Link to this post

    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
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017