Add Grid as Carousel item, no refresh

[Alexander Kotik]

Hi,

I'm using the Blazor Carousel item to add different types of components like grid or charts. These components get real time data and updated automatically. 

Everything works like expected, but the first item in the carousel will not be updated. All other gets updated without problems. 

Thank you for your help.

Kind regards,

Alex

I add a sample project. 

@page "/"

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Navigations

<h3>TestPage</h3>

<div class="container">

<div class="row">

<SfButton CssClass="e-big-btn" @onclick="SetData" >Add Data</SfButton>

</div>

<div class="row mt-4">

<SfCarousel AutoPlay="false" ButtonsVisibility="CarouselButtonVisibility.Visible"

            >

<CarouselItem >

<div>

<GridTestPage @ref="ProcessingTable"/>

</div>

</CarouselItem>

<CarouselItem>

<div>

<GridTestPage @ref="ProcessingTable2"/>

</div>

</CarouselItem>

<CarouselItem>

<div>

<GridTestPage @ref="ProcessingTable3" />

</div>

</CarouselItem>

</SfCarousel>

</div>

</div>

@code {

private void SetData()

{

ProcessingTable.AddData();

ProcessingTable2.AddData();

ProcessingTable3.AddData();

}

public GridTestPage ProcessingTable { get; set; }

public GridTestPage ProcessingTable2 { get; set; }

public GridTestPage ProcessingTable3 { get; set; }

}

Attachment: SyncfusionBlazorApp1_79ebe0cb.zip

[LeoLavanya Dhanaraj]

Hi Alexander,

  

Greetings from Syncfusion support.

Based on the shared sample and details, we attempted to replicate the issue you mentioned regarding the first item in the Carousel not updating. Upon further validation, we found that the Carousel items are rendered properly, both during the initial load and after navigating through the items. We tested this scenario across different browsers, including Chrome, Edge, and Firefox, and also checked various screen resolutions. In these testing scenarios, we were unable to replicate the issue.

For your reference, we have included video footage of our testing.

To further validate your issue, we kindly request that you share clearer details and exact replication steps in the form of video footage. This information will help us assist you more effectively in finding a solution.

Your input will be invaluable in helping us understand your issue and provide a timely resolution.

Regards,

Leo Lavanya Dhanaraj

Attachment: Carousel_1f947ee0.zip

[Alexander Kotik]

Hello  Leo Lavanya Dhanaraj,

thank you for checking my sample. The first data is rendered properly, thats right. But you have to press the button "Add data" The second and third page is updating, but the first is not updating. 
I attached a video.

I hope that clarifies things a little.

Thank you for your help.

Kind regards,

Alex

Alex

Attachment: 1_f2b01ae8.zip

[Sivakumar ShunmugaSundaram]

Hi Alexander,

We were able to reproduce the issue where the first carousel slide doesn’t reflect dynamic changes while other slides work. This is related to how the Carousel hosts child components and how updates propagate when using child references. The recommended approach is:

• Lift the data source to the parent page.
• Pass it as a [Parameter] into each grid instance.
• Assign a unique ID per grid.

This approach ensures proper re-rendering and consistent updates across all slides, including the first one.

[TestPage.razor],

@page "/"

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Navigations

@using System.Collections.ObjectModel

@using SyncfusionBlazorApp1.Model

@using Syncfusion.Blazor.Grids

<h3>TestPage</h3>

<div class="container">

      <div class="row">

            <SfButton CssClass="e-big-btn" @onclick="SetData">Add Data</SfButton>

      </div>

      <div class="row mt-4">

            <SfCarousel AutoPlay="false" ButtonsVisibility="CarouselButtonVisibility.Visible">

                  <CarouselItem>

                        <div>

                              <GridTestPage @ref="ProcessingTable" ComponentID="ProcessingTable" DataSource="@_dataSource" />

                        </div>

                  </CarouselItem>

                  <CarouselItem>

                        <div>

                              <GridTestPage @ref="ProcessingTable2" ComponentID="ProcessingTable2" DataSource="@_dataSource" />

                        </div>

                  </CarouselItem>

                  <CarouselItem>

                        <div>

                              <GridTestPage @ref="ProcessingTable3" ComponentID="ProcessingTable3" DataSource="@_dataSource" />

                        </div>

                  </CarouselItem>

            </SfCarousel>

      </div>

</div>

@code {

      public ObservableCollection<SoundingData> _dataSource { get; set; } = new ObservableCollection<SoundingData>();

      protected override void OnInitialized()

      {

            _dataSource =

            [

                  new SoundingData()

                  {

                        Temperature = 15,

                        Humidity = 80,

                        Pressure = 999,

                        Time = 1

                  }

            ];

      }

      private void SetData()

      {

            _dataSource.Add(new SoundingData()

            {

                  Temperature = 15,

                  Humidity = 80,

                  Pressure = 999,

                  Time = 1

            });

      }

}

[GridTestPage.razor],

@page "/grid-test"

@using System.Collections.ObjectModel

@using SyncfusionBlazorApp1.Model

@using Syncfusion.Blazor.Grids

<h3>GridTestPage</h3>

<div class="container">

      <SfGrid @ref="SoundingGrid" ID="@ComponentID" DataSource="@DataSource" EnableStickyHeader="true"

                  Height="400" AllowPaging="true">

            <GridPageSettings PageSize="100" />

            <GridEditSettings NewRowPosition="NewRowPosition.Top"></GridEditSettings>

            <GridColumns>

                  <GridColumn Field="@nameof(SoundingData.Time)" HeaderText="Time" />

                  <GridColumn Field="@nameof(SoundingData.Pressure)" Format="0.0" HeaderText="Pressure" />

                  <GridColumn Field="@nameof(SoundingData.Temperature)" Format="0.00" HeaderText="Temperature" />

                  <GridColumn Field="@nameof(SoundingData.Humidity)" Format="0" HeaderText="Humidity" />

            </GridColumns>

      </SfGrid>

</div>

@code {

      [Parameter]

      public string ComponentID { get; set; } = string.Empty;

      [Parameter]

      public ObservableCollection<SoundingData> DataSource { get; set; } = new ObservableCollection<SoundingData>();

      public SfGrid<SoundingData> SoundingGrid { get; set; }

}

Sample: Attached as zip file.

Please review the changes and get back to us if you need any further assistance.

Regards,

Sivakumar S

 

Attachment: sample_cbf62453.zip