Adding Images Dynamically From jQuery

2 posts, 0 answers
  1. Mathew
    Mathew avatar
    4 posts
    Member since:
    May 2017

    Posted 12 Nov 2018 Link to this post

    I have a RadImageGallery that appears in a boostrap modal when a button is clicked. I want to load different sets of images based on the project that was selected.

     

    <form id="form1" runat="server">
      <telerik:RadScriptManager runat="server" ID="RadScriptManager1" EnableEmbeddedjQuery="false" />
        <div class="col-lg-12">
          <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel2">
            <h2 class="Heading">Image Viewer</h2>
            <telerik:RadImageGallery RenderMode="Lightweight" runat="server" ID="ImageViewerGallery" Height="473px" DisplayAreaMode="Image">
              <Items></Items>
            </telerik:RadImageGallery>
          </telerik:RadAjaxPanel>
        </div>
    </form>

    In jQuery, whenever I call 

    var imageGalleryItems = $find('<%=ImageViewerGallery.ClientID%>').get_items();

    I get an error message "Cannot read property 'get_items' of null.

    Any ideas?

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    617 posts

    Posted 15 Nov 2018 Link to this post

    Hello Mathew,

    Most probably you are trying to access the ImageGallery before it is initialized. Please check if using the Sys.Application.Load event would fix the issue.
    <telerik:RadCodeBlock runat="server">
        <script>
            function pageLoadHandler() {
     
                var imageGalleryItems = $find('<%=ImageViewerGallery.ClientID%>').get_items();
                
                // Sys.Application.remove_load(pageLoadHandler); 
            }
            Sys.Application.add_load(pageLoadHandler);
     
        </script>
    </telerik:RadCodeBlock>

    Regards,
    Peter Milchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top