Grid height between ajax postback

12 posts, 0 answers
  1. James Shelton-Agar
    James Shelton-Agar avatar
    108 posts
    Member since:
    May 2008

    Posted 23 Jun 2008 Link to this post

    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> 
  2. Konstantin Petkov
    Admin
    Konstantin Petkov avatar
    1911 posts

    Posted 24 Jun 2008 Link to this post

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

    Posted 24 Jun 2008 Link to this post

    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
  5. Konstantin Petkov
    Admin
    Konstantin Petkov avatar
    1911 posts

    Posted 25 Jun 2008 Link to this post

    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
  6. James Shelton-Agar
    James Shelton-Agar avatar
    108 posts
    Member since:
    May 2008

    Posted 26 Jun 2008 Link to this post

    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
  7. James Shelton-Agar
    James Shelton-Agar avatar
    108 posts
    Member since:
    May 2008

    Posted 27 Jun 2008 Link to this post

    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 :)
  8. Konstantin Petkov
    Admin
    Konstantin Petkov avatar
    1911 posts

    Posted 27 Jun 2008 Link to this post

    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
  9. James Shelton-Agar
    James Shelton-Agar avatar
    108 posts
    Member since:
    May 2008

    Posted 29 Jun 2008 Link to this post

    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
  10. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 30 Jun 2008 Link to this post

    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
  11. James Shelton-Agar
    James Shelton-Agar avatar
    108 posts
    Member since:
    May 2008

    Posted 01 Jul 2008 Link to this post

    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!
  12. Bibhudutta
    Bibhudutta avatar
    16 posts
    Member since:
    Jan 2012

    Posted 19 Mar 2014 in reply to Rosen Link to this post

    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
  13. Bibhudutta
    Bibhudutta avatar
    16 posts
    Member since:
    Jan 2012

    Posted 21 Mar 2014 Link to this post

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

    #vMain {    height: 100% !important;}
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017