Problems with Rotator Databinding

[Corando]

Greeting,

I want to use the rotator to display images from folders in my server. The images should be displayed once the user captures the name of the folder in a textbox and presses a button. 

I have placed the rotator on the web form, but when loaded initially, I get an error displaying that the DataSource/Items must not be empty at initial load since Rotator is generated from dataSource/Items

¿How can I fix this error and properly display the images on button click? 

Thank you in advance for your help

This is the html rotator code

                            <div class="row margin-bottom">

                                <ej:Rotator ID="rotInicio" runat="server"

                                    SlideWidth="100%"

                                    FrameSpace="0px"

                                    DisplayItemCount="1"

                                    SlideHeight="300"

                                    NavigateSteps="1"

                                    EnableResize="false"

                                    ShowPager="true"

                                    Enabled="true"

                                    ShowCaption="true"

                                    AllowKeyboardNavigation="true"

                                    ShowPlayButton="true"

                                    AnimationType="slide">

                                </ej:Rotator>

                            </div>

This is the code behind

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        If hfCargar.Value = 0 Then

            Dim data As List(Of RotatorData) = New List(Of RotatorData)()

            data.Add(New RotatorData With {

                 .Caption = "",

                 .Url = ""

             })

        Else

            btnFotos_Click(sender, e)

        End If

    End Sub

    <Serializable>

    Public Class RotatorData

        Public Property Caption As String

        Public Property Url As String

    End Class

    Private Sub btnFotos_Click(sender As Object, e As EventArgs) Handles btnFotos.Click

        If String.IsNullOrEmpty(txtOrden.Text) Then

            Response.Write("<script>alert('Favor de capturar la orden');</script>")

            Exit Sub

        End If

        hfCargar.Value = 1

        Try

            Dim filePaths As String() = Directory.GetFiles(Server.MapPath("~/Subidas/" & txtOrden.Text & "/Imagenes/"))

            Dim files As New List(Of ListItem)()

            Dim data As List(Of RotatorData) = New List(Of RotatorData)()

            For Each filePath As String In filePaths

                Dim fileName As String = Path.GetFileName(filePath)

                data.Add(New RotatorData With {

                     .Caption = fileName,

                     .Url = "~/Subidas/" & txtOrden.Text & "/Imagenes/" + fileName

                 })

            Next

            Me.rotInicio.DataSource = data

        Catch ex As Exception

            Exit Try

        End Try

    End Sub

[Sharon Sanchez Selvaraj]

Hi Corando, 

 

Greetings from Syncfusion support. 

 

We have checked with your requirement in Rotator. By default, when there are no items to be rendered, we have displayed the message to address that it is mandatory to include images in the Rotator. However, you can overcome this scenario by rendering atleast a single data to the Rotator initially. Else, if you expect the Rotator to be hidden initially, you can hide the visibility and enable it on button click when images are rendered. 

 

Refer to the code snippet: 

 

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load 

        Dim data As List(Of RotatorData) = New List(Of RotatorData)() 

 

        data.Add(New RotatorData With 

                 {.Caption = "", 

                 .Url = "" 

                 }) 

        Me.rotInicio.DataSource = data 

        Me.rotInicio.Visible = False 

 

 

    End Sub 

 

  Private Sub btnFotos_Click(sender As Object, e As EventArgs) Handles btnFotos.Click 

………………. 

……………… 

   Me.rotInicio.Visible = True 

   Me.rotInicio.DataSource = data 

………………. 

 

    End Sub 

 

Refer to the sample where the given scenario is addressed. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Rotator2115974375 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Sharon Sanchez S. 

[Corando]

Thank you very much for your reply, I applied your suggestion, however, now I get another error, when trying to display the images, I see this error on the Developer Console in Google Chrome. 

Uncaught TypeError: Cannot read properties of undefined (reading 'getElementsByTagName')

    at Object._setCaptionText (ScriptResource.axd:10)

    at Object._createCaption (ScriptResource.axd:10)

    at Object._render (ScriptResource.axd:10)

    at Object._init (ScriptResource.axd:10)

    at new <anonymous> (ScriptResource.axd:10)

    at w.fn.init.n.fn.<computed> [as ejRotator] (ScriptResource.axd:10)

    at Consulta.aspx:875

[Sharon Sanchez Selvaraj]

Hi Corando, 

 

Thanks for the details. 

 

We have rechecked our previously shared sample to display Rotator on button click. But we haven’t received any console errors on the same. 

 

Refer to the video attachment: 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Rotator_Video-841802755 

 

Please share the EJ1 product version used in your application and if possible, please modify the sample shared in the previous update to replicate the exact issue. Also confirm whether LoadEJResourcesFromAssembly is set as true in the web.config of your application. 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Sharon Sanchez S. 

[Corando]

Thank you for your response,

The  EJ1 Product version I'm using is: 19.2460.0.44, I have checked that the LoadEJResourcesFromAssembly is true in webconfig, but I still get the error. 

I modified the code as per your example, but still get the error on the Console. 

Thanks for your help.

HTML:

                            <div class="row margin-bottom">

                                <ej:Rotator ID="rotInicio" runat="server"

                                    SlideWidth="100%"

                                    FrameSpace="0px"

                                    DisplayItemCount="1"

                                    SlideHeight="300"

                                    NavigateSteps="1"

                                    EnableResize="false"

                                    ShowPager="true"

                                    Enabled="true"

                                    ShowCaption="true"

                                    AllowKeyboardNavigation="true"

                                    ShowPlayButton="true" OnDataBound="rotInicio_DataBound"

                                    AnimationType="slide" DataCaptionField="Caption"

                                    DataUrlField="Url">

                                </ej:Rotator>

                            </div>

Code Behind

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        Dim data As List(Of RotatorData) = New List(Of RotatorData)()

        data.Add(New RotatorData With

             {.Caption = "",

             .Url = ""

             })

        Me.rotInicio.DataSource = data

        Me.rotInicio.Visible = False

    End Sub

    Public Class RotatorData

        Public Property Caption As String

        Public Property Url As String

    End Class

    Protected Sub rotInicio_Init(sender As Object, e As EventArgs)

    End Sub

    Protected Sub rotInicio_DataBound(sender As Object, e As EventArgs)

    End Sub

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

        Dim data As List(Of RotatorData) = New List(Of RotatorData)()

        data.Add(New RotatorData With {

                     .Caption = "Dog",

                     .Url = "https://picsum.photos/id/237/200/300"

                 })

        Me.rotInicio.Visible = True

        Me.rotInicio.DataSource = data

    End Sub

ScriptResource.axd?d=8fqu4iz9PFArm_C10jQ2AU56THPuGb2pllsDiOM67TYUJsz9bUkruhNdWvLS66osr7SaLsv9jYWhbLzBSBuCzFNDZbdk0odxZx8qQMCH69e9-ZsF2R-tqyA-CyU37GNjbhw40KYY25N-N_Rk7MTkIvvtwN3fd4xn1zfiw9DqVGGThmoLtBoq9qobbEbVZCvBun3UBYzpHWGuTs2dz3magg2&t=7de4137:10 Uncaught TypeError: Cannot read properties of undefined (reading 'getElementsByTagName')

    at Object._setCaptionText (ScriptResource.axd?d=8fqu4iz9PFArm_C10jQ2AU56THPuGb2pllsDiOM67TYUJsz9bUkruhNdWvLS66osr7SaLsv9jYWhbLzBSBuCzFNDZbdk0odxZx8qQMCH69e9-ZsF2R-tqyA-CyU37GNjbhw40KYY25N-N_Rk7MTkIvvtwN3fd4xn1zfiw9DqVGGThmoLtBoq9qobbEbVZCvBun3UBYzpHWGuTs2dz3magg2&t=7de4137:10)

    at Object._createCaption (ScriptResource.axd?d=8fqu4iz9PFArm_C10jQ2AU56THPuGb2pllsDiOM67TYUJsz9bUkruhNdWvLS66osr7SaLsv9jYWhbLzBSBuCzFNDZbdk0odxZx8qQMCH69e9-ZsF2R-tqyA-CyU37GNjbhw40KYY25N-N_Rk7MTkIvvtwN3fd4xn1zfiw9DqVGGThmoLtBoq9qobbEbVZCvBun3UBYzpHWGuTs2dz3magg2&t=7de4137:10)

    at Object._render (ScriptResource.axd?d=8fqu4iz9PFArm_C10jQ2AU56THPuGb2pllsDiOM67TYUJsz9bUkruhNdWvLS66osr7SaLsv9jYWhbLzBSBuCzFNDZbdk0odxZx8qQMCH69e9-ZsF2R-tqyA-CyU37GNjbhw40KYY25N-N_Rk7MTkIvvtwN3fd4xn1zfiw9DqVGGThmoLtBoq9qobbEbVZCvBun3UBYzpHWGuTs2dz3magg2&t=7de4137:10)

    at Object._init (ScriptResource.axd?d=8fqu4iz9PFArm_C10jQ2AU56THPuGb2pllsDiOM67TYUJsz9bUkruhNdWvLS66osr7SaLsv9jYWhbLzBSBuCzFNDZbdk0odxZx8qQMCH69e9-ZsF2R-tqyA-CyU37GNjbhw40KYY25N-N_Rk7MTkIvvtwN3fd4xn1zfiw9DqVGGThmoLtBoq9qobbEbVZCvBun3UBYzpHWGuTs2dz3magg2&t=7de4137:10)

    at new <anonymous> (ScriptResource.axd?d=W29v5PwbhtY-h3cWIPLmMfjbAbyFHEC1XPmK5ieibhTJffZ4TG3-8cud4QC1dDgzG9T_y-J6s7Ou1JAy-GDf7wESdDGw-8yetOdlbVkBQQ3xyeXSEWEYQY2pWvhvoQp0LFot3aVpZneXycz4PMqdqnFannwWj8-e9uNYFg1XkuuFx2SlE3hWcRlvl_cC4fMkaI-68Ak0Z10EnQb1VIooNA2&t=7de4137:10)

    at w.fn.init.n.fn.<computed> [as ejRotator] (ScriptResource.axd?d=W29v5PwbhtY-h3cWIPLmMfjbAbyFHEC1XPmK5ieibhTJffZ4TG3-8cud4QC1dDgzG9T_y-J6s7Ou1JAy-GDf7wESdDGw-8yetOdlbVkBQQ3xyeXSEWEYQY2pWvhvoQp0LFot3aVpZneXycz4PMqdqnFannwWj8-e9uNYFg1XkuuFx2SlE3hWcRlvl_cC4fMkaI-68Ak0Z10EnQb1VIooNA2&t=7de4137:10)

    at Consulta.aspx:670

[Keerthana Rajendran]

Hi Corando, 

 

Sorry for the inconvenience. 

 

We checked the shared code in another Asp.Net web application with LoadEJResourcesFromAssembly as true as shown below. But still, we are unable to replicate the issue from our end and the Rotator control is rendered without any errors.  

 

 

 

Please refer to the below screenshot where the Rotator is rendered without any errors in 19.2.0.44 version. 

 

 

 

We have attached a sample in the following link for your reference. 

 

https://www.syncfusion.com/downloads/support/forum/170686/ze/Rotator-19_2_441614175669 

 

Kindly modify the above sample to replicate the error, so that we can check and serve you better. 

 

Regards, 

Keerthana R.