Grid height between ajax postback

[James Shelton Agar]

Hi, i got a problem that during the postback of ajax, the grid height shrink and expend (flicks)
using latest version.

Code as follows

  <telerik:RadAjaxLoadingPanel ID="PnlLoading" runat="server" Height="75px" Width="75px" Transparency="50">
            <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border:0;" />
        </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
         <telerik:AjaxSetting AjaxControlID = "GridListing">
           <UpdatedControls>
             <telerik:AjaxUpdatedControl ControlID ="GridListing" LoadingPanelID="PnlLoading" />
           </UpdatedControls>
         </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadAjaxManager1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
    </AjaxSettings>
    </telerik:RadAjaxManager>

   <table class="style1">
          <tr>
              <td align="left" valign="top">
                  <asp:Label ID="lblSearchNum" runat="server" Text="Search Results (17)"></asp:Label>
              </td>
              <td align="left" valign="top" width="550">
                  <asp:Label ID="Label1" runat="server" Text="Result Map"></asp:Label>
              </td>
          </tr>
          <tr>
              <td align="left" valign="top" width="300">
                  <telerik:RadGrid ID="GridListing" runat="server" AllowPaging="True"
                      AutoGenerateColumns="False" GridLines="None" PageSize="50"
                      Skin="WebBlue" ShowHeader="False" Width="280px" Height="500px">
                      <PagerStyle EnableSEOPaging="True" Mode="Slider" />
<MasterTableView>
<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>

<ExpandCollapseColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
    <Columns>
        <telerik:GridBoundColumn UniqueName="column" DataField="HRef_no"
            HeaderText="Reference">
            <HeaderStyle Width="80px" />
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="Latitude" UniqueName="column2"
            Visible="False">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="Longitude" UniqueName="column3"
            Visible="False">
        </telerik:GridBoundColumn>
    </Columns>
</MasterTableView>
                      <ClientSettings enablepostbackonrowclick="True" enablerowhoverstyle="True">
                          <Selecting AllowRowSelect="True" />
                          <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                      </ClientSettings>
                  </telerik:RadGrid>
              </td>
              <td align="left" valign="top" width="550">
              </td>
          </tr>
      </table>

[Konstantin Petkov]

Hi James Shelton Agar,

You don't need to set the AJAX Manager as AJAX initiator unless you call ajaxRequest explicitly from the client. I guess you can safety remove the following from your AJAX settings:

            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadAjaxManager1" />
                </UpdatedControls>
            </telerik:AjaxSetting>

Let us know if this resolves the problem for you.

Regards,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[James Shelton Agar]

Thanks for your reply!
I have spotted that only when Staticheader=true scrollbar=true
and when no Radstylesheetmanager has defined or in Radstylesheetmanager Visible=true it has following behaviour:

1.When calling an ajaxpostback, the height of grid shrink about during the postback and restore to what it should be when finish.

2. it only occurs during first-postback, any postbacks after it appears fine

at moment i have Radstylesheetmanager visable=false to have a temp solution.
but hopefully this problem can be fixed before we launch our product with telerik component to the market.

Anyway, if you still cannot reproduce the problem, i would submit a support ticket with

[Konstantin Petkov]

Hello James Shelton Agar,

I tested your code, but did not notice any difference with or without the RadStyleSheetManager. Please, find my test page attached along with the database. You just need to add the .DLL. I've tested with the latest Q1 2008 SP2 version labeled 2008.1.619. Do you observe the same behavior as in your own project?

By the way, I noticed you've enabled the static headers, but have set ShowHeaders="false". If you don't need the headers, you can safety disable the static headers option as well.

Kind regards,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[James Shelton Agar]

thank you for your support.
I have tried your code, and it's fine
however, if I use custom binding Arrylist when
NeedDataSource
and do not auto generate column at run time, it hits a problem

[James Shelton Agar]

Hi, here is an live demo as you can see
http://www.myplace.co.nz/newmap/map.aspx?buyrent=R&region=1&listtype=R&district=2&suburb=4031&pricelo=0&pricehi=99999999&propsearch.x=47&propsearch.y=20

there are several problems
1.When you have select a different listing from left hand side, it does "flicks", it's using ajaxmanger to postback
2. it's the ajaxmanger loading panel problem, every first time when you click the marker, the loading panel progressing in the windows's lefthand corner (using ajaxmanger for it) next time it will load where it should be, it's done though ajaxRequest

here is the RADAjax Section

 <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
         <telerik:AjaxSetting AjaxControlID = "GridListing">
           <UpdatedControls>
             <telerik:AjaxUpdatedControl ControlID ="GridListing" />
             <telerik:AjaxUpdatedControl ControlID ="lblSearchNum" LoadingPanelID = "PnlLoading"/>
             <telerik:AjaxUpdatedControl ControlID ="PnlPopup"/>
           </UpdatedControls>
         </telerik:AjaxSetting>
         <telerik:AjaxSetting AjaxControlID = "RadAjaxManager1">
           <UpdatedControls>
             <telerik:AjaxUpdatedControl ControlID ="RadAjaxManager1" />
             <telerik:AjaxUpdatedControl ControlID ="PnlPopup" LoadingPanelID = "PnlLoading" />
           </UpdatedControls>
         </telerik:AjaxSetting>
    </AjaxSettings>
    </telerik:RadAjaxManager>

Otherwise telerik's a great control, can't live without it :)

[Konstantin Petkov]

Hi James,

Nice to hear you enjoy working with the controls. The site looks good, congrats!

I noticed the flicker on your site and played today with my previous example in order to replicate that. I did not get the problem in ASP.NET 2.0 WebSite, but when I load the same page in ASP.NET 3.5 and VS 2008 and I got it! Strangely, I removed almost all the markup including the RadStyleSheetManager, RadAjax, the table surrounding the Grid and some Grid settings, but the flicker still appears. Below is the simple code which replicates the problem on my end:

                  <telerik:RadGrid ID="GridListing" runat="server" AllowPaging="True"
              PageSize="50" AllowSorting="True" Skin="WebBlue" Width="280px" Height="500px"
              OnNeedDataSource="GridListing_NeedDataSource" GridLines="None">
                      <PagerStyle Mode="Slider"/>
                      <ClientSettings>
                          <Scrolling AllowScroll="True" UseStaticHeaders="True"/>
                      </ClientSettings>
                  </telerik:RadGrid>

I contacted the devs about the problem, but we will need to investigate it further in order to come to final conclusion. It seems the Grid height is just recalculated client-side a bit later. However, since the problem occurs in ASP.NET 3.5 only we suspect it as a bug in the framework itself.

As to the loading image problem, I personally get it every time over the Search Results label. I tried it both on IE7 and FF on my machine and get the same result no matter how many times a click on a row. This is the expected behavior, isn't it? Let me know if I'm missing something out.

Sincerely yours,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[James Shelton Agar]

thanks for the reply.
please notify me if there is any progressing in solving this problem.
and ye, we're using VS.net2008 and .net3.5 for to take some advantage of LINQ expression.

anyway, hope to hear from you soon

[Rosen]

Hi James,

After further investigation our suspicions has been confirmed. It seems that this flicker is introduced in the 3.5 version of the ASP.NET AJAX framework as a workaround for Firefox 2.0.0.2 issue. For more information and a possible workaround you can refer to this blog post.

Kind regards,
Rosen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[James Shelton Agar]

Indeed it's a problem caused by MS ajax where they try to reload the script regardless, and telerik re-calc the height.
after applying the script below modified from the blog, and uses the RADCodeBlock, it's function spotless

     <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
      <script type="text/javascript">
       Sys._ScriptLoader.getInstance()._loadScriptsInternal = function() {    if (this._scriptsToLoad && this._scriptsToLoad.length > 0) {        var nextScript = Array.dequeue(this._scriptsToLoad);        var scriptElement = this._createScriptElement(nextScript);         if (scriptElement.text && Sys.Browser.agent === Sys.Browser.Safari) {            scriptElementscriptElement.innerHTML = scriptElement.text;            delete scriptElement.text;        }                     if (typeof(nextScript.src) === "string") {            this._currentTask = new Sys._ScriptLoaderTask(scriptElement, this._scriptLoadedDelegate);            this._currentTask.execute();        }        else {            document.getElementsByTagName('head')[0].appendChild(scriptElement);            Sys._ScriptLoader._clearScript(scriptElement);            this._loadScriptsInternal();        }    }    else {        var callback = this._allScriptsLoadedCallback;        this._stopLoading();        if(callback) {            callback(this);        }    }}
      </script>
    </telerik:RadCodeBlock>

I am applying that on my master page, then all grid should feature as it should be.
thanks for the help!

[Bibhudutta]

Hi Rosen, I followed the solution given in the blog post but it does not work out, I am still facing the problem. I have posted for a help over here http://www.telerik.com/forums/rad-grid-height-shrinks-after-ajax-call

[Bibhudutta]

We solved the issue by applying this, to our pages :

#vMain {    height: 100% !important;}