This is a migrated thread and some comments may be shown as answers.

Height isn't correct if Grid set as visible at Ajax request

5 Answers 75 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Maxim Tairov
Top achievements
Rank 1
Maxim Tairov asked on 16 Feb 2012, 03:31 PM
I have found next problem with your components.
I have prepared small test page which showed problem. If grid show after ajax request, I see that height is incorrect.
I have debug your scripts, and see that problem in apply styles to pager and so on. In result when calculate height, script is thinking that height of pager for example 300px instead 100px.
It is possible to resolve by run repaint() function when grid initialized styles complete, but I cannot find any event which could help me.
Please answer how possible to resolve this problem ASAP.
This problem occured at FF everytime, and in IE sometimes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head></head>
<body>
    <form id="form1" runat="server">
    <div>
      <telerik:RadScriptManager runat="server"/>
       
      <asp:Button ID="btn" runat="server" OnClick="click" Text="Show grid"/>
       
      <telerik:RadGrid runat="server" ID="grid"  Visible="False"
            Height="600px"
            AllowPaging="True">
        <ClientSettings>
          <Scrolling AllowScroll="True" UseStaticHeaders="True"/>
        </ClientSettings>
        <MasterTableView >
          <PagerStyle Mode="NextPrevAndNumeric" Position="Bottom" AlwaysVisible="true"/>
        </MasterTableView>
      </telerik:RadGrid>
       
      <telerik:RadAjaxManager runat="server">
        <AjaxSettings>
          <telerik:AjaxSetting AjaxControlID="btn">
            <UpdatedControls>
              <telerik:AjaxUpdatedControl ControlID="btn"  />
              <telerik:AjaxUpdatedControl ControlID="grid"/>
            </UpdatedControls>
          </telerik:AjaxSetting>
        </AjaxSettings>
      </telerik:RadAjaxManager>
    </div>
    </form>
</body>
</html>
public partial class test : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
    grid.NeedDataSource += new Telerik.Web.UI.GridNeedDataSourceEventHandler(grid_NeedDataSource);
  }
 
  void grid_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
  {
    grid.DataSource = new[] { new { a = 1, b = "test" }, new { a = 2, b = "test" }, new { a = 3, b = "test" } };
  }
 
  protected void click(object sender, EventArgs eventArgs)
  {
    grid.Visible = true;
    grid.Rebind();
  }
}

5 Answers, 1 is accepted

Sort by
0
Maxim Tairov
Top achievements
Rank 1
answered on 17 Feb 2012, 09:28 AM
And see in attach screenshot , which I mean that styles not applied. It showed at half of second if used Ajax.
In this time is running repaint and height of pager and so on is incorrect.
0
Tsvetina
Telerik team
answered on 21 Feb 2012, 08:26 AM
Hi Maxim,

The last client event of RadGrid fired when it loads is OnGridCreated. At this point, with an appropriate timeout you can call repaint(). For example:
<ClientEvents OnGridCreated="repaintGrid" />
....................
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function repaintGrid(sender, args) {
            setTimeout(function () {
                sender.repaint();
            }, 50);
        }
    </script>
</telerik:RadCodeBlock>

As for the skins not rendering, try setting EnableAjaxSkinRendering="true" in RadGrid and see if this fixes the problem.

Regards,
Tsvetina
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Philipp
Top achievements
Rank 1
answered on 06 Aug 2013, 09:46 AM
Hi Telerik Team,

i am facing exactly the same behavior as described by Maxim. All of his Pictures match my situation.
But it is not only a height-rendering-problem, the colgroups-width is to small (i assume Maxims cols width is fixed, mine is auto-sized).

At first:
I have a Webapplication (ASP.Net Framework 4), i have installed the latest build of Telerik asp.net controls. I am using radAjaxpanels.
The Parts of the Webapp are loaded via .ascx-controls in an asp-panel. The loading itself is ajaxfied. Everthing works pretty fine so far.
I have no javascript-errors or stuff like this, which could cause the inccorect rendering.
The render-problems appear in all browsers in the same way (i have tested with IE, FF, Chrome - all latest versions)

The incorrect rendering:
Whenever the radGrid's first appearance in a session is created via ajax-request, the rendering-problems as described by Maxim happen.
From now on this behavior wont come back, it appears only once. I can jump through the application and everthing renders correctly.

Whenever the radGrid's first appearance in a session is created via (full) postback, the incorrect behavior will never happen.

I allready set the grids property 'EnableAjaxSkinRendering' to true and i tried the sender.repaint()-method on the client-event 'OnGridCreated'. However this doesn't affect the incorrect rendering.

My thoughts on this are:
With some client-side alerts i can see that whenever the radGrid's first appearance is created via ajax-request,
the sizing of radgrid happens befor the styles are assigned (see the Without-styles.png from Maxim).
So after sizing the styles get assigned and now the size-properties are inccorect.


My Questions:
Is there an appropriate event after the styles for radgrid are assigned?
I would try some stuff at this point to check if my thoughts are leading to the right direction.

Do you have any other suggestions how i could handle this behavior?

Greetings Philipp





0
Angel Petrov
Telerik team
answered on 09 Aug 2013, 08:40 AM
Hi Philipp,

Since the project uses RadAjaxPanels I would recommend that you subscribe to the client OnResponseEnd of the panel and repaint() the grid there.

ASPX:
<telerik:RadAjaxPanel runat="server" ClientEvents-OnResponseEnd="ResponseEnd" ID="RadAjaxPanel1">

JavaScript:
function ResponseEnd(sender, args) {
            //place the repainting logic here.
        }
 
Additionally please try setting the EnableAjaxSkinRendering property programmatically. Note however that it would be best to try and assemble a runnable sample project in which this problem can be replicated. This would facilitate us in providing a more straight to the point answer.

Regards,
Angel Petrov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Philipp
Top achievements
Rank 1
answered on 09 Aug 2013, 09:49 AM
Hi Angel Petrov,

thank you for your time and your suggestion.
I've added the described handling and i am totally surprised because it works perfectly so far!
The ResponseEnd-Event of the ajaxpanel is in the right place to repaint the grid.

Totally happy with your solution. You Guys rock!
Thank you very much.

Greetings to Team Telerik and especially to you Angel.

Best wishes 
Philipp
Tags
Grid
Asked by
Maxim Tairov
Top achievements
Rank 1
Answers by
Maxim Tairov
Top achievements
Rank 1
Tsvetina
Telerik team
Philipp
Top achievements
Rank 1
Angel Petrov
Telerik team
Share this question
or