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

Auto-sized columns adding space when scrolling horizontal bar

1 Answer 44 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Josh
Top achievements
Rank 1
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>

1 Answer, 1 is accepted

Sort by
0
Angel Petrov
Telerik team
answered on 12 Jan 2016, 12:18 PM
Hi,

Could you please elaborate on what version of the controls is the project using? If it relies on an older version please upgrade to the latest.

If this is not the case however and the application/web site already uses the latest version please send us a small runnable sample in which the problem can be replicated, as I do not see anything disturbing in the code.

Regards,
Angel Petrov
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
Tags
Grid
Asked by
Josh
Top achievements
Rank 1
Answers by
Angel Petrov
Telerik team
Share this question
or