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

Height of grid inconsistent and is cut off short

6 Answers 439 Views

Grid

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

Gotcha asked on 11 Jan 2012, 03:12 AM

display-radgrid-before.jpg

display-radgrid-after.jpg

html-radgrid-before.jpg

html-radgrid-after.jpg

Hi,

I have this weird behaviour on one of my radgrid where the height is cut off. So the area where the rows are displayed are shorter ( I think its the rgDataDiv) .I have to say the page i have it it is quiet complex and involves a lot of dynamic controls... not sure if this is the cause...but this behaviour is only seen after a sequence of clicks ( i can always reproduce it ).

Landing on the page originally does not show the bug, but after a series of clicks ( a consistent pattern ) it happens... I'm gonna try to post my grid source and the behaviour and the generated HTML first to see... hopefully its just a stupid setting i forgot to set which you can point out...

Otherwise, If required, I'll post the full page...
Here's the Grid... Notice I've forced it to have a height of 493px.

<div style="margin-left: 12px; margin-top: 40px; clear: both;">

<%--Grid Selected Shopping List--%>

<telerik:RadGrid ID="grdSelectedList" runat="server" AutoGenerateColumns="False"

CellSpacing="0" GridLines="None" ShowHeader="False" OnNeedDataSource="grdSelectedList_NeedDataSource"

OnItemCommand="grdSelectedList_ItemCommand" OnItemCreated="grdSelectedList_ItemCreated"

OnItemDataBound="grdSelectedList_ItemDataBound" Height="493px" Width="595px"

Skin="gmBlueGrid" EnableEmbeddedSkins="False" Style="outline: none;" EnableViewState="false">

<GroupingSettings ShowUnGroupButton="True" />

<ClientSettings>

<Selecting AllowRowSelect="True" />

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

<ClientEvents OnRowClick="grdSelectedList_RowClick" />

</ClientSettings>

<MasterTableView DataKeyNames="Account_ID, Item_ID, List_ID, Product_ID"

ClientDataKeyNames="Account_ID, Item_ID, List_ID, Product_ID">

<GroupByExpressions>

<telerik:GridGroupByExpression>

<SelectFields>

<telerik:GridGroupByField FieldName="Category_Name" />

</SelectFields>

<GroupByFields>

<telerik:GridGroupByField FieldName="Category_Name" />

</GroupByFields>

</telerik:GridGroupByExpression>

</GroupByExpressions>

<NoRecordsTemplate>

This list is empty.<br />

Click in "Add an Item" or "Browse Aisles" to add items to this list.

</NoRecordsTemplate>

<CommandItemSettings ExportToPdfText="Export to PDF" />

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn FilterControlAltText="Filter CategoryCol column" UniqueName="CategoryCol"

DataField="Category_Name" Groupable="true" Visible="False">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter DescriptionCol column" UniqueName="DescriptionCol"

HeaderStyle-Width="455px">

<ItemTemplate>

<div style="width: 455px; clear: both; font-weight: bold; margin-left: -5px;">

<asp:Label ID="lblItemDescription" runat="server" CssClass="blackHyperlink"></asp:Label>

</div>

<div class="slGridDescription" style="margin-left: -5px;">

<%# DataBinder.Eval(Container.DataItem, "Detail_Line_Display") %></div>

</ItemTemplate>

<HeaderStyle Width="455px"></HeaderStyle>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn FilterControlAltText="Filter QtyCol column" UniqueName="QtyCol"

DataField="Size_Description" HeaderStyle-Width="70px" ItemStyle-Font-Bold="true"

ItemStyle-HorizontalAlign="Right">

<HeaderStyle Width="70px"></HeaderStyle>

<ItemStyle HorizontalAlign="Right" Font-Bold="True"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn>

<ItemTemplate>

<telerik:RadButton ID="btnDeleteItem" runat="server" CommandName="DeleteItemFromShoppingList"

OnClientClicking="ConfirmDelete" Width="18" Height="20">

<Image ImageUrl="..\Images\icoDeleteRedX.gif" />

</telerik:RadButton>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False">

<WebServiceSettings>

<ODataSettings InitialContainerName="">

</ODataSettings>

</WebServiceSettings>

</FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">

<WebServiceSettings>

<ODataSettings InitialContainerName="">

</ODataSettings>

</WebServiceSettings>

</HeaderContextMenu>

</telerik:RadGrid>

<br />

</div>

Attached are 4 images:
Generated HTML output of the Grid before; Note the height in the outer div of height 493px and the inner rgDataDiv ( I'm assuming it is inherited from the RadGrid declaration )
Generated HTML output of the Grid after; the height of outer div is still 493, but the rgDataDiv is now set to 300 px? Not sure where this comes from .
Display Before and After

Additional Information regarding the set up , in case it is related to the way this grid is set up:
I have modified the gridCSS so that it displays according to a spec i received... The Rows are always grouped by the category ...

Regarding the Page / UC set up, I have a Page 1 which uses a Master Template. In the Page, it has 3 states ( 3 custom NON-Telerik TABS ). By default it calls this dynamic UC (call it TAB 1) which has the RadGrid. When I Click on TAB 3, it calls another Dynamic UC replacing the content of the placeholder completely. Now I leave this page to Page 2, then come back to Page 1. This time, because I have a Session variable to save the state of the last Visited TAB in page 1, It loads Page 1 with TAB 3. When I click on TAB 1, to display the RadGrid , this is where this behaviour is obtained.

6 Answers, 1 is accepted

answered on 11 Jan 2012, 04:34 AM

I tried setting the DIV outside the RadGrid to 493px and the Radgrid with Height 100% as a test

and it is only showing 10px high!!!

<div style="margin-left: 12px; margin-top: 40px; height: 493px; clear: both; display:block;">

<telerik:RadGrid ID="grdSelectedList" runat="server" AutoGenerateColumns="False"

CellSpacing="0" GridLines="None" ShowHeader="False" OnNeedDataSource="grdSelectedList_NeedDataSource"

OnItemCommand="grdSelectedList_ItemCommand" OnItemCreated="grdSelectedList_ItemCreated"

OnItemDataBound="grdSelectedList_ItemDataBound" Height="100%" Width="595px"

Skin="gmBlueGrid" EnableEmbeddedSkins="False" Style="outline: none;" EnableViewState="false">

<GroupingSettings ShowUnGroupButton="True" />

The rest is the same as the previous post....

What Am I missing?

I'll keep on digging... hopefully i can find an answer

answered on 11 Jan 2012, 08:56 AM

Hello,

If the RadGrid is 100% high and is ajaxified, then its generated update panel should have a 100% height as well. Please examine the code snippet bellow and let me know if it helps to address the discrepancy you encountered:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="grdSelectedList">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="grdSelectedList" UpdatePanelHeight="100%" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div style="margin-left: 12px; margin-top: 40px; height: 493px; clear: both; display: block;">

<telerik:RadGrid ID="grdSelectedList" runat="server" AutoGenerateColumns="False"

CellSpacing="0" GridLines="None" ShowHeader="False" OnNeedDataSource="grdSelectedList_NeedDataSource"

OnItemCommand="grdSelectedList_ItemCommand" OnItemCreated="grdSelectedList_ItemCreated"

OnItemDataBound="grdSelectedList_ItemDataBound" Height="100%" Width="595px" Skin="gmBlueGrid"

EnableEmbeddedSkins="False" Style="outline: none;" EnableViewState="false">

...........................

Regards,
Pavlina
the Telerik team

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 their blog feed now

answered on 13 Jan 2012, 09:57 AM

Specifiying the UpdatePanelHeight to 100% or even to 493px as the Grid didnt help... the rendered code still made it 300px ... This is bugging me on where it gets this value...Anyhow, I reverted it back to tthe ScrollHeight which definitely works.

May be you can shed some light on the difference... i can only find the definition of the Scrollheight and it fits the description of the height of the div I'd like to increase ( the rows griddata)... but updatepanel height... i'm not too sure to which div this refers too

Also another thing , I initially had the scroll height to 100% but it still was set to 300px... so this tells me that 300px is somehow an explicit value for the whole height... although my rad grid's is 493px but it seems the inner div 100% is only maxed at 300px ( which i have no idea where it got this from )... May be this can give you a clue of why your suggestion does not apply to my scenario..

One thing for sure, applying it explicity to ScrollHeight at 493px works but on UpdatePanelHeight at 100% or 493px didnt.
Thanks for your input.

answered on 13 Jan 2012, 10:59 AM

Hello,

Please keep in mind that RadGrid's default value for its Height and ScrollHeight properties is 300px, therefore the rendered code height is 300px. By the way, using ScrollHeight="100%" does not make much sense, because ScrollHeight should be set in pixels. For more information about Height vs ScrollHeight you can refer to the help article below:
http://www.telerik.com/help/aspnet-ajax/grid-height-vs-scrollheight.html

Regards,
Pavlina
the Telerik team