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

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

12 Answers 217 Views
ImageGallery
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 17 May 2016, 03:51 PM

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!

12 Answers, 1 is accepted

Sort by
0
Jon
Top achievements
Rank 1
answered on 17 May 2016, 04:36 PM
Also, the RadImageGallery may include ImageGalleryItem(s) (with images) and/or ImageGalleryTemplateItem(s) (with videos).
0
Accepted
Eyup
Telerik team
answered on 20 May 2016, 11:39 AM
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.
0
Jon
Top achievements
Rank 1
answered on 20 May 2016, 03:09 PM
Thank you Eyup, I appreciate your guidance.
0
Jon
Top achievements
Rank 1
answered on 20 May 2016, 03:11 PM
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.
0
Eyup
Telerik team
answered on 25 May 2016, 11:01 AM
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.
0
Jon
Top achievements
Rank 1
answered on 25 May 2016, 02:36 PM
Thanks Eyup, will do!
0
Jon
Top achievements
Rank 1
answered on 25 May 2016, 02:39 PM

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.

0
Kostadin
Telerik team
answered on 30 May 2016, 12:31 PM
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.
0
Jon
Top achievements
Rank 1
answered on 31 May 2016, 04:02 PM

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!

0
Jon
Top achievements
Rank 1
answered on 07 Jun 2016, 05:19 PM

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) {

        }

 

0
Kostadin
Telerik team
answered on 13 Jun 2016, 05:42 AM
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.
0
Jon
Top achievements
Rank 1
answered on 13 Jun 2016, 03:07 PM

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!

Tags
ImageGallery
Asked by
Jon
Top achievements
Rank 1
Answers by
Jon
Top achievements
Rank 1
Eyup
Telerik team
Kostadin
Telerik team
Share this question
or