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

Auto-sized columns adding space when scrolling horizontal bar

1 Answer 68 Views

Grid

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

Josh asked on 07 Jan 2016, 11:23 PM

I have a telerik:RadGrid that is configured to automatically adjust the column width based on its data. It does so, but an oddity still persists. When I scroll horizontally to the right, the end columns adjust to fill the entire width of the RadGrid, even though its contents were displayed fully already. Scrolling to the right inflates a 300px-wide column width to three or four times its width.

I'm not sure where to go from there. Aside from that issue, everything else is behaving as I intended.

My code:

<telerik:RadCodeBlock runat="server">

<script type="text/javascript">

function reqStart_aegv(sender, args) {

if (args.get_eventTarget().indexOf("gridToolBar") > 0 && args.get_eventArgument() === "1")

sender.set_enableAJAX(true);

}

function disableAjaxIfExport_aegv(sender, args) {

if (args.get_item().get_commandName() === "Export")

sender.get_parent().get_parent().set_enableAJAX(false);

}

function pageLoad() {

var grid = $find("<%= EntityRecordListGrid.ClientID %>");

var columns = grid.get_masterTableView().get_columns();

for (var i = 0; i < columns.length; i++) {

columns[i].resizeToFit(false, false);

if (columns[i]._element.UniqueName != "btnEdit" && columns[i]._element.UniqueName != "btnDelete") {

if (columns[i]._element.clientWidth < 125) {

grid.get_masterTableView().resizeColumn(i, 125);

} else if (columns[i]._element.clientWidth > 300) {

grid.get_masterTableView().resizeColumn(i, 300);

}

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxPanel ID="radAjaxPanel" runat="server" LoadingPanelID="radAjaxLoadingPanel" ClientEvents-OnRequestStart="reqStart_aegv">

<asp:Panel runat="server" ID="panelGrid">

<telerik:RadGrid runat="server" ID="EntityRecordListGrid" GroupingSettings-CaseSensitive="False" AllowPaging="True" AllowSorting="True"

AllowFilteringByColumn="True" ClientSettings-Selecting-AllowRowSelect="True" FilterType="Classic" HeaderStyle-Wrap="False" PageSize="50">

<AlternatingItemStyle BackColor="#CDCDCD"/>

<ClientSettings>

<Resizing AllowColumnResize="True" ResizeGridOnColumnResize="True" AllowResizeToFit="True" EnableRealTimeResize="True"/>

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

</ClientSettings>

<MasterTableView CommandItemDisplay="Top" AutoGenerateColumns="False" AllowFilteringByColumn="True">

<NoRecordsTemplate>

<asp:Literal runat="server" Text="<%$Resources:TPC_PageWidgetFrontEnd_Resources,PageWidgetFrontEnd.NoRecords.Title %>"></asp:Literal>

</NoRecordsTemplate>

<CommandItemTemplate>

<telerik:RadToolBar runat="server" ID="gridToolBar" autopostback="True" causesvalidation="False" OnClientButtonClicked="disableAjaxIfExport_aegv">

<Items>

<telerik:RadToolBarButton

Text="<%$Resources:TPC_PageWidgetFrontEnd_Resources,PageWidgetFrontEnd.AddNew.Title %>" CommandName="AddRecord" ImagePosition="Right"  />

<telerik:RadToolBarButton

Text="<%$Resources:TPC_PageWidgetFrontEnd_Resources,PageWidgetFrontEnd.Export.Title %>" CommandName="Export" ImagePosition="Right"/>

</Items>

</telerik:RadToolBar>

</CommandItemTemplate>

<Columns>

<telerik:GridButtonColumn UniqueName="btnEdit" ButtonType="ImageButton" CommandName="Edit" />

<telerik:GridButtonColumn UniqueName="btnDelete"

ConfirmText="<%$Resources:TPC_PageWidgetFrontEnd_Resources,PageWidgetFrontEnd.DeleteThisRecord.Title %>" ConfirmDialogType="RadWindow" ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" ConfirmDialogHeight="100px" ConfirmDialogWidth="220px" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

</asp:Panel>

</telerik:RadAjaxPanel>

Auto-sized columns adding space when scrolling horizontal bar

1 Answer, 1 is accepted