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

RadGrid issue rendering rows when ClientSetting AllowScrolling=true

1 Answer 128 Views

Grid

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

Kris asked on 10 Jun 2011, 06:14 PM

Correctly-loaded.png

Incorrectly-loaded.png

I am using a radgrid where in the ClientSettings, I have AllowScroll="true" and UseStaticHeaders="true". This grid is in a user control sitting on a webform that is loaded into a MasterPage content area. There are other user controls loaded on demand within a series of tabs.

What's happening is that the grid is sizing correctly on the page but the masterpage the first time the user control is accessed. When another user control is subsequently accessed and then the I switch back to the user control with my RadGrid on it the grid's data section has shrunk down to 10px. The result is you can not see all of the rows in the grid. Here is the same markup of the grid element before and after:

<div id="ctl00_TabControl_element_FXProduct_element_view_FXProduct_FXProduct_RadGrid1_GridData" class="rgDataDiv" style="overflow: auto; width: 100%; height: 450px;">
<div id="ctl00_TabControl_element_FXProduct_element_view_FXProduct_FXProduct_RadGrid1_GridData" class="rgDataDiv" style="overflow: auto; width: 100%; height: 10px;">

This issue is only happening when the grid has the AllowScroll="true" client setting set to true. If it is set to false this issue does not occur.

I am attaching some screen shots to demonstrate the issue.

I am using version 2010.1.415.35 of the rad controls. This is occurring on both IE 8 and Firefox 3.6 and 4.0.

Here is the markup of my control

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="FXOrderProducts.ascx.cs" Inherits="FXOrderProducts" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<telerik:RadGrid

ID="RadGrid1"

runat="server"

AllowPaging="True"

pagesize="100"

OnRowDrop="RadGrid1_RowDrop"

OnItemUpdated="RadGrid1_ItemUpdated"

OnUpdateCommand="RadGrid1_UpdateCommand"

OnDeleteCommand="RadGrid1_DeleteCommand"

AllowMultiRowSelection="True"

OnItemDataBound = "RadGrid1_OnItemDataBound"

OnNeedDataSource="RadGrid1_NeedDataSource"

OnItemCreated="RadGrid1_ItemCreated"

OnExcelExportCellFormatting="RadGrid1_ExcelExportCellFormatting"

EnableAJAX = "true"

Skin="Windows7" Height="450px">

<MasterTableView DataKeyNames="Id" Width="100%" TableLayout="Fixed" AutoGenerateColumns="False" >

<NoRecordsTemplate>

<div style="height: 30px; cursor: pointer;">No products to view</div>

</NoRecordsTemplate>

<PagerStyle Mode="NumericPages" PageButtonCount="10" />

<Columns>

<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderStyle-Width="30px" ItemStyle-Width="30px" />

<telerik:GridBoundColumn DataField="GroupName" HeaderText="Group"

SortExpression="GroupName" UniqueName="Group" ReadOnly="True" DataFormatString="<nobr>{0}</nobr>" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ProductName" HeaderText="Product"

SortExpression="ProductName" UniqueName="ProductName" ReadOnly="True" DataFormatString="<nobr>{0}</nobr>" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Product.Vendor" HeaderText="Mfg."

SortExpression="Product.Vendor" UniqueName="Vendor" ReadOnly="True" DataFormatString="<nobr>{0}</nobr>" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Description" HeaderText="Description"

SortExpression="Description" UniqueName="Description" ColumnEditorID="GridDescriptionEditor" EditFormColumnIndex="1" ItemStyle-Width="70px" HeaderStyle-Width="70px" DataFormatString="<nobr>{0}</nobr>" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Family" HeaderText="Family"

SortExpression="Family" UniqueName="Family" ReadOnly="True" DataFormatString="<nobr>{0}</nobr>">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Price" HeaderText="List Price"

SortExpression="Price" UniqueName="Price" ReadOnly="true" DataFormatString="{0:C}" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ProductProgram.Program" HeaderText="Program"

SortExpression="ProductProgram.Program" UniqueName="Program" ReadOnly="True" DataFormatString="<nobr>{0}</nobr>" Display="false">

</telerik:GridBoundColumn

<telerik:GridBoundColumn DataField="CalculatedPrice" HeaderText="Sell Price"

SortExpression="CalculatedPrice" UniqueName="CalculatedPrice" DataFormatString="{0:C}" ColumnEditorID="GridSellPriceEditor" EditFormColumnIndex="0" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Quantity" HeaderText="Qty"

SortExpression="Quantity" UniqueName="Quantity" ReadOnly="False" ColumnEditorID="GridQuantityEditor" EditFormColumnIndex="0" ItemStyle-Width="40px" HeaderStyle-Width="40px" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ExtendedPrice" HeaderText="Ext Price"

SortExpression="ExtendedPrice" UniqueName="ExtendedPrice" ReadOnly="true" DataFormatString="{0:C}" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ProdCost" HeaderText="Cost"

SortExpression="ProdCost" UniqueName="Cost" DataFormatString="{0:C}" ColumnEditorID="GridCostEditor" EditFormColumnIndex="0">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Margin" HeaderText="Margin"

SortExpression="Margin" UniqueName="Margin" ReadOnly="True" DataFormatString="{0:C}" Display="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="MarginPercent" HeaderText="Margin %"

SortExpression="MarginPercent" UniqueName="MarginPct" ReadOnly="True" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Product.Status" HeaderText="Status"

SortExpression="Product.Status" UniqueName="Status" ReadOnly="True" >

</telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn UniqueName="Optional" DataField="Optional" HeaderText="Opt." ItemStyle-Width="40px" HeaderStyle-Width="40px" >

</telerik:GridCheckBoxColumn>

<telerik:GridBoundColumn DataField="Optional" HeaderText="Optional"

SortExpression="Optional" UniqueName="Optional" ReadOnly="True" Visible="false" >

</telerik:GridBoundColumn>

<telerik:GridButtonColumn CommandName="Delete" Text="Delete" UniqueName="Delete" ConfirmText="Are you sure you want to delete this item?"

HeaderStyle-Width="35px" ButtonType="ImageButton" ImageUrl="~/Images/Icons/Power2Order/Delete_16x16.png">

</telerik:GridButtonColumn>

</Columns>

<EditFormSettings UserControlName="SmartParts/SalesOrder/FXEditProduct.ascx" EditFormType="WebUserControl" >

<EditColumn UniqueName="EditCommandColumn1">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<ClientSettings

AllowRowsDragDrop="True"

EnableRowHoverStyle="true">

<Selecting

AllowRowSelect="true"

EnableDragToSelectRows="false" />

<Scrolling

AllowScroll="true"

UseStaticHeaders="true" />

<ClientEvents

OnRowDropping="onRowDropping"

OnRowDblClick="GridRowDblClick"

OnGridCreated="GridCreated" />

<Resizing

EnableRealTimeResize="True"

ResizeGridOnColumnResize="False"

AllowColumnResize="True" />

</ClientSettings>

</telerik:RadGrid>

1 Answer, 1 is accepted

answered on 15 Jun 2011, 01:46 PM

Hello Kris ,

I revise the provided code and it looks correct to me. Could you please elaborate a bit more on you application. How the mentioned UserControls are loaded on the page? Are you using any Ajax settings in the application? It will be very helpful if you could open a regular support ticket and send us sample runnable application which demonstrates the problem. Thus we will be able to debug it locally and advise you further.

Regards,
Maria Ilieva
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.