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

[Solved] Radgrid rendering freeze the browser

1 Answer 152 Views

Grid

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

Iason Demiros asked on 19 Apr 2013, 09:18 AM

Hi,
I have a radigrid which i bind client side, it have max rows 100 and for every page i bind only the 100 items. I get the data with PageMethods. Everything worked fine until chrome latest update 26.0.1410.64 m after that when the radgrid gets the data the tab is freezing and the loader gif i have freeze. Also every time i change the page tha same freezing happend. The whole page performance is very slow.

The page in chrome when the radgrid paints the data is very slow and the waiting is for minities. I have tested with devtools and i saw that the freezing happed after the client side gets the data and try to databind. In IE 8 also freeze for a sorter time than chrome, this performance improved in IE10 and my page is a lot faster. In Firefox there is a tiny freeze only for a sec.

I have try to improve performance for the grid and for the page
http://www.telerik.com/products/aspnet-ajax/getting-started/top-performance.aspx
http://www.telerik.com/help/aspnet-ajax/grid-viewstate-reduction-techniques.html

but nothing. And everything happend after the latest update of chrome. In IE of course it always happend but our client does not used much. The telerik version i have is v.2012.2.815.35
and this the code of the rad grid

<telerik:RadGrid ID="dltBroadcast" EnableViewState="false" runat="server" AllowPaging="true"

AllowSorting="True" PageSize="100" AllowMultiRowSelection="True" ClientSettings-EnableRowHoverStyle="True"

Width="956px" CellPadding="0" CellSpacing="0" Skin="RadGridCustomBlack" EnableEmbeddedSkins="False">

<PagerStyle Mode="NextPrevAndNumeric" Position="TopAndBottom" HorizontalAlign="Justify"

AlwaysVisible="True" />

<MasterTableView ClientDataKeyNames="ElementId,SentimentDesc,CrawledDateTime" AllowMultiColumnSorting="true"

TableLayout="Fixed">

<Columns>

<telerik:GridBoundColumn DataField="ElementId" HeaderText="ElementId" ReadOnly="True"

UniqueName="colElementId" Visible="False">

</telerik:GridBoundColumn>

<telerik:GridClientSelectColumn UniqueName="SelectColumn" DataTextField="ElementId"

Resizable="false">

<HeaderStyle Width="30px" />

</telerik:GridClientSelectColumn>

<telerik:GridTemplateColumn ItemStyle-HorizontalAlign="Left" ItemStyle-Width="20px"

HeaderStyle-Width="20px" UniqueName="colSentiment" Visible="True" ItemStyle-BorderStyle="None"

Resizable="false">

<ItemTemplate>

<div>

<a id="linkSentimentPositive" runat="server">

<img id="ImageSentimentPositive" runat="server" width="15" height="14" border="0"

alt="" src="Images/positiveNormal.png" class="dtgridSentimentImages" /></a>

<br />

<a id="linkSentimentNeutral" runat="server">

<img id="ImageSentimentNeutral" runat="server" width="15" height="14" border="0"

alt="" src="Images/neutralNormal.png" class="dtgridSentimentImages" /></a>

<br />

<a id="linkSentimentNegative" target="_self" runat="server">

<img id="ImageSentimentNegative" runat="server" width="15" height="14" border="0"

alt="" src="Images/negativeNormal.png" class="dtgridSentimentImages" /></a>

<br />

<a id="linkSentimentUnassigned" runat="server">

<img id="ImageSentimentUnassigned" runat="server" width="15" height="14" border="0"

alt="" src="Images/unassignedNormal.png" /></a>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridHyperLinkColumn DataTextField="Title" UniqueName="colTitle" HeaderText="Title"

ItemStyle-Font-Underline="true" ItemStyle-Width="200px" HeaderStyle-Width="200px"

ItemStyle-Wrap="true">

<HeaderStyle Font-Bold="True" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"

Font-Underline="False" HorizontalAlign="Center" Wrap="False" />

<ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"

Font-Underline="False" HorizontalAlign="Center" BorderStyle="None" Wrap="True" />

</telerik:GridHyperLinkColumn>

<telerik:GridBoundColumn DataField="Snippet" HeaderText="Snippet" ItemStyle-Width="200px"

HeaderStyle-Width="200px" ReadOnly="false" UniqueName="colSnippet">

<HeaderStyle Font-Bold="True" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"

Font-Underline="False" HorizontalAlign="Center" Wrap="False" />

<ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"

Font-Underline="False" HorizontalAlign="Left" BorderStyle="None" Wrap="True" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Tags" HeaderText="Keywords" ReadOnly="True" UniqueName="colkeywords"

ItemStyle-Width="70px">

<HeaderStyle Font-Bold="True" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"

Font-Underline="False" HorizontalAlign="Center" Wrap="False" />

<ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"

Font-Underline="False" HorizontalAlign="Center" BorderStyle="None" Wrap="True" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="HostNameToShow" HeaderText="Source" ReadOnly="True"

UniqueName="colHostName" ItemStyle-Width="80px">

<HeaderStyle Font-Bold="True" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"

Font-Underline="False" HorizontalAlign="Center" Wrap="False" />

<ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"

Font-Underline="False" HorizontalAlign="Center" BorderStyle="None" Wrap="True" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CrawledDateTime" HeaderText="Date" DataType="System.DateTime"

ItemStyle-Width="70px" HeaderStyle-Width="70px" DataFormatString="{0:dd/MM/yyyy HH:mm}"

ReadOnly="True" UniqueName="colCrawledDateTime">

<HeaderStyle Font-Bold="True" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"

Font-Underline="False" HorizontalAlign="Center" Wrap="False" />

<ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"

Font-Underline="False" HorizontalAlign="Center" BorderStyle="None" Wrap="True" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="TagName" HeaderText="User Tags" ReadOnly="True"

UniqueName="colTags">

<HeaderStyle Font-Bold="True" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"

Font-Underline="False" HorizontalAlign="Center" Wrap="False" />

<ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"

Font-Underline="False" HorizontalAlign="Center" BorderStyle="None" Wrap="True" />

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="colButtons" Visible="True" ItemStyle-Width="55px"

HeaderStyle-Width="55px" ItemStyle-BorderStyle="None" Resizable="false">

<ItemTemplate>

<div>

<a id="linkTag" runat="server">

<img id="ImageTag" runat="server" width="13" height="13" border="0" title="Tag" alt="Tag"

src="Images/tag.gif" class="dtgridButtonsLeft" /></a> <a id="linkdelete" runat="server">

<img id="Imgdelete" runat="server" width="13" height="13" border="0" title="Delete"

alt="Delete" src="Images/delete.gif" class="dtgridButtonsRight" /></a><br />

<a id="linkSendEmail" runat="server">

<img id="ImgSendEmail" runat="server" width="13" height="13" border="0" title="Email"

alt="Email" src="Images/email.gif" class="dtgridButtonsLeft" /></a> <a id="LinkHighlited"

runat="server">

<img id="ImgHighlited" runat="server" width="12" height="12" border="0" title="Highlight"

alt="Highlight" src="Images/highlighted.png" class="dtgridButtonsRight" /></a><br />

<a id="linkEnagagedCommunity" runat="server">

<img id="ImgEnagagedCommunity" runat="server" width="13" height="13" border="0" title="Engaged Community"

alt="Engaged Community" src="Images/details.gif" class="dtgridButtonsLeft" /></a>

<a id="LinkUrlAspect" runat="server">

<img id="ImgUrlAspect" runat="server" width="14" height="12" border="0" title="Aspects"

alt="Aspects" src="Images/aspect.png" class="dtgridButtonsRight" /></a>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<ClientEvents OnCommand="dltBroadcast_Command" OnRowDataBound="dltBroadcast_RowDataBound"

OnColumnClick="dltBroadcast_ColumnClick" />

<Selecting AllowRowSelect="true" />

<Resizing AllowColumnResize="true" AllowRowResize="false" ResizeGridOnColumnResize="false"

ClipCellContentOnResize="true" EnableRealTimeResize="true" AllowResizeToFit="true" />

<Scrolling AllowScroll="false" UseStaticHeaders="false"></Scrolling>

</ClientSettings>

</telerik:RadGrid>

and this is my javascript

function updateGridWithBinding(result) {

var tableView = $find("<%= dltBroadcast.ClientID %>").get_masterTableView();

tableView.clearSelectedItems();

tableView.set_dataSource(result);

tableView.dataBind();

}

Can you help me?

Thanks.

1 Answer, 1 is accepted

Accepted