Grid not working well when width=100% and AutoGenerateColumns=True

[gishac]

Hi, I have the following scenario:
A grid inside a UserControl
The user control in an aspx inside a div with width=100%
In the user control the grid is also inside a div with width=100%
The grid is using AutoGenerateColumns=True, and I'm setting the default size for each column to 170px in the ColumnCreatingEvent
           

column.ItemStyle.Width = Unit.Pixel(170);
column.HeaderStyle.Width = Unit.Pixel(170);

The grid is allowing AllowFilteringByColumn.

The grid headers and columns expands even bigger than the browser window and the scroll appears (this is OK), but the GroupPanel just render to the end of the window (where the scroll begins), and additionally in the last columns of the grid I can't drag & drop to group by these columns. Also when I click the filter button in these columns the dropdown render in another position of the screen, is like in someway the grid is lost in space and time.

Enclosed you can find a screenshot with more visual detail.

I've tried using FixedLayout in the MasterTable.
This is the definition of the grid.

Telerik Q1 2010

<div style="width: 100%;padding-top:15px">
    <telerik:RadGrid ID="gridData" runat="server" AllowPaging="true" AutoGenerateColumns="true"
        GridLines="Both" BorderStyle="None" Skin="Office2007" Width="100%" OnNeedDataSource="gridData_NeedDataSource"
        PageSize="100" ShowGroupPanel="true" OnItemCreated="gridData_ItemCreated" OnItemDataBound="gridData_ItemDataBound"
        OnDataBound="gridData_DataBound" OnPreRender="gridData_PreRender"
        AllowFilteringByColumn="True" EnableViewState="False"
        oncolumncreated="gridData_ColumnCreated"
        oncolumncreating="gridData_ColumnCreating">
        <GroupPanel Text="Arrastre una cabecera de columna hacia ésta barra para agrupar">
        </GroupPanel>
        <MasterTableView GridLines="Both" ShowGroupFooter="true" TableLayout="Auto"
            EnableViewState="False">
            <HeaderStyle Width="100%" />
            <RowIndicatorColumn>
                <HeaderStyle Width="20px"></HeaderStyle>
            </RowIndicatorColumn>
            <ExpandCollapseColumn>
                <HeaderStyle Width="20px"></HeaderStyle>
            </ExpandCollapseColumn>
        </MasterTableView>
        <ClientSettings ReorderColumnsOnClient="True" AllowDragToGroup="True" AllowColumnsReorder="True"
            AllowColumnHide="false">
            <Selecting AllowRowSelect="True"></Selecting>
            <Resizing AllowRowResize="True" AllowColumnResize="True" EnableRealTimeResize="True"
                ResizeGridOnColumnResize="true"></Resizing>
        </ClientSettings>
        <GroupingSettings ShowUnGroupButton="true" GroupContinuedFormatString="... continuación del grupo de la página anterior. "
            GroupContinuesFormatString=" El grupo continúa en la siguiente página." GroupSplitDisplayFormat="Mostrando {0} de {1} items."
            UnGroupButtonTooltip="Click aquí para remover grupo" UnGroupTooltip="Arrastre fuera de la barra para remover grupo"
            CaseSensitive="false" />
    </telerik:RadGrid>
</div>

[Pavlina]

Hello,

Note that it is not recommended to use ItemStyle-Width to set column widths. Only HeaderStyle-Width should be used.

Best wishes,
Pavlina
the Telerik team

[gishac]

Hi Pavlina, thanks for your reply. I'm using ItemStyle-Width because the Filter Header is not rendering well if the width of the column is not more than 170px and also: I have more than 10 columns (in this case, because it can be variable) and the grid is rendering fixed to the width of the screen, and the problem is that I can't resize the grid to overflow the screen.
How can I configure the grid for automatic size in the columns and for use not only the available screen, I mean the grid columns can overflow and don't use itemStyle-width.

Regards,
Gisbert

[Pavlina]

Hello gishac,

As I said in the previous post RadGrid column widths should be set by using HeaderStyle-Width only. 

However, you can set the FilterControlWidth property for each of your columns to reduce the textboxes' widths in the ColumnCreated event:

http://www.telerik.com/help/aspnet-ajax/grdusingcolumns.html

(see "Customizing Columns Programmatically")

All the best,
Pavlina
the Telerik team

[gishac]

Hi Pavlina, I've tried with HeaderStyle-Width and the grid doesn't change the width of the column, that's the reason why I was using item-style width.
Finally I commented the code to resize the columns programatically, but it takes me to another issues reported in this thread.
http://www.telerik.com/community/forums/aspnet-ajax/grid/grid-not-working-after-resize-columns.aspx

Regards,
Gisbert

[Pavlina]

Hello,

At this point in order to properly assist you, I would suggest that you open a formal support ticket and send us a small working project, which demonstrates the problem you are facing. We will review it locally, and advise you further.

Thank you!

Kind regards,
Pavlina
the Telerik team