Rank 1
I am trying to use FULLSCREEN api in .net project with telerik controls. Goal is to make the Radgrid to show up in Full screen. This works fine but found some features not working. When user tries to click on the column header - filter menu (EnableHeaderCheckListItemsrequested) shows up in normal page mode - but not in FULL Screen mode.
FYI, I am working on Radgrid with excel like filtering . Using IE 11 , telerik - v4.0.30319. I tried to find the generated code and looks it is generating Iframe and it shows up a message saying browser not supporting. Is this what restricting me to see the Filtermenu in full screen mode ?
Is there a way to over come this issue .. Like forcing to change Iframe logic and get telerik to generate supported HTML elements ?
Attaching the Screen shot with the screen and code generated at client side
3 Answers, 1 is accepted
Rank 1
Attaching the source code for your reference..
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FullScreenSample.aspx.cs" Inherits="EDD.Mechanical.controls.Containers.FullScreenSample" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <link href="../Js/styles.css" rel="stylesheet" /> <script type="text/javascript" src="../Js/jquery.min.js"></script> <script type="text/javascript" src="../Js/jquery.fullscreen.min.js"></script> <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server" > <style type="text/css"> html, body, form {width:100%;height:100%;overflow :visible;margin:0;padding:0} </style> </telerik:RadCodeBlock> </head><body> <form id="form1" runat="server"> <div style="width:100%;height:100%;" > <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxSettingCreated="RadAjaxManager1_AjaxSettingCreated" EnableAJAX="true" DefaultLoadingPanelID="radlpLineList" UpdatePanelsRenderMode="Inline" EnablePageHeadUpdate="False"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="RadGrid1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadGrid1" UpdatePanelRenderMode="Inline" /> <telerik:AjaxUpdatedControl ControlID="msg" /> <telerik:AjaxUpdatedControl ControlID="RadWindowManager1" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <telerik:RadAjaxLoadingPanel ID="radlpLineList" runat="server" RenderMode="Native"/><script type="text/javascript"> $(function() { // check native support $('#support').text($.fullscreen.isNativelySupported() ? 'supports' : 'does not support'); // open in fullscreen $('#fullscreen .requestfullscreen').click(function() { $('#fullscreen').fullscreen(); return false; }); // exit fullscreen $('#fullscreen .exitfullscreen').click(function() { $.fullscreen.exit(); return false; }); // document's event $(document).bind('fscreenchange', function(e, state, elem) { // if we currently in fullscreen modeif ($.fullscreen.isFullScreen()) { $('#fullscreen .requestfullscreen').hide(); $('#fullscreen .exitfullscreen').show(); } else { $('#fullscreen .requestfullscreen').show(); $('#fullscreen .exitfullscreen').hide(); } $('#state').text($.fullscreen.isFullScreen() ? '' : 'not'); }); }); </script> <div id="fullscreen" style="width:100%;height:100%;" > <div id="divResults" runat="server" style="width:100%;height:100%;" > <p>This block is <span id="state">not</span> in fullscreen mode. <a href="#" class="requestfullscreen">Click to open it in fullscreen</a><a href="#" class="exitfullscreen" style="display: none">Click to exit fullscreen</a>.</p> <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="100%" > <div id="dWrapper" style="width:100%;height:100%;" > <telerik:RadWindowManager ID="RadWindowManager" EnableViewState="false" Behaviors="Move,Close,Resize,Maximize" ReloadOnShow="true" RenderMode="Native" ShowContentDuringLoad="false" VisibleStatusbar="false" KeepInScreenBounds="true" runat="server" InitialBehaviors="Maximize" > <Windows> <telerik:RadWindow runat="server" ID="RadWindow" RenderMode="Native" ReloadOnShow="true" KeepInScreenBounds="true" /> </Windows> </telerik:RadWindowManager> <telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="true" FilterType="HeaderContext" EnableHeaderContextMenu="True" EnableHeaderContextFilterMenu="True" AllowPaging="True" PageSize="50" DataSourceID="XmlDataSource1" AllowSorting="true" Width="100%" Height="99%" OnFilterCheckListItemsRequested="radgLineList_FilterCheckListItemsRequested"> <PagerStyle Mode="Slider" Position="TopAndBottom" PageSizes="100,200,400,500" AlwaysVisible="True" /> <ClientSettings Scrolling-AllowScroll="true" Scrolling-UseStaticHeaders="true" EnableRowHoverStyle="true" ReorderColumnsOnClient="true" > <Scrolling AllowScroll="True" UseStaticHeaders="True" /> </ClientSettings> <MasterTableView CommandItemDisplay="Top" DataKeyNames="CustomerID" EditMode="Batch" AutoGenerateColumns="False" AllowAutomaticDeletes="False" Font-Size="9" FilterItemStyle-HorizontalAlign="Center" Width="100%" TableLayout="Fixed" CheckListWebServicePath="/mechanical/AppServices/loadOnDemand.asmx"> <Columns> <telerik:GridButtonColumn ButtonType="ImageButton" UniqueName="cmdDeleteView" CommandName="Delete" ShowInEditForm="true" ConfirmDialogType="Classic" ConfirmText="Delete selected record?" Text="Delete" ImageUrl="/global/graphics/icons/delete.png" Display="true" FilterCheckListEnableLoadOnDemand="false"> <HeaderStyle Width="30px"/> <ItemStyle HorizontalAlign="Center" /> </telerik:GridButtonColumn> <telerik:GridBoundColumn UniqueName="CompanyName" DataField="CompanyName" HeaderText="CompanyName" HeaderStyle-Width="200px"/> <telerik:GridTemplateColumn UniqueName="DDLTest" HeaderText="Render Mode - Default(doesnt work)" DataField="CompanyName" FilterControlWidth="80px" HeaderStyle-Width="140px"> <ItemTemplate> <%# Eval("CompanyName") %> </ItemTemplate> <EditItemTemplate> <telerik:RadComboBox runat="server" ID="RadComboBox1" ValidationGroup="validationGroup" > <DefaultItem Text="Please select item" Value="-1" /> <Items> <telerik:RadComboBoxItem Text="Item1" Value="1" /> <telerik:RadComboBoxItem Text="Item2" Value="2" /> <telerik:RadComboBoxItem Text="Item3" Value="3" /> <telerik:RadComboBoxItem Text="Item4" Value="4" /> </Items> </telerik:RadComboBox> </EditItemTemplate> </telerik:GridTemplateColumn> <telerik:GridTemplateColumn UniqueName="DDLTest1" HeaderText="Render Mode - Native(Works)" DataField="CompanyName" FilterControlWidth="80px" HeaderStyle-Width="140px"> <ItemTemplate> <%# Eval("ContactName1") %> </ItemTemplate> <EditItemTemplate> <telerik:RadComboBox runat="server" ID="RadComboBox1" ValidationGroup="validationGroup" RenderMode="Native"> <DefaultItem Text="Please select item" Value="-1" /> <Items> <telerik:RadComboBoxItem Text="ItemA" Value="1" /> <telerik:RadComboBoxItem Text="ItemB" Value="2" /> <telerik:RadComboBoxItem Text="ItemC" Value="3" /> <telerik:RadComboBoxItem Text="ItemD" Value="4" /> </Items> </telerik:RadComboBox> </EditItemTemplate> </telerik:GridTemplateColumn> <telerik:GridBoundColumn UniqueName="ContactNamea" DataField="ContactName" HeaderText="ContactName" HeaderStyle-Width="200px"/> <telerik:GridBoundColumn UniqueName="ContactName1" DataField="ContactName1" HeaderText="ContactName1" HeaderStyle-Width="200px"/> <telerik:GridBoundColumn UniqueName="ContactName4" DataField="ContactName4" HeaderText="ContactName4" HeaderStyle-Width="200px"/> <telerik:GridBoundColumn UniqueName="ContactName5" DataField="ContactName5" HeaderText="ContactName5" HeaderStyle-Width="200px"/> <telerik:GridBoundColumn UniqueName="ContactName6" DataField="ContactName6" HeaderText="ContactName6" HeaderStyle-Width="200px"/> <telerik:GridBoundColumn UniqueName="ContactName7" DataField="ContactName7" HeaderText="ContactName7" HeaderStyle-Width="200px"/> <telerik:GridBoundColumn UniqueName="ContactName8" DataField="ContactName8" HeaderText="ContactName8" HeaderStyle-Width="200px" Visible="false"/> <telerik:GridBoundColumn UniqueName="ContactName9" DataField="ContactName9" HeaderText="ContactName9" HeaderStyle-Width="200px" Visible="false"/> <telerik:GridBoundColumn UniqueName="ContactName10" DataField="ContactName10" HeaderText="ContactName10" HeaderStyle-Width="200px" Visible="false"/> <telerik:GridBoundColumn UniqueName="ContactName11" DataField="ContactName11" HeaderText="ContactName11" HeaderStyle-Width="200px" Visible="false"/> <telerik:GridBoundColumn UniqueName="ContactName12" DataField="ContactName12" HeaderText="ContactName12" HeaderStyle-Width="200px" Visible="false"/> <telerik:GridBoundColumn UniqueName="ContactName13" DataField="ContactName13" HeaderText="ContactName13" HeaderStyle-Width="200px" Visible="false"/> <telerik:GridBoundColumn UniqueName="ContactName14" DataField="ContactName14" HeaderText="ContactName14" HeaderStyle-Width="200px" Visible="false"/> <telerik:GridBoundColumn UniqueName="ContactName15" DataField="ContactName15" HeaderText="ContactName15" HeaderStyle-Width="200px" Visible="false"/> <telerik:GridBoundColumn UniqueName="ContactName16" DataField="ContactName16" HeaderText="ContactName16" HeaderStyle-Width="200px" Visible="false"/> <telerik:GridBoundColumn UniqueName="ContactName17" DataField="ContactName17" HeaderText="ContactName17" HeaderStyle-Width="200px" Visible="false"/> <telerik:GridBoundColumn UniqueName="ContactName18" DataField="ContactName18" HeaderText="ContactName18" HeaderStyle-Width="200px" Visible="false"/> <telerik:GridBoundColumn UniqueName="ContactName19" DataField="ContactName19" HeaderText="ContactName19" HeaderStyle-Width="200px" Visible="false"/> <telerik:GridBoundColumn UniqueName="ContactName20" DataField="ContactName20" HeaderText="ContactName20" HeaderStyle-Width="200px" Visible="false"/> <telerik:GridBoundColumn UniqueName="ContactName21" DataField="ContactName21" HeaderText="ContactName21" HeaderStyle-Width="200px" Visible="false"/> </Columns> </MasterTableView> </telerik:RadGrid> <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/Xml/XmlDataSourceExampleTemp.xml" EnableCaching="false"></asp:XmlDataSource> </div> </telerik:RadAjaxPanel> </div> </div> </div> </form></body></html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using Telerik.Web.UI; using System.Data; namespace EDD.Mechanical.controls.Containers { public partial class FullScreenSample : System.Web.UI.Page { protected void radgLineList_FilterCheckListItemsRequested(object sender, GridFilterCheckListItemsRequestedEventArgs e) { string dataField = (e.Column as IGridDataColumn).GetActiveDataField(); string myXMLfile = "~/App_Data/Xml/XmlDataSourceExampleTemp.xml"; DataSet ds = new DataSet(); ds.ReadXml(myXMLfile); e.ListBox.DataSource = ds.Tables[0]; e.ListBox.DataKeyField = dataField; e.ListBox.DataTextField = dataField; e.ListBox.DataValueField = dataField; e.ListBox.DataBind(); } public string PanelClientID; protected void RadAjaxManager1_AjaxSettingCreated(object sender, AjaxSettingCreatedEventArgs e) { this.PanelClientID = e.UpdatePanel.ClientID; } protected void Page_Load(object sender, EventArgs e) { } } }
<?xml version="1.0" encoding="utf-8" ?><Root> <Item CompanyName="Company Name XYZ" ContactName="value" CustomerID="1" ContactName1="value is for name 1" ContactName4="value" ContactName5="value is for 5 " ContactName6="value" ContactName7="value is for contact name 7" ContactName8 ="value" ContactName9="value 9 contact name" ContactName10="value" ContactName11="value 11 contact name" ContactName12="value" ContactName13="value for 13" ContactName14="value for 14" ContactName15="value for 15" ContactName16="value for 16 " ContactName17="value for 17" ContactName18="value for 18" ContactName19="value for 19" ContactName20="value for 20" ContactName21="value for 21 " /> <Item CompanyName="Company Name XYZ" ContactName="value" CustomerID="2" ContactName1="value is for name 1" ContactName4="value" ContactName5="value is for 5 " ContactName6="value" ContactName7="value is for contact name 7" ContactName8 ="value" ContactName9="value 9 contact name" ContactName10="value" ContactName11="value 11 contact name" ContactName12="value" ContactName13="value for 13" ContactName14="value for 14" ContactName15="value for 15" ContactName16="value for 16 " ContactName17="value for 17" ContactName18="value for 18" ContactName19="value for 19" ContactName20="value for 20" ContactName21="value for 21 " /> <Item CompanyName="Company Name XYZ" ContactName="value" CustomerID="3" ContactName1="value is for name 1" ContactName4="value" ContactName5="value is for 5 " ContactName6="value" ContactName7="value is for contact name 7" ContactName8 ="value" ContactName9="value 9 contact name" ContactName10="value" ContactName11="value 11 contact name" ContactName12="value" ContactName13="value for 13" ContactName14="value for 14" ContactName15="value for 15" ContactName16="value for 16 " ContactName17="value for 17" ContactName18="value for 18" ContactName19="value for 19" ContactName20="value for 20" ContactName21="value for 21 " /> <Item CompanyName="Company Name XYZ" ContactName="value" CustomerID="4" ContactName1="value is for name 1" ContactName4="value" ContactName5="value is for 5 " ContactName6="value" ContactName7="value is for contact name 7" ContactName8 ="value" ContactName9="value 9 contact name" ContactName10="value" ContactName11="value 11 contact name" ContactName12="value" ContactName13="value for 13" ContactName14="value for 14" ContactName15="value for 15" ContactName16="value for 16 " ContactName17="value for 17" ContactName18="value for 18" ContactName19="value for 19" ContactName20="value for 20" ContactName21="value for 21 " /> <Item CompanyName="Company Name XYZ" ContactName="value" CustomerID="5" ContactName1="value is for name 1" ContactName4="value" ContactName5="value is for 5 " ContactName6="value" ContactName7="value is for contact name 7" ContactName8 ="value" ContactName9="value 9 contact name" ContactName10="value" ContactName11="value 11 contact name" ContactName12="value" ContactName13="value for 13" ContactName14="value for 14" ContactName15="value for 15" ContactName16="value for 16 " ContactName17="value for 17" ContactName18="value for 18" ContactName19="value for 19" ContactName20="value for 20" ContactName21="value for 21 " /> <Item CompanyName="Company Name XYZ" ContactName="value" CustomerID="6" ContactName1="value is for name 1" ContactName4="value" ContactName5="value is for 5 " ContactName6="value" ContactName7="value is for contact name 7" ContactName8 ="value" ContactName9="value 9 contact name" ContactName10="value" ContactName11="value 11 contact name" ContactName12="value" ContactName13="value for 13" ContactName14="value for 14" ContactName15="value for 15" ContactName16="value for 16 " ContactName17="value for 17" ContactName18="value for 18" ContactName19="value for 19" ContactName20="value for 20" ContactName21="value for 21 " /> <Item CompanyName="Company Name XYZ" ContactName="value" CustomerID="7" ContactName1="value is for name 1" ContactName4="value" ContactName5="value is for 5 " ContactName6="value" ContactName7="value is for contact name 7" ContactName8 ="value" ContactName9="value 9 contact name" ContactName10="value" ContactName11="value 11 contact name" ContactName12="value" ContactName13="value for 13" ContactName14="value for 14" ContactName15="value for 15" ContactName16="value for 16 " ContactName17="value for 17" ContactName18="value for 18" ContactName19="value for 19" ContactName20="value for 20" ContactName21="value for 21 " /> <Item CompanyName="Company Name XYZ" ContactName="value" CustomerID="8" ContactName1="value is for name 1" ContactName4="value" ContactName5="value is for 5 " ContactName6="value" ContactName7="value is for contact name 7" ContactName8 ="value" ContactName9="value 9 contact name" ContactName10="value" ContactName11="value 11 contact name" ContactName12="value" ContactName13="value for 13" ContactName14="value for 14" ContactName15="value for 15" ContactName16="value for 16 " ContactName17="value for 17" ContactName18="value for 18" ContactName19="value for 19" ContactName20="value for 20" ContactName21="value for 21 " />
</Root>
Rank 1
The filter menu might not open if there is a JavaScript error on the page that breaks the functionality of the control. Could you please inspect your browser's console and see if such error is present. As for the full screen, you can test our online demo for the excel-like filtering and see that it works correctly in full screen mode:
Best Regards,
Konstantin Dikov
Telerik