Growing Grid

[Erick]

Hi,

I've an issue with column widths. I'll discribe the scenario: we've a grid with width of 100% to fit the browser screen. Normally the users will work with screen resolution of 1280 x1024 but with resolutions smaller than 1000 pixels width, one column will be hidden. The grid have 5 columns which 4 columns have fixed widths in pixels and one column have the width of remaining pixels. This is a known issue but i can't find a solution.

I've tried with min-width (css) but this will not fix it. I've also checked the OnColumnRezising event, this will be fired on the first load but not on resizing of the browserwindow itself. While reszing, i can't request the current width of one column because the width is not set.

I hope you have a solution for this.

Kind Regards,

Jelle

[Pavlina]

Hello Jelle,

Please examine grid_100_width_height.zip project in the following code library which elaborates on this subject and let me know if it helps to resolve the problem you are facing:
http://www.telerik.com/community/code-library/aspnet-ajax/grid/setting-100-height-and-resize-on-container-resize-for-grid-with-scrolling-and-static-headers.aspx

Regards,
Pavlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Erick]

Hi,

I've checked that zip file, but i can't find something related to my problem. I've attached my code for the grid below. In the code you see multiple columns with fixed widths except one. The grid itself is expanded to full screen. But when the screen is smaller than 545 pixels, the column named full_name will be hidden. So i need to prevent the grid will be smaller than 545 pixels with minimum width for the column named full_name.

<telerik:RadGrid ID="grdData" Width="100%"
                                AllowPaging="True" PageSize="15" runat="server" AllowSorting="True"
                                GridLines="None" EnableLinqExpressions="False" GroupingEnabled="False"
                                AutoGenerateColumns="False" CellSpacing="0" CssClass="RadGrid">

                                <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" EnablePostBackOnRowClick="true">
                                    <Selecting AllowRowSelect="True" />
                                    <Scrolling AllowScroll="True" />
                                    <Resizing ClipCellContentOnResize="true" />
                                </ClientSettings>

                                <MasterTableView Width="100%" ClientDataKeyNames="address_ID,type_ID" DataKeyNames="address_ID,type_ID" TableLayout="Fixed">

                                    <Columns>
                                        <telerik:GridTemplateColumn UniqueName="SELECT" AllowFiltering="false" Reorderable="false" Resizable="false">
                                            <ItemStyle Width="35px" />
                                            <HeaderStyle Width="35px" />
                                            <HeaderTemplate>
                                                <asp:CheckBox ID="chkSelectAll" runat="server" />
                                            </HeaderTemplate>
                                            <ItemTemplate>
                                                <asp:CheckBox ID="chkSelect" runat="server" />
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridButtonColumn ButtonType="ImageButton" UniqueName="TYPE" CommandName="TYPE">
                                            <ItemStyle Width="30px" />
                                            <HeaderStyle Width="30px" />
                                        </telerik:GridButtonColumn>
                                        <telerik:GridButtonColumn ButtonType="ImageButton" ImageUrl="~/images/edit.png" UniqueName="EDIT" CommandName="EDIT">
                                            <ItemStyle Width="30px" />
                                            <HeaderStyle Width="30px" />
                                        </telerik:GridButtonColumn>
                                        <telerik:GridBoundColumn DataField="full_name" UniqueName="full_name" HeaderText="Naam">
                                            <ItemStyle Wrap="false" />
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="city" UniqueName="city" HeaderText="Plaats">
                                            <ItemStyle Width="140px" Wrap="false" />
                                            <HeaderStyle Width="140px" />
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="emailaddress" UniqueName="emailaddress" HeaderText="E-mailadres">
                                            <ItemStyle Width="140px" Wrap="false" />
                                            <HeaderStyle Width="140px" />
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="phone" UniqueName="phone" HeaderText="Telefoon">
                                            <ItemStyle Width="140px" Wrap="false" />
                                            <HeaderStyle Width="140px" />
                                        </telerik:GridBoundColumn>
                                        <telerik:GridButtonColumn ButtonType="ImageButton" ImageUrl="~/images/delete.png" UniqueName="DELETE" CommandName="DELETE">
                                            <ItemStyle Width="30px" />
                                            <HeaderStyle Width="30px" />
                                        </telerik:GridButtonColumn>
                                    </Columns>

                                </MasterTableView>

                            </telerik:RadGrid>

[Pavlina]

Hello Em-Software,

I am afraid min-width for RadGrid columns is not supported. You can either set explicit widths to all columns, or arrange the page layout in such a way, that the whole RadGrid control does not shrink beyond a certain width (e.g. set min-width to its container).

Best wishes,
Pavlina
the Telerik team

[Erick]

Hi,

With your suggestion i've fixed this. By adding a DIV as a container for the grid with min-width setted, the column named full_name will not be hidden. It's not very beautiful solution but it works.

Very much thanks for your help!