RadGrid Bug using Ajax Manager

[Oksana]

This is werid. The page below works like a charm. Shows the data in a grid without any problem.
Then I decided to Ajaxify the grid by updating only the grid when RadPanelBar2 item is clicked.
The Grid shrinks when doing thus hiding all the rows in the grid.
To try the working page - just copy the code below.
To try the weird problem - just uncomment the code I specified below inside AjaxSetting.

Thanks


<%-- MASTER PAGE --%>




<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" BorderSize=0 

             BorderStyle=None PanesBorderSize=0 Height="100%" Orientation=Horizontal VisibleDuringInit=false>

<telerik:RadPane Runat="server" ID="contentPane" Scrolling="None">

                <telerik:RadSplitter runat="server" ID="RadSplitter2" BorderStyle="None" PanesBorderSize="0">

                    <telerik:RadPane runat="Server" ID="leftPane" Width="240px" MinWidth="240" MaxWidth="600" Scrolling="None">

                        <telerik:RadSplitter runat="server" ID="RadSplitter3" BorderStyle="None" PanesBorderSize="0"

                            Height="100%" Orientation="Horizontal">

                            <telerik:RadPane runat="server" ID="topLeftPane" Height="100%">

                                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

                                </asp:ContentPlaceHolder>

                            </telerik:RadPane>

                             

                        </telerik:RadSplitter>

                    </telerik:RadPane>

                    <telerik:RadSplitBar runat="server" ID="RadSplitBar1" CollapseMode="Forward" />

                    <telerik:RadPane runat="Server" ID="rightPane" CssClass="right-pane" Scrolling="None">

                        <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">

                        </asp:ContentPlaceHolder>

                    </telerik:RadPane>

                </telerik:RadSplitter>

   

</telerik:RadPane> 
</telerik:RadSplitter>


 <%-- ASPX PAGE --%>

  <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
     <telerik:RadPanelBar ID="RadPanelBar2" Runat="server" ExpandMode="FullExpandedItem" Width="240px" Height="100%">
            <Items>

                 <telerik:RadPanelItem Text="Documents" Expanded="True">
                    <Items>
                            <telerik:RadPanelItem runat="server"  Text="All Documents" Value=""  />
                            <telerik:RadPanelItem runat="server"   Text="My Documents" Value=""/>

                    </Items>
                </telerik:RadPanelItem>


            </Items>
        </telerik:RadPanelBar>

</asp:Content>

        <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">

       <telerik:RadSplitter runat="server" ID="RadSplitter1" Width="100%" BorderSize="0"
        BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal">

        <telerik:RadPane runat="server" ID="MainPane"  >

            <telerik:RadGrid ID="RadGrid1" runat="server"  DataSourceID="DocumentsDataSource1"
                AllowPaging="True" AllowSorting="True"
                AllowCustomPaging="true" ShowStatusBar="true"
                AllowFilteringByColumn="false" CellSpacing="0"
                AllowMultiRowSelection="true" AutoGenerateColumns="true" PageSize="10" height="100%"  >
                <PagerStyle Mode="NextPrev"  />

                <MasterTableView   DataKeyNames="documentid" EnableHeaderContextMenu="true" >
                    <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"
                        Visible="True">
                    </RowIndicatorColumn>

                    <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"
                        Visible="True">
                    </ExpandCollapseColumn>
                    <EditFormSettings>
                        <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                        </EditColumn>
                    </EditFormSettings>
                    <Columns>

                    </Columns>
                </MasterTableView>
                <ClientSettings EnableRowHoverStyle = "true" Selecting-AllowRowSelect="true" EnablePostBackOnRowClick="true"
                                AllowColumnsReorder="true" ReorderColumnsOnClient="true">
                    <ClientEvents OnRowContextMenu="" OnRowDblClick="" OnHeaderMenuShowing="" />
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                </ClientSettings>
                <PagerStyle Position="Bottom"   />
                <FilterMenu EnableImageSprites="False">
                </FilterMenu>

            </telerik:RadGrid>
            <asp:ObjectDataSource ID="DocumentsDataSource1" runat="server"
            SelectMethod="GetDocuments" TypeName="e_Digio._Default" >


            </asp:ObjectDataSource>
        </telerik:RadPane>
        </telerik:RadSplitter>



    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadPanelBar2">
                <UpdatedControls>
                <%--UNCOMMENT THE NEXT LINE--%>
                  <%-- <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" /> --%>

                </UpdatedControls>
            </telerik:AjaxSetting>

        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
    </telerik:RadAjaxLoadingPanel>
        </asp:Content>

[Oksana]

Anyone?

[Oksana]

Also, if you remove/comment the line inside ClientSettings 
<Scrolling AllowScroll="true" UseStaticHeaders="true" /> even with the Ajax line. 
IT WILL WORK.

So something to do with this line and Ajaxifying the grid messing it up when both are in together.

[Eyup]

Hello Oksana,

Please note that in a complex scenario like WebUserControls or Master/ContentPages, we strongly recommend you to place RadAjaxManager instance on the main/master page and add a proxy control to the user control/content page as described in the following help topic:
RadAjax and MasterPage

Please make the suggested modification and let me know about the result.

All the best,
Eyup
the Telerik team

[Oksana]

I tried merging them to one page - without a Master page. 
Same problem encountered. So, it has nothing to do with the Master Page.

I have found a workaround though that worked for this particular scenario.

I removed this line and it worked.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I can't remember if this line is needed somewhere else.

If you can enlighten me what's with this line that's messing it up.

Thanks!

[Oksana]

The solution works in Chrome but not in IE. Haven't tried this from other browsers though.

[Eyup]

Hello Oksana,

We strongly recommend the use of DOCTYPE declaration since its absence can lead to unwanted issues. Since it is a general instruction, you could find detailed information about it on various sources on the internet.

I have created a sample web site using the provided code in your first post. On my side everything works as expected. Could you please check out the attached application and try to distinguish the crucial differences between our projects?

All the best,
Eyup
the Telerik team

[Oksana]

I can't run your test application for some reason but anyway. I simplified my page. You can copy this page and just replace with your data source.  I need the AutoGenerateColumns, AllowCustomPaging to true. The VirtualItemCount too has to be set so I just manually set that property to 100000. Just copy this page and run it against your data with lots in it.
 I understand about the DOCTYPE but the only solution to make this page works I can figure is remove that line. Weird! 
Anyway, here's the page. Let me know.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="e_Digio._Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Test Page</title>
    <link href="Styles/styles.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1"  runat="server" />
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" />

     <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadPanelBar2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>

        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel2">
    </telerik:RadAjaxLoadingPanel>

    <telerik:RadSplitter ID="RadSplitter2" runat="server" Width="100%" BorderSize=0
             BorderStyle=None PanesBorderSize=0 Height="100%" Orientation=Horizontal VisibleDuringInit=false>

        <telerik:RadPane Runat="server" ID="contentPane" Scrolling="None">
        <telerik:RadSplitter runat="server" ID="RadSplitter3" BorderStyle="None" PanesBorderSize="0">
            <telerik:RadPane runat="Server" ID="leftPane" Width="240px" MinWidth="240" MaxWidth="600" Scrolling="None">
                <telerik:RadSplitter runat="server" ID="RadSplitter4" BorderStyle="None" PanesBorderSize="0"
                            Height="100%" Orientation="Horizontal">
                            <telerik:RadPane runat="server" ID="topLeftPane" Height="100%">
                                <telerik:RadPanelBar ID="RadPanelBar2" Runat="server" ExpandMode="FullExpandedItem" Width="240px" Height="100%">
                                <Items>
                                    <telerik:RadPanelItem Text="Documents" Expanded="True">
                                    <Items>
                                        <telerik:RadPanelItem runat="server" ImageUrl="~/images/docs-18x18.png"  Text="All Documents" Value=""  />
                                        <telerik:RadPanelItem runat="server" ImageUrl="~/images/mydocs-18x18.png"  Text="My Documents" Value=""/>

                                    </Items>
                                    </telerik:RadPanelItem>
                                </Items>
                                </telerik:RadPanelBar>
                            </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        <telerik:RadSplitBar runat="server" ID="RadSplitBar1" CollapseMode="Forward" />
        <telerik:RadPane runat="Server" ID="rightPane" CssClass="right-pane" Scrolling="None">
            <telerik:RadSplitter runat="server" ID="RadSplitter5" Width="100%"  Height="100%" Orientation="Horizontal">
                        <telerik:RadPane runat="server" ID="MainPane" Height="100%" Scrolling="Both">
                            <telerik:RadGrid ID="RadGrid1" runat="server"  DataSourceID="DocumentsDataSource1"
                                AllowPaging="True" AllowSorting="True" VirtualItemCount="100000"
                                AllowCustomPaging="true"
                                AutoGenerateColumns="true" PageSize="10" Height="100%"  >
                                <MasterTableView   >
                                </MasterTableView>
                                <ClientSettings >
                                        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                                </ClientSettings>
                                <PagerStyle Position="Bottom"   />
                                <FilterMenu EnableImageSprites="False">
                                </FilterMenu>
                                </telerik:RadGrid>
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
    </telerik:RadSplitter>
    <asp:ObjectDataSource ID="DocumentsDataSource1" runat="server"
            SelectMethod="GetDocuments" TypeName="e_Digio._Default" >

    </asp:ObjectDataSource>
    </form>

</body>

</html>

[Eyup]

Hi Oksana,

I have followed your instruction and created a web site to test out the provided mark-up. On my side the panel bar successfully updates the grid and the ajaxification works as expected. Please find the attached application to verify that there are no errors interfering.

However, please note that I had to modify the With and Height properties since I was having appearance issues with the initially defined ones. Could you please double check that these settings are configured correctly and are not causing the observed problem?

Kind regards,
Eyup
the Telerik team

[Oksana]

Hi,

I am not worried about the updating of the Grid. In my side, I loaded the data to the Grid on page load without clicking the items just for sample purposes. 

I am more worried about the appearance with the current setting I have. In your website, you changed the setting from percentage (100%) to a specific number according to your Screen size. This won't work for me as I need to fill the whole page regardless of the screen size thus the 100% setting for both the Width and the Height.

As you can see in your website, if you change the Width from 1200px to 100% and Height from 400px to 100%, then you will see the problem I'm facing with the appearance.

Try that first.

Then try removing the DOCTYPE definition and you will see that it fixes the whole page.

[Eyup]

Hi Oksana,

Please note that when you are defining a percentage size, your parent elements' sizes also should be configured appropriately:

<style type="text/css">
    html, body, form
    {
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>

That should to the trick. Please give it a try and let me know about the result.

Kind regards,
Eyup
the Telerik team

[Oksana]

Hi,

I found the problem and solution to the problem from other thread.

The problem is the RadGrid Height not filling the screen even if set to Height=100%
IF
RadAjaxManager is implemented on the same page.

>>> Remove the RadAjaxManager definition and the example I gave above will work fine.

To get around it, the UpdatePanelHeight of the AjaxUpdatedControl (RadGrid) needs to be set to let's say 100% as well to make it work.

So Adding this attribute fixes the issue.

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelHeight="100%" />

Thanks for your help! The solutions you gave definitely lead me to this solution.