Issues controlling width and height of a grid when using different resolutions

[Joe]

Hi,
I'm having all sorts of issues rendering the grid control when utilizing different screen resolutions.

When I'm using a high quality resolution everything appears to be working fine, however the minute I reduce the resolution I get the scroll bars and it distorts the view.  I've wrapped the grid around a DIV and I was under the impression that the grid control was suppose to only work with the DIV boundary.  This is not the case.  For example

 <div class="LeadGridContainer">
            <ucPL:Preloader ID="Preloader" runat="server" />
            <telerik:RadGrid ID="dbgLeads" runat="server" AllowPaging="True" AllowSorting="True"
                AutoGenerateColumns="False" GridLines="None" Skin="Office2007" PageSize="50"
                AllowMultiRowSelection="True" OnSortCommand="dbgLeads_SortCommand" OnNeedDataSource="dbgLeads_NeedDataSource"
                OnItemCreated="dbgLeads_ItemCreated" OnItemCommand="dbgLeads_ItemCommand" MasterTableView-GroupsDefaultExpanded="false"
                GroupingSettings-CaseSensitive="false" EnableLinqExpressions="False">
                <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" />
                <MasterTableView Name="LeadDetails" GroupLoadMode="Client" CommandItemDisplay="Top"
                    DataKeyNames="LeadId,Email,Firstname,Lastname,LeadPermission,CompanyId" AllowMultiColumnSorting="false"
                    AllowNaturalSort="false" AllowFilteringByColumn="true">
                    <CommandItemTemplate>
                        <div style="padding: 5px 5px;">
                            <asp:LinkButton ID="btnAssignStatus" runat="server" OnClick="btnAssignStatus_Click"
                                OnClientClick="javascript:return getSelectedCheckBoxCount('')" Visible='<%# dbgLeads.EditIndexes.Count == 0 %>'><img style="border:0px;vertical-align:middle;" alt="" src="../Images/SinglePlus.gif" />Assign Status</asp:LinkButton>&nbsp;&nbsp;
                            <asp:LinkButton ID="btnAssignAgent" runat="server" OnClick="btnAssignAgent_Click"
                                OnClientClick="javascript:return getSelectedCheckBoxCount('')" Visible='<%# dbgLeads.EditIndexes.Count == 0 %>'><img style="border:0px;vertical-align:middle;" alt="" src="../Images/SinglePlus.gif" />Assign Agent</asp:LinkButton>&nbsp;&nbsp;
                            <asp:LinkButton ID="btnDeleteLead" runat="server" OnClick="btnDeleteLead_Click" OnClientClick="javascript:return getSelectedCheckBoxCount('Delete all selected leads?')"
                                Visible='<%# dbgLeads.EditIndexes.Count == 0 %>'><img style="border:0px;vertical-align:middle;" alt="" src="../Images/SingleMinus.gif" />Delete Lead(s)</asp:LinkButton>&nbsp;&nbsp;
                        </div>
                    </CommandItemTemplate>
                    <Columns>
                        <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Navigate" HeaderText="View Details"
                            ImageUrl="~/Images/Symbol-EditIcon_20x20.png" ButtonCssClass="pointerMouseCursor"
                            Text="View this lead details">
                        </telerik:GridButtonColumn>
                        <telerik:GridBoundColumn DataField="Firstname" HeaderText="First Name" UniqueName="Firstname"
                            ItemStyle-Width="10%" SortExpression="Firstname" AutoPostBackOnFilter="false"
                            CurrentFilterFunction="equalto" FilterDelay="4000" ShowFilterIcon="false">
                            <ItemStyle HorizontalAlign="Left"></ItemStyle>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Lastname" HeaderText="Last Name" UniqueName="Lastname"
                            ItemStyle-Width="10%" SortExpression="Lastname" AutoPostBackOnFilter="false"
                            CurrentFilterFunction="equalto" FilterDelay="4000" ShowFilterIcon="false">
                            <ItemStyle HorizontalAlign="Left"></ItemStyle>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Phone" HeaderText="Phone" UniqueName="Phone"
                            ItemStyle-Width="14%" SortExpression="Phone" AutoPostBackOnFilter="false" CurrentFilterFunction="equalto"
                            FilterDelay="4000" ShowFilterIcon="false">
                            <ItemStyle HorizontalAlign="Left"></ItemStyle>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Mobilephone" HeaderText="Cell" UniqueName="Mobilephone"
                            ItemStyle-Width="6%" SortExpression="Mobilephone" AutoPostBackOnFilter="false"
                            CurrentFilterFunction="equalto" FilterDelay="4000" ShowFilterIcon="false">
                            <ItemStyle HorizontalAlign="Left"></ItemStyle>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="CompanyName" HeaderText="Company" UniqueName="CompanyName"
                            ItemStyle-Width="10%" SortExpression="CompanyName">
                            <ItemStyle HorizontalAlign="Left"></ItemStyle>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="State" HeaderText="State" UniqueName="State"
                            ItemStyle-Width="10%" SortExpression="State">
                            <ItemStyle HorizontalAlign="Left" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Createddate" DataFormatString="{0:MM/dd/yy}"
                            DataType="System.DateTime" HeaderText="Create Date" UniqueName="Createddate"
                            ItemStyle-Width="10%" SortExpression="Createddate" AutoPostBackOnFilter="false"
                            CurrentFilterFunction="equalto" FilterDelay="4000" ShowFilterIcon="false">
                            <ItemStyle HorizontalAlign="Left"></ItemStyle>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Systemdays" HeaderText="Days In System" UniqueName="Systemdays"
                            ItemStyle-Width="10%" SortExpression="Systemdays">
                            <ItemStyle HorizontalAlign="Right"></ItemStyle>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Email" HeaderText="E-Mail" UniqueName="Email"
                            ItemStyle-Width="10%" SortExpression="Email">
                            <ItemStyle HorizontalAlign="Left"></ItemStyle>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="AssignedTo" HeaderText="Lead Assigned To" UniqueName="AssignedTo"
                            ItemStyle-Width="10%" SortExpression="AssignedTo">
                            <ItemStyle HorizontalAlign="Left"></ItemStyle>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="ContactType1" HeaderText="Contact Type" UniqueName="ContactType1"
                            ItemStyle-Width="5%" SortExpression="ContactType1">
                            <ItemStyle HorizontalAlign="Left"></ItemStyle>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Status" HeaderText="Status" UniqueName="Status"
                            ItemStyle-Width="5%" SortExpression="Status">
                            <ItemStyle HorizontalAlign="Left"></ItemStyle>
                        </telerik:GridBoundColumn>
                        <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderStyle-Width="22%"
                            ItemStyle-Width="2%" ItemStyle-HorizontalAlign="Center">
                            <HeaderStyle Width="22%"></HeaderStyle>
                            <ItemStyle HorizontalAlign="Center" Width="2%"></ItemStyle>
                        </telerik:GridClientSelectColumn>
                    </Columns>
                </MasterTableView>
                <PagerStyle Mode="NextPrevAndNumeric" />
                <ClientSettings AllowGroupExpandCollapse="True" ReorderColumnsOnClient="True" AllowColumnsReorder="True"
                    Selecting-AllowRowSelect="True" DataBinding-EnableCaching="True">
                    <DataBinding EnableCaching="True">
                    </DataBinding>
                    <Selecting AllowRowSelect="True"></Selecting>
                </ClientSettings>
                <GroupingSettings ShowUnGroupButton="true" />
            </telerik:RadGrid>
            <br />
            <br />
            <asp:Label ID="totalRecordCount" runat="server" Text="" CssClass="FormLabel"></asp:Label>
            <asp:Button ID="btnPrevious" runat="server" Text="Previous 250" Width="85px" OnClick="btnPrevious_Click" />
            <asp:Label ID="leadRange" runat="server" Text="" CssClass="FormLabel"></asp:Label>
            <asp:Button ID="btnNext" runat="server" Text="Next 250" Width="85px" OnClick="btnNext_Click" />
            <input id="isValidDate" type="hidden" runat="server" />
        </div>

Here is the Lead DIV

.LeadGridContainer

 

{padding:0 0 0 0px; width:95%;}

I'm under the impression that the grid can only behave within this DIV container that I created.  Any help on this would be greatly appreciated.
Thanks,

 

[Dimo]

Hi Joe,

If the data inside the RadGrid cells cannot fit in the available horizontal space, the RadGrid control will overflow out of its parent DIV - this is normal.

Please either enable scrolling for that parent DIV by setting overflow:auto style, or enable RadGrid scrolling.

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

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

Best wishes,
Dimo
the Telerik team