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

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

1 Answer 42 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 07 Jul 2010, 01:47 PM
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,

 

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 07 Jul 2010, 02:05 PM
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
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 Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
Joe
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or