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

[Solved] full screen mode for grid

5 Answers 735 Views

Grid

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

5 Answers, 1 is accepted

answered on 20 Aug 2009, 02:45 PM

What i want to archive is: User clicks ont the Button "Full Screen Mode" and the grid goes into full screen.

Here is an example:

Class Person:

    
            using System; 
        
            using System.Collections.Generic; 
        
            using System.Linq; 
        
            using System.Web; 
        
            using System.ComponentModel; 
        
            public class Person 
        
            { 
        
                public Guid ID { get; set; } 
        
                public string Firstname {get;set;} 
        
                public string Lastname {get;set;} 
        
                public int Age {get;set;} 
        
                public Person() 
        
                { 
        
                    ID = Guid.NewGuid(); 
        
                } 
        
            } 
        
            [System.ComponentModel.DataObject] 
        
            public class PersonController 
        
            { 
        
                [DataObjectMethod(DataObjectMethodType.Select, false)] 
        
                public List<Person> getAll() 
        
                { 
        
                    Person item; 
        
                    List<Person> list = new List<Person>(); 
        
                    for (int i = 0; i < 100; i++) 
        
                    { 
        
                        item = new Person(); 
        
                        item.Firstname = "Firstname" + i.ToString(); 
        
                        item.Lastname = "Lastname" + i.ToString(); 
        
                        item.Age = i; 
        
                        list.Add(item); 
        
                    } 
        
                    return list; 
        
                } 
        
            }

Master Page:

    
            <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="WebApplication1.MasterPage" %> 
        
            <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
                <title></title> 
        
                <asp:ContentPlaceHolder ID="head" runat="server"> 
        
                </asp:ContentPlaceHolder> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"><telerik:RadScriptManager ID="RadScriptManager1" Runat="server"> 
        
                        </telerik:RadScriptManager> 
        
                <div> 
        
                    <div style="background-color:Gray;color:Red;width:800px;">My Logo</div> 
        
                    <div id="container" style="width:800px;height:600px;"> 
        
                    <asp:ContentPlaceHolder ID="ContentPlaceHolderMainContent" runat="server">                     
        
                    </asp:ContentPlaceHolder>         
        
                    </div> 
        
                    <div style="background-color:Gray;color:Red;width:800px;">My Footer</div> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

ASPX-Page:

    
            <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebApplication1._default" %> 
        
            <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
        
            <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 
        
            </asp:Content> 
        
            <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderMainContent" runat="server"> 
        
                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="ObjectDataSource1"  
        
                GridLines="None" AllowPaging="True" > 
        
            <MasterTableView autogeneratecolumns="False" datasourceid="ObjectDataSource1"> 
        
            <RowIndicatorColumn> 
        
            <HeaderStyle Width="20px"></HeaderStyle> 
        
            </RowIndicatorColumn> 
        
            <ExpandCollapseColumn> 
        
            <HeaderStyle Width="20px"></HeaderStyle> 
        
            </ExpandCollapseColumn> 
        
                <Columns> 
        
                    <telerik:GridBoundColumn DataField="ID" DataType="System.Guid" HeaderText="ID"  
        
                        SortExpression="ID" UniqueName="ID"> 
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn DataField="Firstname" HeaderText="Firstname"  
        
                        SortExpression="Firstname" UniqueName="Firstname"> 
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn DataField="Lastname" HeaderText="Lastname"  
        
                        SortExpression="Lastname" UniqueName="Lastname"> 
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn DataField="Age" DataType="System.Int32"  
        
                        HeaderText="Age" SortExpression="Age" UniqueName="Age"> 
        
                    </telerik:GridBoundColumn> 
        
                </Columns> 
        
            </MasterTableView> 
        
            </telerik:RadGrid> 
        
            <asp:ObjectDataSource ID="ObjectDataSource1" runat="server"  
        
                OldValuesParameterFormatString="original_{0}" SelectMethod="getAll"  
        
                TypeName="PersonController"></asp:ObjectDataSource> 
        
                <asp:Button ID="goInFullScreenModeButton" runat="server"  
        
                    onclick="goInFullScreenModeButton_Click" Text="Full Screen" /> 
        
            </asp:Content>

Thank you for your support ;-)

answered on 20 Aug 2009, 03:38 PM

Hi Alaeddin,

There is no built-in functionality for this, however, you can achieve it manually.

1) Place RadGrid in some asp:Panel. The panel should have an explicit height (e.g. in pixels) and RadGrid height should be set to 100%. If the RadGrid is ajaxified, its update panel <div> must have a 100% height style set as well.

2) When the "Full Screen" button is clicked, you should modify the styles of that asp:Panel, so that it expands to fill the browser window width and height and be positioned on top of all the other content (e.g. set position:absolute, top:0, left:0, width:100%, height:100%, etc).

3) if RadGrid scrolling is enabled, obtain a reference to the RadGrid client object and call the repaint() method.

To simplify things, you can try implementing points (1) and (2) without a RadGrid, and add the control inside the panel when you are ready.

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.