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 95 Views

Grid

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

Maxim Tairov asked on 16 Feb 2012, 03:31 PM

with-Ajax.png

without-Ajax.png

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">

<html xmlns="http://www.w3.org/1999/xhtml" >

<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

answered on 17 Feb 2012, 09:28 AM

Without-style.png

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.

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 >>

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

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.