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

Disappearing vertical scrollbar

3 Answers 187 Views

Grid

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

Kevin asked on 16 Sep 2015, 11:21 AM

first_loaded.png

rows_expanded.png

after_a_postback.png

When the grid loads, the rows in the MasterTableView aren't expanded, so no scrollbar appears. When the user expands the rows, the vertical scrollbar appears as expected. But, after a postback, the rows are still expanded and the scrollbar is gone. I've tried setting a scrollheight. I've tried having one column without a set width.

Here is my grid:

<telerik:RadGrid ID="rgUnits"

runat="server"

AllowSorting="True"

AutoGenerateColumns="False"

AllowAutomaticUpdates="True"

AllowMultiRowSelection="True"

Height="380px"

Width="100%"

OnPreRender="rgUnits_OnPreRender"

OnItemCreated="rgUnits_ItemCreated"

OnNeedDataSource="rgUnits_NeedDataSource"

OnDetailTableDataBind="rgUnits_DetailTableDataBind">

<MasterTableView ShowHeadersWhenNoRecords="false"

EnableNoRecordsTemplate="true"

DataKeyNames="UnitId"

ClientDataKeyNames="UnitId"

AutoGenerateColumns="false"

TableLayout="Fixed"

ItemStyle-VerticalAlign="Top"

AlternatingItemStyle-VerticalAlign="Top"

HeaderStyle-HorizontalAlign="Center"

AlternatingItemStyle-HorizontalAlign="Center"

HierarchyDefaultExpanded="False"

HierarchyLoadMode="Client">

<NoRecordsTemplate>

<div class="text-warning text-center">

<p class="bg-warning padme10 ">There are no acreage lines associated with the selected item.</p>

</div>

</NoRecordsTemplate>

<DetailTables>

<telerik:GridTableView ShowHeadersWhenNoRecords="True"

EnableNoRecordsTemplate="True"

DataKeyNames="ReportingId"

ClientDataKeyNames="ReportingId"

AutoGenerateColumns="false"

ItemStyle-VerticalAlign="Top"

AlternatingItemStyle-VerticalAlign="Top"

HeaderStyle-HorizontalAlign="Center"

HierarchyLoadMode="ServerBind"

Width="100%"

CommandItemDisplay="bottom">

<CommandItemTemplate>

<div class="padme5">

<asp:Button ID="btnAssignRemove" OnClick="btnAssignRemove_OnClick" CssClass="btn btn-default btn-link btn-sm" Text="Assign/Remove" runat="server"></asp:Button>

<asp:Button ID="btnFeatureDefaultPlantDate" OnClick="btnFeatureDefaultPlantDate_OnClick" CssClass="pull-right btn btn-default btn-link btn-sm" Text="Default Plant Date" runat="server"></asp:Button>

<asp:Button ID="btnFeaturePlantedAcres" OnClick="btnFeaturePlantedAcres_OnClick" CssClass="pull-right btn btn-default btn-link btn-sm margrt5" Text="Plant 100% of Acres" runat="server"></asp:Button>

</div>

</CommandItemTemplate>

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="UnitId"

MasterKeyField="UnitId"/>

</ParentTableRelation>

<Columns>

<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" ItemStyle-HorizontalAlign="Center"/>

<telerik:GridCalculatedColumn HeaderText="Farm/Tract/Field"

UniqueName="FarmTractField"

DataFields="FarmNum,TractNum,FieldNum"

ItemStyle-HorizontalAlign="Center"

Expression='{0} + "/" + {1} + "/" + {2}'/>

<telerik:GridBoundColumn DataField="DisplayAcres"

DataFormatString="{0:F2}"

HeaderText="CLU Acres"

UniqueName="DisplayAcres"

ItemStyle-HorizontalAlign="Right"/>

<telerik:GridTemplateColumn UniqueName="PlantedAcres"

HeaderText="Planted Acres"

ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<telerik:RadNumericTextBox ID="txtPlantedAcres"

UniqueName="txtPlantedAcres"

CssClass="form-control inline-form input-xs"

DbValue='<%#Bind("PlantedAcres") %>'

OnTextChanged="txtPlantedAcres_OnTextChanged"

AutoPostBack="True"

Type="number"

Width="67px"

runat="server" MinValue="0" MaxValue='<%# Convert.ToDouble(Eval("DisplayAcres")) %>'>

</telerik:RadNumericTextBox>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="PlantDate"

DataField="PlantDate"

HeaderText="Plant Date"

ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<telerik:RadDatePicker ID="rdpFeaturePlantDate" runat="server"

DbSelectedDate='<%#Bind("PlantDate") %>'

OnSelectedDateChanged="rdpFeaturePlantDate_OnSelectedDateChanged"

AutoPostBack="True"

Calendar-ShowRowHeaders="False"

CssClass="inline-form input-date"/>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="Fid"

UniqueName="Fid"

Display="False"/>

</Columns>

</telerik:GridTableView>

</DetailTables>

<Columns>

<telerik:GridBoundColumn DataField="FormattedUnitNumber"

HeaderText="Unit Number"

UniqueName="FormattedUnitNumber"

ItemStyle-Width="120px"

HeaderStyle-Width="120px"

ItemStyle-HorizontalAlign="Left"/>

<telerik:GridBoundColumn DataField="CropName"

HeaderText="Crop"

UniqueName="Crop"

ItemStyle-Width="63px"

HeaderStyle-Width="63px"

ItemStyle-HorizontalAlign="Center"/>

<telerik:GridBoundColumn DataField="CommodityTypeName"

HeaderText="Type"

UniqueName="Type"

ItemStyle-Width="132px"

HeaderStyle-Width="132px"

ItemStyle-HorizontalAlign="Center"/>

<telerik:GridBoundColumn DataField="PracticeName"

HeaderText="Practice"

UniqueName="Practice"

ItemStyle-Width="69px"

HeaderStyle-Width="69px"

ItemStyle-HorizontalAlign="Center"/>

<telerik:GridTemplateColumn UniqueName="Shareholders"

HeaderText="Share- Holders"

HeaderStyle-Width="60px"

ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<telerik:RadScriptBlock ID="rsbScript" runat="server">

<script type="text/javascript">

$(document).ready(function () {

$(function () {

$('[data-toggle="popover"]').popover()

})

});

</script>

</telerik:RadScriptBlock>

<a href="javascript:void(0);" data-toggle="popover" data-placement="left" data-trigger="hover" title="Shareholders"

data-html="true" data-content='<%# Eval("OtherShareholder") %>'>View</a>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="SharePercent"

HeaderText="Share %"

HeaderStyle-Width="71px"

ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<div class="form-inline">

<telerik:RadNumericTextBox ID="txtSharePercent"

DbValue='<%#Bind("SharePercent") %>'

OnTextChanged="txtSharePercent_OnTextChanged"

AutoPostBack="True"

CssClass="form-control inline-form"

Type="number"

width="60px"

runat="server" MaxValue="100" MinValue="1">

</telerik:RadNumericTextBox>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="PPLP"

HeaderText="PP/LP"

HeaderStyle-Width="78px"

ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<asp:DropDownList runat="server" ID="ddlAcreageType"

CssClass="form-control inline-form input-xs"

SelectedValue='<%# Bind("AcreageType") %>'

OnSelectedIndexChanged="ddlAcreageType_OnSelectedIndexChanged"

AutoPostBack="True">

<asp:ListItem Value="None" Text="None"></asp:ListItem>

<asp:ListItem Value="PreventedPlanting" Text="PP"></asp:ListItem>

<asp:ListItem Value="LatePlanting" Text="LP"></asp:ListItem>

</asp:DropDownList>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="PlantedAcres"

HeaderText="Planted Acres"

HeaderStyle-Width="90px"

ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<div class="form-inline">

<telerik:RadNumericTextBox ID="txtPlantedAcres" ReadOnly="True" CssClass="form-control inline-form input-xs" Type="number" Width="67px" runat="server">

</telerik:RadNumericTextBox>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="PlantDate"

HeaderText="Plant Date"

DataField="PlantDate"

HeaderStyle-Width="114px"

ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<telerik:RadDatePicker ID="rdpUnitPlantDate"

DbSelectedDate='<%#Bind("PlantDate") %>'

OnSelectedDateChanged="rdpUnitPlantDate_OnSelectedDateChanged"

AutoPostBack="True"

runat="server"

Calendar-ShowRowHeaders="False"

CssClass="inline-form input-date"/>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Actions"

HeaderText="Actions"

HeaderStyle-Width="55px"

ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<div class="dropdown">

<a href="#" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

<i class="fa fa-cog fa-lg"></i>

</a>

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">

<li>

<asp:LinkButton ID="lnkDeleteCopy" runat="server" OnClientClick='<%# "lnkDeleteCopy_ClientClicked("+ Eval("UnitId") + ");" %>'>Delete Copy</asp:LinkButton>

</li>

<li>

<asp:LinkButton ID="lnkCopyUnit" runat="server" OnClientClick='<%# "lnkCopyUnit_ClientClicked("+ Eval("UnitId") + "); return false;" %>'>Copy Unit</asp:LinkButton>

</li>

<li>

<asp:LinkButton ID="lnkPlantedAcres100" runat="server" OnClick="lnkPlantedAcres100_OnClick">Planted Acres 100%</asp:LinkButton>

</li>

<li>

<asp:LinkButton ID="lnkDefaultPlantDate" runat="server" OnClick="lnkDefaultPlantDate_OnClick">Default Plant Date</asp:LinkButton>

</li>

</ul>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="IsCopy"

UniqueName="IsCopy"

Display="False"/>

</Columns>

</MasterTableView>

<ClientSettings EnableRowHoverStyle="true"

ClientEvents-OnRowSelected="rgUnits_OnRowSelected"

AllowExpandCollapse="True">

<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" ScrollHeight="350px"></Scrolling>

<Selecting AllowRowSelect="True"></Selecting>

</ClientSettings>

</telerik:RadGrid>

3 Answers, 1 is accepted

answered on 22 Sep 2015, 06:38 AM

Hello Kevin,

From the provided screenshots it seems that there is some issue with the columns alignment, which could indicate that there is a JavaScript error thrown on the page. Can you please inspect your browser's console and see if there is such an error, because it could be causing the issue that you are facing, although that after testing your RadGrid with dummy data, I was not able to observe such a problem in any browser.

If the problem on your side persists, please open a regular support ticket and attach a sample, runnable proejct (preferably with dummy data) that replicates the same issue, so we can test it locally.

Regards,
Konstantin Dikov
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 28 Sep 2015, 11:27 AM

Hi Kevin,

It would be beneficial for your to ask the person responsible for the subscription in your company to contact our Sales team, so the could associate your account with the subscription.

As for the issue in question, can you please elaborate if you have inspected your browser console for any JavaScript errors? Additionally, what is the current version of the controls that you are testing with?

Regards,
Konstantin Dikov
Telerik

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Disappearing vertical scrollbar

3 Answers, 1 is accepted