ImageGallery hanging on image transistion

12 posts, 0 answers
  1. Chase
    Chase avatar
    12 posts
    Member since:
    Mar 2014

    Posted 04 Sep 2014 Link to this post

    I have a pretty basic image gallery right now, using the following code:

    <telerik:RadImageGallery runat="server" Width="300px" Height="300px" LoopItems="true" ID="rigFeaturedNews" >
        <ImageAreaSettings Width="300px" Height="300px" />
        <ToolbarSettings ShowFullScreenButton="false" ShowSlideshowButton="false" ShowThumbnailsToggleButton="false" />
    </telerik:RadImageGallery>

    I have added two images to the gallery using code behind. On loading the page, the first image displays just fine. At the bottom, the thumbnails for both images are displayed. However, when I click the "next" button, or click on the thumbnail for the second picture, the loading spinner pops up, and the image grays, but the second image never loads.

    Any idea what could be causing this?
  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 09 Sep 2014 Link to this post

    Hi Chase,

    The presented issue is rather strange and does not appear in a simple test application on our end. I suppose that some error appears on the page and this is preventing the image from loading.
    Therefore could you please inspect your server response and verify if any errors appear on the page?

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chase
    Chase avatar
    12 posts
    Member since:
    Mar 2014

    Posted 11 Sep 2014 Link to this post

    Viewing the console via Google Chrome shows no errors on the page, and in debug mode in Visual Studio I'm not getting any exceptions or errors.

    If it makes a difference - this ImageGallery is inside of a DotNetNuke module.
  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 16 Sep 2014 Link to this post

    Hi Chase,

    Unfortunately the RadControls are no longer supported in DotNetNuke and we no longer release specific package for DNN implementation. We no longer test our controls in DNN platform and could no be completely sure what is causing the issue.
    I would suggest you to test the same scenario put of DNN and see how it goes.

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Chase
    Chase avatar
    12 posts
    Member since:
    Mar 2014

    Posted 18 Sep 2014 Link to this post

    Good to know about DNN. 

    I pulled the RadImageGallery out into its own project and put it as the only control on a Web Forms page. I'm having the same issue - except now the spinner isn't displaying either. The thumbnails are loading correctly, and the caption text is loading correctly.

    Here's the way I'm setting this in the code behind, maybe that's the issue:

    foreach (Article article in articles)
    {
            ImageGalleryItem articleItem = new ImageGalleryItem();
            articleItem.Description = article.ArticleIntro;
     
            articleItem.ImageDataValue = article.ArticleImageBytes.ToArray();
     
            rigFeaturedNews.Items.Add(articleItem);
     }

    The "article.ArticleImageBytes()" field is pulled from a database, where we have images stored in binary format.

    The first image is loading correctly.
  7. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 23 Sep 2014 Link to this post

    Hello Chase,

    Could you please try to pass the binary image form the DB using the RadImageGallery's NeedDataSource event as shown in this online demo and verify how it goes?


    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Chase
    Chase avatar
    12 posts
    Member since:
    Mar 2014

    Posted 23 Sep 2014 Link to this post

    Maria - 

    I changed my code to use the NeedDataSource event, using a DataTable as shown in the online demo. However, I am still having the exact same issue; the first image loads, and the thumbnails load correctly, but the main image doesn't change when clicking next. It should be noted that the description field and title change correctly; it is just the image that remains static.
  9. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 26 Sep 2014 Link to this post

    Hi Chase,

    In case the provided suggestion do not help I would kindly ask you to send us the entire page markup as well as the related cod behind. Thus we can try to recreate the same scenario on our side and see if we will be able to isolate the root cause of the issue.


    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  10. Chase
    Chase avatar
    12 posts
    Member since:
    Mar 2014

    Posted 26 Sep 2014 Link to this post

    Here is the markup:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <telerik:RadScriptManager runat="server" />
    <telerik:RadImageGallery runat="server" Width="970px" Height="400px" OnNeedDataSource="rigFeaturedNews_NeedDataSource" DataDescriptionField="ArticleIntro"
        DataImageField="ArticlePreviewImage" DataTitleField="ArticleTitle" LoopItems="true" ID="rigFeaturedNews" >
        <ToolbarSettings ShowFullScreenButton="false" ShowSlideshowButton="false" ShowThumbnailsToggleButton="false" />
        <ThumbnailsAreaSettings Mode="ImageSliderPreview" />
    </telerik:RadImageGallery>
     
    </body>
    </html>


    and the code behind:

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.SqlClient;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
     
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
             
        }
     
        private static DataTable getAllFeaturedArticlesAsDataTable()
        {
            LSCollegeNewsDataContext newsContext = new LSCollegeNewsDataContext();
     
            var featured = (from a in newsContext.Articles
                            where a.ArticleIsFeatured == true
                            select new { a.ArticlePreviewImage, a.ArticleIntro, a.ArticleTitle });
     
            return ToDataTable(newsContext, featured);
        }
     
        private static DataTable ToDataTable(System.Data.Linq.DataContext ctx, object query)
        {
            if (query == null)
            {
                throw new ArgumentNullException("query");
            }
     
            IDbCommand cmd = ctx.GetCommand(query as IQueryable);
            SqlDataAdapter adapter = new SqlDataAdapter();
            adapter.SelectCommand = (SqlCommand)cmd;
            DataTable dt = new DataTable("sd");
     
            try
            {
                cmd.Connection.Open();
                adapter.FillSchema(dt, SchemaType.Source);
                adapter.Fill(dt);
            }
            finally
            {
                cmd.Connection.Close();
            }
            return dt;
        }
     
        protected void rigFeaturedNews_NeedDataSource(object sender, ImageGalleryNeedDataSourceEventArgs e)
        {
            rigFeaturedNews.DataSource = new DataView(getAllFeaturedArticlesAsDataTable());
        }
    }
  11. Chase
    Chase avatar
    12 posts
    Member since:
    Mar 2014

    Posted 26 Sep 2014 Link to this post

    Additionally, this morning I began getting javascript errors on the page - Uncaught ReferenceError: WebForm_DoCallback is not defined.
  12. Chase
    Chase avatar
    12 posts
    Member since:
    Mar 2014

    Posted 30 Sep 2014 Link to this post

    So I got it working - for some reason using a list as a DataSource in the NeedDataSource event handler worked :

    var featured = from a in newsContext.Articles
                               where a.ArticleIsFeatured == true
                               select new
                               {
                                   a.ArticleIntro,
                                   ArticlePreviewImage = a.ArticlePreviewImage.ToArray(),
                                   ArticleImage = a.ArticleImage.ToArray(),
                                   a.ArticleTitle,
                               };
     
                rigFeaturedNews.DataSource = featured.ToList();

    A little bizarre but glad it's working. Thanks!
  13. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 01 Oct 2014 Link to this post

    Hi Chase,

    I'm glad that you were able to find a fix on your end. However, we will continue to research this case locally and will get back to you with any findings on the matter.

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

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