Expander does not resize if its content changes size

Question

Hi there, I am using an SfExpander in a case where it contains a StackLayout which is bound to a list. When the list changes the StackLayout updates but the expander does not. The MAUI Community Toolkit expander does expand correctly but is not as nice as the SyncFusion one. There is a property on the SfExpander - DynamicSizeMode Property that maybe intended for this use case but this is not exposed.

thanks,

Martin

Suthi Yuvaraj · Answer

Hi Martin,We have reviewed your requirements and would like to inform you about the following:In Xamarin.Forms, Layout calls not initiated for Parent views when updating content of child views on-demand, so SfExpander is not updated properly for runtime changes. To address this, initiated the layout calls using MeasureInvalidated event of child views based on "DynamicSizeMode" API.  However, in MAUI, layout calls are worked as expected for runtime changes, and thus, we did not include theDynamicSizeMode API in our .NET MAUI SfExpander. We have also created a sample based on your requirements. In the sample, a StackLayout with BindableLayout.ItemsSource is loaded inside an Expander. On the Android platform, the collection and size are updated correctly when insert/remove items on-demand. However, on the Windows platform, the items update only after interaction with the Expander, since Layout calls are not passed to SfExpander from Stacklayout in Windows platform. Could you please confirm if you are experiencing the same issue? We are currently investigating the root cause and will work to resolve the issue as soon as possible.Please let us know if you have any concerns.Regards,Suthi Yuvaraj.Attachment: ExpanderForum_f4ddfdcb.zip

Suthi Yuvaraj · Answer

Martin ,

As mentioned earlier, on the Windows platform, the items update only after interaction with the Expander, since Layout calls are not passed to SfExpander from Stacklayout in Windows platform.Hence we have updated the expander when the collection change which will update the height properly . Please refer the below sample and code snippet for more reference.

Code snippet:

private void InboxInfo_CollectionChanged(object? sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)

{

if(e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Add)

{

(Expander as IView).InvalidateMeasure();

}

Please let us know if you have any concern.`

Attachment: ExpanderForum_d412cce6.zip

Oleksandr Kovalov · Answer

Hello

Suthi Yuvaraj

,I'm sorry, your solution is specific to sfListView and Stacklayout. And is there an option to automatically increase/decrease the height sfExpanded inside of which the sfDataGrid .In this case, the height of Content has become and does not change: 300 px. And when the number of rows exceeds 300 px, scrolling appears.Thanks, Aleks

Jayashree Ravishankar · Answer

Hi Oleksandr Kovalov, We are currently
investigating your query with SfDataGrid . We will provide further details
on or before October 07,2024. we appreciate your patience until then. Regards,Jayashree

Jayashree Ravishankar · Answer

Hi Oleksandr Kovalov,When adding a
ListView or DataGrid inside the Expander content, the DataGrid is laid out with
an infinite height. In such cases, the HeightRequest for the DataGrid is set to
300. To resolve this issue, we recommend setting the HeightRequest for the
DataGrid in the Expanded event and resetting it in the Collapsing event. For
dynamic changes, update the HeightRequest in the CollectionChanged event of the
DataGrid's view.Since the
HeightRequest is being set for the DataGrid, you should place the SfExpander
inside a ScrollView to ensure the content remains scrollable.Please refer the
following code snippet:

public partial class MainPage : ContentPage
   {
       SfDataGrid? dataGrid1;
       Syncfusion.Maui.DataGrid.VisualContainer
  visualContainer1;
       public MainPage()
       {
           InitializeComponent();
   
           this.dataGrid1 = Expander1!.Content
  as SfDataGrid;
           visualContainer1 =
  this.dataGrid1!.GetVisualContainer();
           this.dataGrid1!.ViewCreated +=
  DataGrid_ViewCreated1;
          
       }
   
       private void
  DataGrid_ViewCreated1(object? sender, EventArgs e)
       {
          
  this.dataGrid1!.View!.CollectionChanged += View_CollectionChanged1;
       }
     
       private void
  View_CollectionChanged1(object? sender,
  System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
       {
           dataGrid1!.HeightRequest =
  visualContainer1.ExtendedHeight;
       }
      
       private void Button_Clicked(object
  sender, EventArgs e)
       {
           vm.OrderInfoCollection.Add(new
  OrderInfo(count.ToString(), "Martin King", "Spain",
  "BOLID", "Madrid"));
           count++;
       }
   
       private void Expander_Expanded(object
  sender, ExpandedAndCollapsedEventArgs e)
       {
              dataGrid1!.HeightRequest =
  visualContainer1.ExtendedHeight;       
  
       }
   
       private void Expander_Collapsing(object
  sender, ExpandingAndCollapsingEventArgs e)
       {
              dataGrid1!.HeightRequest = -1;
       }
   }

We have attached the
workable sample and video for your reference , please have look at the sample
and let us know if you have any other queries.Regards,JayashreeAttachment: ExpanderForum_d1a10d5c.zip

Oleksandr Kovalov · Answer

Thanks

Jayashree,There is logic in this. But in your example, when the count of items is less than or equal to 5 (most likely the height is less than 300 px) it leads to an error and the height does not change. public void GenerateOrders(){    orderInfo.Add(new OrderInfo("1001", "Maria Anders", "Germany", "ALFKI", "Berlin"));    orderInfo.Add(new OrderInfo("1002", "Ana Trujillo", "Mexico", "ANATR", "Mexico D.F."));    orderInfo.Add(new OrderInfo("1003", "Ant Fuller", "Mexico", "ANTON", "Mexico D.F."));    //orderInfo.Add(new OrderInfo("1004", "Thomas Hardy", "UK", "AROUT", "London"));    //orderInfo.Add(new OrderInfo("1005", "Tim Adams", "Sweden", "BERGS", "London"));    //orderInfo.Add(new OrderInfo("1006", "Hanna Moos", "Germany", "BLAUS", "Mannheim"));    //orderInfo.Add(new OrderInfo("1007", "Andrew Fuller", "France", "BLONP", "Strasbourg"));    //orderInfo.Add(new OrderInfo("1008", "Martin King", "Spain", "BOLID", "Madrid"));    //orderInfo.Add(new OrderInfo("1009", "Lenny Lin", "France", "BONAP", "Marsiella"));    //orderInfo.Add(new OrderInfo("1010", "John Carter", "Canada", "BOTTM", "Lenny Lin"));    //orderInfo.Add(new OrderInfo("1011", "Laura King", "UK", "AROUT", "London"));    //orderInfo.Add(new OrderInfo("1012", "Anne Wilson", "Germany", "BLAUS", "Mannheim"));    //orderInfo.Add(new OrderInfo("1013", "Martin King", "France", "BLONP", "Strasbourg"));    //orderInfo.Add(new OrderInfo("1014", "Gina Irene", "UK", "AROUT", "London"));}

The table header is also not displayed.

And when adding new objects - an Error occurs. And this applies to the count of item from 0 to 5. From 6 works better

Jayashree Ravishankar · Answer

Hi Oleksandr Kovalov,We have checked the
reported issue. When there are fewer items at load time, we also need to set
the HeightRequest for the DataGrid. This can be done in the ViewCreated event.Regarding the table header visibility issue and
exceptions when adding items:When the total
height of the items is less than 300, the layout measurement isn't updated
correctly. By setting the DataGrid's HeightRequest in the ViewCreated event,
the header becomes visible and the items are added correctly.Please refer the
following code snippet:

this.dataGrid1 = Expander1!.Content as
  SfDataGrid;
   visualContainer1 =
  this.dataGrid1!.GetVisualContainer();
   this.dataGrid1!.ViewCreated +=
  DataGrid_ViewCreated1;
     
  private void
  DataGrid_ViewCreated1(object? sender, EventArgs e)
  {
      this.dataGrid1!.HeightRequest
  = visualContainer1.ExtendedHeight;
      this.dataGrid1!.View!.CollectionChanged
  += View_CollectionChanged1;
  }

Please let us know
if you have any other queries.