grouping/scrollbar / header bar icons

[tom]

I'm new... both to Telerik and C# so this might be simple...  I hope :-)

Using radgrid inside radtabs.  I have 4 tabs, 3 of them appear fine, but the one that has a group-by has an un-needed horizontal scrollbar, that causes a header bar icons to appear behind the scrollbar. 

I'm using GridGroupByExpression, and it adds a space to the left with the group-ungroup arrows - that is fine, but then this causes a horizontal scrollbar to always appear on the bottom of the grid, regardless of browser size.  The rightmost export button is always partly obscured, see uploaded jpg.  How do I resize the grid to remove the horizontal scrollbar?   The scrollbar is not needed, there are only 3 columns.  I've tried setting the grid width, columns width, etc. but the scrollbar persists, the grid is always a little wider than the available area, due to the grouping arrows area to the left. 

What setting do I use to resize the grid to fit the scrren, when using GridGroupByExpression?

 

<telerik:RadTabStrip ID="WQTS" MultiPageID="WorkQueueTabPages" runat="server" Skin="Outlook" SelectedIndex="0">
    <Tabs>
        <telerik:RadTab PageViewID="PendingApprovalsTabPage" runat="server" Text="Pending Approvals" Selected="True" Width="90%" />
        <telerik:RadTab PageViewID="PendingSetupsTabPage" runat="server" Text="Pending Setups" />
        <telerik:RadTab PageViewID="ApprovedNewDocsTabPage" runat="server" Text="Approved with New Documents"   />
        <telerik:RadTab PageViewID="NeedInsReviewTabPage" runat="server" Text="Needs Insurance Review" />
    </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage runat="server" ID="WorkQueueTabPages" SelectedIndex="0">

    <!-- Pending Approvals Tab -->
    <telerik:RadPageView ID="PendingApprovalsTabPage" runat="server">
        <telerik:RadGrid Height="450px" AllowAutomaticInserts="false" AllowAutomaticDeletes="false" AllowAutomaticUpdates="false"
        ID="PendingApprovalsGrid" runat="server" AllowSorting="True" Width="90%"
        OnNeedDataSource="PendingApprovalsGrid_NeedDataSource"
        AutoGenerateColumns="False"  OnItemCommand="OpenCompany" OnEditCommand="OpenCompany">
        <ExportSettings HideStructureColumns="True" ExportOnlyData="True" IgnorePaging="True" OpenInNewWindow="True">
        </ExportSettings>
            <FilterMenu EnableImageSprites="False"></FilterMenu>
            <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>
                <ClientSettings AllowKeyboardNavigation = "True">
                    <Scrolling AllowScroll="True"></Scrolling>
                    <ClientEvents OnRowCreated="workQueues_rowCreated" OnRowClick="workQueues_onRowClick" />
                </ClientSettings>
      <mastertableview
      datakeynames="CompanyID"
      ClientDataKeyNames="CompanyId,CompanyName,VendorNumber" CommandItemDisplay="Top" >
          <GroupByExpressions>
              <telerik:GridGroupByExpression>
                  <GroupByFields>
                      <telerik:GridGroupByField FieldName="AccountStatusDesc" FieldAlias="Status"
                          HeaderText="Status" FormatString="" />
                  </GroupByFields>
                  <SelectFields>
                      <telerik:GridGroupByField FieldName="AccountStatusDesc" FieldAlias="Status" FormatString="" HeaderText="Status" />
                  </SelectFields>
              </telerik:GridGroupByExpression>
          </GroupByExpressions>
          <Columns>
                <telerik:GridButtonColumn Text="Select" ButtonType="ImageButton" ImageUrl="~/images/select.bmp"
                    CommandArgument="Select" Resizable="False" UniqueName="PendingApprovalsViewCol" FilterControlAltText="Filter PendingApprovalsViewCol column">
                    <ItemStyle Width="2%" />
                </telerik:GridButtonColumn>
                <telerik:GridBoundColumn DataField="CompanyName" FilterControlAltText="Filter CompanyName column" ItemStyle-Width="40%"
                    HeaderText="Company Name" HeaderTooltip="Sort by Company Name" UniqueName="CompanyName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="AccountStatusDesc" FilterControlAltText="Filter AccountStatusDesc column" ItemStyle-Width="58%"
                    HeaderText="Status" HeaderTooltip="Sort by Status" UniqueName="AccountStatusDesc">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="VendorNumber" FilterControlAltText="Filter VendorNumber column"
                    UniqueName="VendorNumber" Visible="False">
                </telerik:GridBoundColumn>
          </Columns>
          <EditFormSettings>
              <EditColumn FilterControlAltText="Filter EditCommandColumn column">
              </EditColumn>
          </EditFormSettings>
          <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
          </ExpandCollapseColumn>
          <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
          </RowIndicatorColumn>
          <CommandItemSettings ShowExportToPdfButton="True" ShowExportToWordButton="True" ShowExportToExcelButton="True" ShowExportToCsvButton="True" ShowAddNewRecordButton="False" />
      </mastertableview>
            <GroupPanel>
                <PanelItemsStyle BorderStyle="Solid" BorderWidth="1px" GridLines="Both" />
            </GroupPanel>
        </telerik:RadGrid>
    </telerik:RadPageView>

(next 3 tabs ommitted)

 

 

 

 

 

[Pavlina]

Hi Tom,

To restrict the horizontal bar from being rendered you should verify that the total width of the columns is smaller than the width of the grid itself.

Additionally, have in mind that it is not recommended to use ItemStyle-Width to set columns width. Only HeaderStyle-Width should be used.

Regards,
Pavlina
the Telerik team

[tom]

Hi Pavlina - Please see the attached annotated screenprint. 

The total width of the columns IS less than the width of the grid.  It seems to calculate the width of the columns and THEN always add the width of the grouping area, increasing the total width to over 100%, causing it to always scroll. 

I have set the column widths to tiny figures but the horizontal scroll area still appears.  I set the widths of the three columns to 2%, 20%, 25% (totalling 47%) and the grouping area expands to about 58% - this totals 105%, making the scrollbar appear.

I have set the column widths to normal figures but the horizontal scroll area still appears.  I set the widths of the three columns to 2%, 40%, 58% (totalling 100%) and the grouping area expands to about 5% - this totals 105%, making the scrollbar appear.

Setting item-width or header-width also makes no difference; setting grid width makes no difference.  The horizontal scroll bars seem to show up due to the grouping area at the left.  (The other tabs don't do grouping thus the horizontal scroll bar does not show up.)

Any idea how to fix it?
Thanks
Tom

[Pavlina]

Hi Tom,

There is no problem setting the widths of your columns as you wish them to be, the only thing is that you should use the HeaderStyle-Width, instead of ItemStyle-Width property.

However, I followed your scenario and prepared a sample project which is working as expected. Check it out and see if it works for you.

All the best,
Pavlina
the Telerik team