RadImageGallery enabled Full Screen mode on Server-Side (C#)

13 posts, 1 answers
  1. Jon
    Jon avatar
    15 posts
    Member since:
    Nov 2015

    Posted 17 May Link to this post

    Is it possible to toggle Full Screen mode on the sever-side for the RadImageGallery control?

    I have a RadImageGallery (inside a RadAjaxPanel), based on a users permissions and other variables (defined on the server-side), I want to be able to toggle whether or not the Gallery is displayed in Full Screen initially or not.

     

    Thanks in advance!

  2. Jon
    Jon avatar
    15 posts
    Member since:
    Nov 2015

    Posted 17 May in reply to Jon Link to this post

    Also, the RadImageGallery may include ImageGalleryItem(s) (with images) and/or ImageGalleryTemplateItem(s) (with videos).
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 20 May Link to this post

    Hi Jon,

    You can achieve this only on client-side similar to this:
    http://docs.telerik.com/devtools/aspnet-ajax/controls/imagegallery/how-to/start-slideshow-automatically

    The method name in this case is called toggleFullScreen().

    Regards,
    Eyup
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  5. Jon
    Jon avatar
    15 posts
    Member since:
    Nov 2015

    Posted 20 May in reply to Eyup Link to this post

    Thank you Eyup, I appreciate your guidance.
  6. Jon
    Jon avatar
    15 posts
    Member since:
    Nov 2015

    Posted 20 May in reply to Eyup Link to this post

    Perhaps in a future release, more server-side control can be had for the RadImageGallery? ie: toggle full screen, obtain data about active image, etc. Seems this data is only available client side, which is unfortunate.
  7. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 25 May Link to this post

    Hi Jon,

    You can use the approach demonstrated in the following web site to achieve the "obtain data about active image" requirement:
    http://www.telerik.com/support/code-library/access-unique-datakeyvalue-and-delete-images-from-radimagegallery-bound-to-a-data-source

    In any case feel free to log these ideas as feature request in our improvements portal and our dev team may consider implementing it for the future releases:
    http://feedback.telerik.com/Project/108


    Regards,
    Eyup
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  8. Jon
    Jon avatar
    15 posts
    Member since:
    Nov 2015

    Posted 25 May in reply to Eyup Link to this post

    Thanks Eyup, will do!
  9. Jon
    Jon avatar
    15 posts
    Member since:
    Nov 2015

    Posted 25 May in reply to Eyup Link to this post

    FYI: When trying to call the method toggleFullScreen() i got the following error:

     

    'requestfullscreen' on 'element' api can only be initiated by a user gesture

     

    I am looking into a workaround now, considering this is a internal company site, we are fine with this force fullscreen on pageload approach.

  10. Kostadin
    Admin
    Kostadin avatar
    1713 posts

    Posted 30 May Link to this post

    Hello Jon,

    I am afraid you cannot workaround this issue because the error is thrown by the browser which does not allow enter a fullscreen by using a code. I would recommend you to check out the following forum thread which elaborate more on this matter and also search the web for more detail information.

    Regards,
    Kostadin
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  11. Jon
    Jon avatar
    15 posts
    Member since:
    Nov 2015

    Posted 31 May in reply to Kostadin Link to this post

    Thank you Kostadin, I have been doing research and have come to that same conclusion. My workaround is to call a web service from the client side to run a check of user parameters, then display a confirm button to continue in fullscreen. Once the user clicks 'OK' then it will load in fullscreen. Big picture, this is a better approach anyways.

     

    Thanks!

  12. Jon
    Jon avatar
    15 posts
    Member since:
    Nov 2015

    Posted 07 Jun in reply to Kostadin Link to this post

    Hi again, please let me know if I need to open a new post, as this issue is evolving).

     

    I have the Full Screen set to use the users click event. However, under a specific scenario, it will exit full screen mode prematurely. Here is the scenario:

    RadImageGallery loaded (via server-side) with the following items, in the following order:

    image (ImageGalleryItem)

    video (ImageGalleryTemplateItem, loaded from ITemplate)

    image (ImageGalleryItem)

    image (ImageGalleryItem)

    On page load, let's say user starts in non-FullScreen. User clicks Full Screen button, when user clicks next (to the video, for the first render) it exits FullScreen. How can I prevent this full screen exit?

     

    Here is the relevant code (I tried to attach a zipped sample project, but apparently I can only attach images):

     

    aspx:

            <telerik:RadImageGallery ID="PresentationView_RadImageGallery" CssClass="PresentationView_RadImageGallery" RenderMode="Auto" BackColor="Transparent" runat="server">
                <ImageAreaSettings NavigationMode="Button" />
                <ThumbnailsAreaSettings Mode="Thumbnails" />
                <ToolbarSettings ShowItemsCounter="true" ItemsCounterFormat="Slide {0} of {1}" />
                <ClientSettings AllowKeyboardNavigation="true">
                    <ClientEvents />
                </ClientSettings>
            </telerik:RadImageGallery>

     

    aspx.cs

            public class VideoTemplate : ITemplate {
                private readonly string _VideoFile;
                private readonly string _VideoTitle;
                private readonly string _PosterImage;

                public VideoTemplate(string VideoFile, string VideoTitle, string PosterImage) {
                    _VideoFile = VideoFile;
                    _VideoTitle = VideoTitle;
                    _PosterImage = PosterImage;
                }

                public void InstantiateIn(Control container) {
                    RadMediaPlayer player = new RadMediaPlayer() {
                        ID = "RadMediaPlayer1",
                        CssClass = "PresentationView_RadImageGallery",
                        Width = Unit.Pixel(700),
                        Height = Unit.Pixel(366),
                        StartVolume = 60,
                        RenderMode = RenderMode.Lightweight,
                        AutoPlay = false,
                        Title = _VideoTitle,
                        //Poster = _PosterImage,
                        Source = _VideoFile
                    };

                    player.Load += (s, a) => {
                        player.TitleBar.ShareButton.Visible = false;
                        player.ToolBar.FullScreenButton.Visible = false;
                        player.ToolBar.HDButton.Visible = false;
                        player.ToolBar.SubtitlesButton.Visible = false;
                        player.BackColor = Color.Transparent;
                    };

                    container.Controls.Add(player);
                }
            }

            protected override void OnInit(EventArgs e) {
                // Slide 1 - Image
                ImageGalleryItem igi1 = new ImageGalleryItem();
                igi1.Title = "Title 0";
                igi1.Description = "0";
                var igi1Path = "\\tmp\\1_1\\000ca185-e15e-4e40-a098-56efe52c1fbe\\0_5_6723e283-2a53-42e9-8c4d-9615a93fe32e.jpg";
                igi1.ImageUrl = igi1Path;
                igi1.ThumbnailUrl = igi1Path;
                PresentationView_RadImageGallery.Items.Add(igi1);

                // Slide 2 - Video
                ImageGalleryTemplateItem igti = new ImageGalleryTemplateItem();
                igti.Title = "Title 1";
                igti.Description = "1";
                igti.ThumbnailUrl = "\\tmp\\1_1\\000ca185-e15e-4e40-a098-56efe52c1fbe\\1_5_3dcfbcab-a72a-47da-abac-5c62831379e1_thumbnail_w.jpg";
                igti.ContentTemplate = new VideoTemplate("tmp\\1_1\\000ca185-e15e-4e40-a098-56efe52c1fbe\\1_5_3dcfbcab-a72a-47da-abac-5c62831379e1.mp4", igti.Title, igti.ThumbnailUrl);
                PresentationView_RadImageGallery.Items.Add(igti);

                // Slide 3 - Image
                ImageGalleryItem igi2 = new ImageGalleryItem();
                igi2.Title = "Title 2";
                igi2.Description = "2";
                var igi2Path = "\\tmp\\1_1\\000ca185-e15e-4e40-a098-56efe52c1fbe\\2_5_fe726b92-dabc-4bc3-9458-70eb3df42d5e.jpg";
                igi2.ImageUrl = igi2Path;
                igi2.ThumbnailUrl = igi2Path;
                PresentationView_RadImageGallery.Items.Add(igi2);

                // Slide 4 - Image
                ImageGalleryItem igi3 = new ImageGalleryItem();
                igi3.Title = "Title 3";
                igi3.Description = "3";
                var igi3Path = "\\tmp\\1_1\\000ca185-e15e-4e40-a098-56efe52c1fbe\\3_5_8b234313-4492-4376-aa33-9788ee6a768c.jpg";
                igi3.ImageUrl = igi3Path;
                igi3.ThumbnailUrl = igi3Path;
                PresentationView_RadImageGallery.Items.Add(igi3);

                PresentationView_RadImageGallery.DataBind();
            }
            
            protected void Page_Load(object sender, EventArgs e) {

            }

     

  13. Kostadin
    Admin
    Kostadin avatar
    1713 posts

    Posted 13 Jun Link to this post

    Hello Jon,

    In case you are using a template it will perform a postback when navigate through the ImageGallery items. I assume the code that you are using to enter a full screen might be executed which will automatically exit the full screen. I tried to replicate the issue in the following live example but I was unable to. Could you please check it out and let me know how it differs from your real setup. Keep in mind the toolbar in the example is hidden by the following CSS rule.
    <style type="text/css">
        .rigToolbar {
            display: none;
        }
    </style>


    Regards,
    Kostadin
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  14. Jon
    Jon avatar
    15 posts
    Member since:
    Nov 2015

    Posted 13 Jun in reply to Kostadin Link to this post

    Thank you for your reply. Whether the user automatically enters full screen mode on page load or not is based on whether certain conditions are met. I have been able to resolve this (if conditions = enter full screen) using a radconfirm asking the user 'Continue in Full Screen?' if they click ok, I use that click event to execute $(document.getElementsByClassName("rigFullScrButton")).trigger('click'); which then simulated clicking the full screen button in the display bar.

    However, I do not wish to hide the toolbar, in the event a user either (1) is not required to enter full screen on page load, but wants to enter full screen via the normal method or (2) if the user exits full screen, they can have the option to re-enter full screen if desired.

    The issue that I am having regarding exiting full screen if next item is a video, I have issued a Support ticket to Telerik (1042058), they agreed that this is a Bug (194056). Until this issue is resolved, I have hidden the Full Screen button only (RadImageGallery.ToolbarSettings.ShowFullScreenButton = false) and not using the radconfirm option on page load.

    Thanks!

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017