Current filter:
                                You should refresh the page.
                                  • I am trying to customize the number of items initially loaded in an ImageGallery - however, it seems like 16 items are always loaded, even when I explicitly set the number of rows and columns.  Here is some example code:

                                    @Html.DevExpress().ImageGallery(f => { f.Name = "EventGallery"; f.CallbackRouteValues = new { Controller = C.ControllerName, Action = "EventDisplayGallery", MasterID = MasterID }; f.ImageUrlField = "Address"; f.PagerSettings.EndlessPagingMode = DataViewEndlessPagingMode.OnClick; f.Layout = DevExpress.Web.Layout.Breakpoints; f.SettingsBreakpointsLayout.ItemsPerPage = 30; f.SettingsBreakpointsLayout.ItemsPerRow = 6; f.SettingsBreakpointsLayout.Breakpoints.Add( new ImageGalleryBreakpoint(BreakpointsLayoutDeviceSizes.Medium, 4), new ImageGalleryBreakpoint(BreakpointsLayoutDeviceSizes.Small, 3)); }).Bind(Files).GetHtml()

                                    See attached for a screenshot of what is looks like.

                                1 Solution

                                Creation Date Importance Sort by

                                Hi William,
                                According to your settings, your ImageGallery should display 30 items on a page, and each row should have 3 items:

                                f.SettingsBreakpointsLayout.ItemsPerPage = 30; f.SettingsBreakpointsLayout.ItemsPerRow = 6;

                                Since your data source contains less than 30 images, ImageGallery shows them all at once. Try to set ItemsPerPage to a smaller value to solve the problem.

                                • William Yeack 09.16.2019

                                  Hi Helen,
                                  My datasource contains hundreds of items.  Let me restate it.
                                  No matter what i do, it seems like my Gallery only shows 16 items initially, and then 16 more items with each click of the EndlessPaging buttong.

                                  Check out this live example:

                                  There are hundreds of images there.  Here is how I create it:

                                  @model IProvider @Html.CreateGallery(C, Model.Files.OrderBy(x => x.DateCreated).ToArray(), "EventDisplayGallery", x => { x.EmptyDataText = "No photos have been added yet."; x.Layout = DevExpress.Web.Layout.Breakpoints; x.SettingsBreakpointsLayout.ItemsPerPage = 30; x.SettingsBreakpointsLayout.ItemsPerRow = 6; })

                                  Here is the other relevant parts:

                                  #region References using DevExpress.Web.Mvc.UI; using DevExpress.Web.Mvc; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; #endregion namespace MBZ.Core { public static class GalleryExtensions { public static MvcHtmlString CreateGallery<T>( this HtmlHelper Source, IPageController C, T[] Files, string BaseAction, Action<GalleryControl> Customization = null) where T : IFile { var Factory = Source.DevExpress(); var Configuration = new GalleryControl(Source, C, BaseAction); if (Customization != null) { Customization(Configuration); } //List<File> Files = Source.ViewData.Model.Files.ToList(); return Factory.ImageGallery(Configuration).Bind(Files).GetHtml(); } } }


                                  public class GalleryControl : ImageGallerySettings { #region Fields public HtmlHelper Html; public IPageController C; public string Base; #endregion #region Constructor public GalleryControl(HtmlHelper Html, IPageController C, string Base) { this.Html = Html; this.Base = Base; Name = "Gallery"; int MasterID = (int)Html.ViewData["PageMaster"]; CallbackRouteValues = new { Controller = C.ControllerName, Action = Base, MasterID = MasterID }; // Since the thumbnails will be specified explicitly, I do not believe that this needs to be set. ImageCacheFolder = U.Location.AssetCache.Filesystem; SettingsFullscreenViewer.ShowTextArea = true; // What does this do? PagerSettings.EndlessPagingMode = DataViewEndlessPagingMode.OnClick; SettingsFullscreenViewer.NavigationBarVisibility = ElementVisibilityMode.Faded; SettingsFullscreenViewer.NavigationButtonVisibility = ElementVisibilityMode.Faded; ThumbnailWidth = Unit.Pixel(120); ThumbnailHeight = Unit.Pixel(120); ImageUrlField = "Address"; Images.LoadingPanel.Assign(U.Configuration.Loader.Image()); Styles.LoadingPanel.Assign(U.Configuration.Loader.Style()); Styles.Item.AddClass("gallery-item"); Styles.Pager.AddClass("gallery-pager"); StylesFullscreenViewer.Item.AddClass("gallery-fullscreen-item"); StylesFullscreenViewerNavigationBar.NavigationBar.AddClass("gallery-fullscreen-navigation"); StylesFullscreenViewerNavigationBar.Thumbnail.AddClass("gallery-fullscreen-thumbnail"); // When showing fullscreen, we need to disable scrolling on body, any layout-scroll items and hide the Navigation and Menu elements. // .layout-menu // .layout-navigation // add .gallery-fullscreen to body. // This will make .layout-menu and .layout-navigation hide, ClientSideEvents.BeginCallback = "MBZ.Gallery.OnCallbackBegin"; ClientSideEvents.EndCallback = "MBZ.Gallery.OnCallbackEnd"; ClientSideEvents.FullscreenViewerShowing = "MBZ.Gallery.OnFullscreenOpen"; SettingsFullscreenViewer.NavigationBarVisibility = ElementVisibilityMode.Always; StylesFullscreenViewer.CloseButton.AddClass("btn-close"); } #endregion }
                                • Helen (DevExpress Support) 09.17.2019

                                  I don't see any problems in this code. I've also checked it on my side and see that it works correctly: check the video.
                                  When I checked the page size with the client-side GetPageSize method on your page, it returned 16 for some reason. In my test project, it always returns 30, as expected.
                                  Currently, I have two assumptions. Perhaps, the initial pager settings are overridden somewhere or your Controller code does not return all images at once. Please check this on your side in debugger.
                                  If this does not help, modify my test project to show the problem and send it back to me for further research.

                                • William Yeack 09.17.2019

                                  So I looked at your code and it is indeed working as expected.  As I tried to figure out the difference, I thought that maybe it was my custom theme; since I have found in the past that anything set in the custom theme is not over-ridable in code - and indeed, the Layout was set to Flow and the ItemsPerPage was set to 16 - setting those to their default values so that I could specify it in code has fixed the issue.

                                  I'm not sure how it works on the back end but I REALLY think that it would make a lot of sense for anything set in a custom theme to just be the default value and for anything that you do in code to override it.  We've had 15-20 headaches like this where something was set in our custom theme and when something tried to set it to something more specific in code it doesn't make any difference.  We are now setting alot of stuff in our theme back to their default values and setting our chosen defaults in code to make things a little easier to manage.  At the very least it would be great to have an error message popup if you try to set something that has become readonly because it has been set in a custom theme.

                                • Helen (DevExpress Support) 09.18.2019

                                  Hello William,
                                  Thank you for the clarification. That behavior occurs due to the ASP.NET theming mechanism specifics. To avoid using settings specified at a theme level, you can use one of the solutions from the ASP.NET - Why some control settings are not in effect if the Theme property is used article.