Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Docking > Full screen dock

• Ryan Grossman Intermediate

  Posted on May 16, 2010 (permalink)

  I'm trying to find any examples on how to take the content of a dock and view it full screen (like RadEditor's toggle full screen option). Do you have any code examples to accomplish this or suggesstions on how it can be accomplished?

• Pero Pero

  Posted on May 19, 2010 (permalink)

  Hi Ryan,
  
  Have you considered using the RadWindow control for this specific scenario? It has a built-in support for full screen mode. Here is an example showing this functionality: http://demos.telerik.com/aspnet-classic/Window/Examples/Default/DefaultCS.aspx.
  
  Regards,
  Pero
  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.

• Ryan Grossman Intermediate

  Posted on May 20, 2010 (permalink)

  I use Radwindow all over my site currently. Do you mean put a Radwindow inside my Dock object and then use that to maximize?

• Ryan Grossman Intermediate

  Posted on May 20, 2010 (permalink)

  Is Radwindow classic able to display the content inline on the page?
  
  I didnt think it could, so I'm using jquery to open a div element that has everything wrapped inside it. Its not perfect, but I was able to accomplish my task using the colorbox control using JQuery. If when the page is first loaded, you and I use my Refresh data function, then open the jquery window and goto menu and refresh data, all he functions work. If I dont click on any of the ajax panel functions before opening the jquery window, when the jquery window is open, none of the ajax panel features work. Does an ajax panel need to be initialized somehow on the page before I open the div with jquery?
  
  My refreshgrid function
    Dim fc_dgCommunication As Object = rdoCommunication.Container.FindControl("dgCommunication")
    dgCommunicationChecked.Clear()
    fc_dgCommunication.Rebind()

  <raddk:raddockableobjectcommand name="rdocOpenCommunication" autopostback="false" image="restore.gif" onclientcommand="OpenCommunication" tooltip="View Full Screen"></raddk:raddockableobjectcommand>

  </commands>

  <contenttemplate>

  <div id='communication'>

  <radA:RadAjaxPanel id="RadAjaxPanelCommunication" runat="server" LoadingPanelID="LoadingPanel">

  <table align="center" width="99%" border="0" cellspacing="1" cellpadding="1">

  <tr>

  <td class="PTitle_Bold"><a href="#" onMouseover="dropdownmenu(this, event, 'tasksmenuCommunication')">Menu</a><div id="tasksmenuCommunication" class="anylinkcss" style="width: 140px;">

  <a href="#" onClick="return ShowForm('communication_new.aspx?PrimaryRecordID=<%= Request.QueryString("ID") %>&PrimaryTableTxt=<%= Request.QueryString("View") %>&Location=Contact');">New Communication</a>

  <asp:LinkButton ID="lbCommunicationExportCSV_Selected" runat="server" Text="Export Selected" OnClick="Export_Selected"></asp:LinkButton>

  <asp:LinkButton ID="lbCommunicationExportCSV_All" runat="server" Text="Export All" OnClick="Export_All"></asp:LinkButton>

  <HR />

  <asp:LinkButton ID="lbCommunicationClearFilters" runat="server" Text="Clear Filters" OnClick="ClearFilters"></asp:LinkButton>

  <asp:LinkButton ID="lbCommunicationClearSelected" Text="Clear Selected" runat="server" OnClick="ClearSelected"></asp:LinkButton>

  <asp:LinkButton ID="lbCommunicationRefresh" runat="server" OnClick="Refresh" Text="Refresh Data" CausesValidation="false"></asp:LinkButton>

  <asp:LinkButton ID="lbCommunicationDisablePaging" runat="server" Text="View All" OnClick="DisablePaging" CausesValidation="false"></asp:LinkButton>

  <asp:LinkButton ID="lbCommunicationEnablePaging" runat="server" Text="View By Page" OnClick="EnablePaging" Visible="False" CausesValidation="false"></asp:LinkButton>

  </div>        </td>

  </tr>

  </table>

  <table width="100%" border="0" cellspacing="2" cellpadding="2">

  <tr>

  <td><radg:radgrid

  id="dgCommunication"

  AllowPaging="True"

  AllowSorting="True"

  AllowMultiRowSelection="True"

  AllowFilteringByColumn="True"

  ShowGroupPanel="True"

  ShowHeader="True"

  Showfooter="False"

  EnableAjax="True"

  Gridlines="None"

  AutoGenerateColumns="False"

  CellPadding="2"

  OnInit="dgInit"

  OnColumnCreated="dgColumnCreated"

  OnPreRender="dgPreRender"

  OnItemCreated="dgItemCreated"

  OnItemDataBound="dgItemDataBound"

  OnNeedDataSource="dgCommunication_NeedDataSource"

  runat="server"

  Skin="Outlook2007Dock"

  Width="100%"

  EnableAJAXLoadingTemplate="True"

  LoadingTemplateTransparency="20"

  PageSize="5">

  <AJAXLoadingTemplate><asp:Panel ID="pnlLoading" BackColor="#E0E0E0" height="100%" runat="server"><asp:Image ID="Image2" ImageUrl="~/RadControls/Ajax/Skins/Default/loadingprogressbar.gif" BorderWidth="0px" AlternateText="Loading" Runat="server" style="margin-top: 2px;"></asp:Image></asp:Panel></AJAXLoadingTemplate>

  <PagerStyle  Mode="NextPrevAndNumeric" Position="Bottom"></PagerStyle>

  <MasterTableView width="100%" IsDesignMode="False" GroupLoadMode="Client" AllowFilteringByColumn="True" DataKeyNames="CommunicationID" DataMember="CommunicationID" HierarchyDefaultExpanded="true">

  <Columns>

  <radg:GridBoundColumn UniqueName="CommunicationID" DataField="CommunicationID" Visible="False"/>

  <radg:GridTemplateColumn UniqueName="SelectColumn" Groupable="False" AllowFiltering="False">

  <HeaderStyle Width="12px" /><HeaderTemplate><asp:CheckBox id="headerChkbox" OnCheckedChanged="dgCommunication_ToggleSelectedState" AutoPostBack="True" runat="server"></asp:CheckBox></HeaderTemplate>

  <ItemTemplate>

  <asp:CheckBox ID="cbChecked" Runat="server" AutoPostBack="True" OnCheckedChanged="dgCommunication_CheckChanged"></asp:CheckBox>

  </ItemTemplate>

  </radg:GridTemplateColumn>

  <radg:GridTemplateColumn UniqueName="GridTools" Groupable="False" AllowFiltering="False">

  <HeaderStyle Width="12px" />

  <ItemTemplate><asp:Panel id="pnlGridTools" runat="server"><img src="../images/gridtools.gif" onMouseover="dropdownmenu(this, event, 'tasksmenu<%# DataBinder.Eval(Container.DataItem, "CommunicationID") %>')"><div id="tasksmenu<%# DataBinder.Eval(Container.DataItem, "CommunicationID") %>" class="anylinkcss" style="width: 182px;">

  <a href="#" onClick="return ShowForm('communication_edit.aspx?Edit=Y&CommunicationID=<%# DataBinder.Eval(Container.DataItem, "CommunicationID") %>&Location=Contact');">Edit</a>

  <a href="#" onClick="return ShowForm('deleterecord.aspx?CommunicationID=<%# DataBinder.Eval(Container.DataItem, "CommunicationID") %>');">Delete</a>

  </div>

  </asp:Panel>

  </ItemTemplate>

  </radg:GridTemplateColumn>

  <radg:GridTemplateColumn UniqueName="Template1" Groupable="False" DataField="Template1" AutoPostBackOnFilter="True">

  <HeaderTemplate><asp:LinkButton ID="btnCommunicationCreatedDate" Text="Date" Tooltip="Sort by Created Date" CommandName='Sort' CommandArgument='CommunicationCreatedDate' runat="server" /> <asp:LinkButton ID="btnCommunication_CommunicationCreatedDate" Text="(g)" Tooltip="Group by Created Date" OnClick="Communication_CommunicationCreatedDateGROUP" runat="server" /> - <asp:LinkButton ID="btnLastTxt" Text="Created By" Tooltip="Sort by Created By" CommandName='Sort' CommandArgument='LastTxt' runat="server" /> <asp:LinkButton ID="btnCommunication_LastTxt" Text="(g)" Tooltip="Group by Created By" OnClick="Communication_LastTxtGROUP" runat="server" /> - <asp:LinkButton ID="btnCommunicationSubjectTxt" Text="Subject" Tooltip="Sort by Subject" CommandName='Sort' CommandArgument='CommunicationSubjectTxt' runat="server" /> <asp:LinkButton ID="btnCommunication_CommunicationSubjectTxt" Text="(g)" Tooltip="Group by Subject" OnClick="Communication_CommunicationSubjectTxtGROUP" runat="server" /><br><asp:LinkButton ID="btnCommunicationMemo" Text="Memo/Message" Tooltip="Sort by Memo/Message" CommandName='Sort' CommandArgument='CommunicationMemo' runat="server" /></HeaderTemplate>

  <ItemTemplate><B><%# IIf(DataBinder.Eval(Container.DataItem, "CommunicationCreatedDate")="1/1/1900", "-", DataBinder.Eval(Container.DataItem, "CommunicationCreatedDate","{0:d}"))%> -

  <a href="view_getparent.aspx?ID=<%# DataBinder.Eval(Container.DataItem, "CommunicationCreatedContactID") %>&View=Contact" target="_blank"><%# DataBinder.Eval(Container.DataItem, "CommunicationCreatedContactTxt") %></a></B> - <I><%# DataBinder.Eval(Container.DataItem, "CommunicationSubjectTxt") %></I><BR /><%# DataBinder.Eval(Container.DataItem, "CommunicationMemo") %>                        </ItemTemplate>

  </radg:GridTemplateColumn>

  </Columns>

  <DetailTables>

  <radg:GridTableView ShowHeader="False" AllowSorting="False" DataKeyNames="ULID" DataMember="ULID" Width="93%" HorizontalAlign="Right">

  <ParentTableRelation>

  <radG:GridRelationFields DetailKeyField="ULSecondaryRecordID" MasterKeyField="CommunicationID" />

  </ParentTableRelation>

  <ItemStyle CssClass="InnerItemStyle" />

  <alternatingitemstyle CssClass="AltInnerItemStyle" />

  <Columns>

  <radg:GridTemplateColumn Groupable="False">

  <ItemTemplate><table width="100%" border="0" cellspacing="2" cellpadding="2">

  <tr>

  <td rowspan="2" Width="24"><a href="linkclick.aspx?ID=<%# DataBinder.Eval(Container.DataItem, "ULID") %>&Source=Communication" target="_blank"><img src="../images/attachmenticon8.gif" border="0"></a></td>

  <td><%# IIf(DataBinder.Eval(Container.DataItem, "ULDescription")="", "-", "<A HREF='linkclick.aspx?ID=" & DataBinder.Eval(Container.DataItem, "ULID") & "&Source=Communication' target='_blank'>" & DataBinder.Eval(Container.DataItem, "ULDescription") & "</a>" )%>&nbsp;&nbsp;&nbsp;<I>Uploaded: <%# DataBinder.Eval(Container.DataItem, "ULCreatedDate", "{0:d}") %>&nbsp;By: <%# DataBinder.Eval(Container.DataItem, "ULCreatedTxt") %></I></td>

  </tr>

  <tr>

  <td><a href="linkclick.aspx?ID=<%# DataBinder.Eval(Container.DataItem, "ULID") %>&Source=Communication" target="_blank"><%# DataBinder.Eval(Container.DataItem, "ULFilename") %></a> <%# IIf(DataBinder.Eval(Container.DataItem, "ULFilesize") = "", "", "(" & DataBinder.Eval(Container.DataItem, "ULFilesize") & " KB)" )%></td>

  </tr>

  </table></ItemTemplate>

  </radg:GridTemplateColumn>

  </Columns>

  </radg:GridTableView>

  </DetailTables>

  </MasterTableView>

  <ClientSettings EnableRowHoverStyle="True" AllowColumnHide="True" AllowExpandCollapse="True" AllowGroupExpandCollapse="False" AllowDragToGroup="False">

  <Selecting AllowRowSelect="False" EnableDragToSelectRows="False"></Selecting>

  </ClientSettings>

  </radg:radgrid></td>

  </tr>

  </table>

  </radA:RadAjaxPanel>

  </div>

  </contenttemplate>

  </raddk:raddockableobject>

• Pero Pero

  Posted on May 25, 2010 (permalink)

  Hi Ryan,
  
  Could you please explain what do you mean by "displaying the content inline on the page"? The RadWindow is a block HTML element that can be moved on the page.
  
  I believe the problem is related to the fact that the DOM tree is being modified when the jQuery window is opened. The controls that can be moved in the DOM tree usually have Ajax problems, because when they are moved outside of the Ajax panel, the panel tries to recreate them, and an error is thrown. That's the main reason why the dynamically created docks in the MyPortal online demo are always docked. So, please make sure the jQuery window is not moved outside the Ajax panel.
  
  If this does not resolve the problem, please send a source code reproducing the issue, that can be easily run locally, and I will do my best to help you.
  
  Best wishes,
  Pero
  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.

• Ryan Grossman Intermediate

  Posted on Jul 8, 2010 (permalink)

  My inline content I mean, I want to be able to take everything between the content template tags of a dock a show them in another window. Radwindow classic cannot do this so I resorted to find another solution and jquery allows it, but seems to break the ajax.

• Pero Pero

  Posted on Jul 13, 2010 (permalink)

  Hi Ryan,
  
  Yes if the dock's content (or the dock itself) is ajaxified, and the content is moved outside the Ajax panel, an ajax error will occur. To avoid the issue you should make sure the controls within the Ajax panel are never moved outside the panel.
  
  I would suggest to modify your application to use the RadWindow for ASP.NET AJAX, which also as the RadDock, can be used as a content container, and you can add any control or HTML content.
  
  Sincerely yours,
  Pero
  the Telerik team

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

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Docking > Full screen dock