1. Home
  2. Forum
  3. Blazor
  4. Auto collapse on small display

Auto collapse on small display

Hi,
I'd like to use accordion for organize groups of checkbox acting as filters for a list.
On page loading, accordion items must be all expanded or collapsed depending on display size, for example collapsed on xs and sm, expanded on lg.
It would be perfect if items auto collapse/expand dinamically when user resizes the browser window.
How can I do that? Is it correct to use accordion or is there another way to do it?

Thanks

is there i way to auto collapse or expand all items based on 

1 Reply 1 reply marked as answer
NR Nevitha Ravi Syncfusion Team March 19, 2021 05:02 PM UTC

Hi lorella, 

Greetings from Syncfusion Support. 

You can expand/collapse the accordion items automatically on window resize, we have prepared a sample for your reference which can be downloaded from the following link. 

Razor page. 
@using Accordion.Data 
@using Syncfusion.Blazor.Navigations 
@implements IDisposable 
@inject IJSRuntime jsRuntime 
 
<SfAccordion @ref="AccordionRef"> 
    <AccordionItems> 
        <AccordionItem @bind-Expanded="IsExpanded" Header="Margeret Peacock" Content="Margeret Peacock was born on Saturday , 01 December 1990. Now lives at Coventry House Miner Rd., London,UK. Margeret Peacock holds a position of Sales Coordinator in our WA department, (Seattle USA). Joined our company on Saturday , 01 May 2010"></AccordionItem> 
        <AccordionItem @bind-Expanded="IsExpanded" Header="Laura Callahan" Content="Laura Callahan was born on Tuesday , 06 November 1990. Now lives at Edgeham Hollow Winchester Way, London,UK. Laura Callahan holds a position of Sales Coordinator in our WA department, (Seattle USA). Joined our company on Saturday , 01 May 2010"></AccordionItem> 
        <AccordionItem @bind-Expanded="IsExpanded" Header="Albert Dodsworth" Content="Albert Dodsworth was born on Thursday , 19 October 1989. Now lives at 4726 - 11th Ave. N.E., Seattle,USA.Albert Dodsworth holds a position of Sales Representative in our WA department, (Seattle USA). Joined our company on Friday , 01 May 2009"></AccordionItem> 
    </AccordionItems> 
</SfAccordion> 
 
@code{ 
    SfAccordion AccordionRef; 
    bool IsExpanded; 
    protected override void OnInitialized() 
    { 
 
        BrowserResizeService.WindowResize += ResizeWindow; 
    } 
    protected override async Task OnAfterRenderAsync(bool firstRender) 
    { 
        if(firstRender) 
        { 
            int windowHeight = await jsRuntime.InvokeAsync<int>("getInnerHeight"); 
            if (windowHeight < 400) 
            { 
                IsExpanded = false; 
            } 
            else 
            { 
                IsExpanded = true; 
                StateHasChanged(); 
            } 
        } 
    } 
 
    public void Dispose() 
    { 
        BrowserResizeService.WindowResize -= ResizeWindow; 
    } 
 
    protected async Task ResizeWindow() 
    { 
        if (BrowserResizeService.WindowHeight < 400) 
        { 
            IsExpanded = false; 
            StateHasChanged(); 
        } 
        else 
        { 
            IsExpanded = true; 
            StateHasChanged(); 
        } 
    } 
} 

JS file 
function getInnerHeight() { 
        return window.innerHeight; 
    } 
function    getInnerWidth() { 
        return window.innerWidth; 
    } 
function raiseResizeEvent() { 
    var namespace = 'Accordion'; // the namespace of the app, you will have to change this for your app 
    var method = 'RaiseWindowResizeEvent'; //the name of the method in our "service" 
    DotNet.invokeMethodAsync(namespace, method, Math.floor(window.innerWidth), Math.floor(window.innerHeight)); 
} 
 
var timeout = false; 
window.addEventListener("resize", function () { 
    if (timeout !== false) 
        clearTimeout(timeout); 
    timeout = setTimeout(raiseResizeEvent, 200); 
}); 

Resize service 
    public class BrowserResizeService 
    { 
        public static event Func<Task> WindowResize; 
        public static int? WindowWidth { get; private set; } 
        public static int? WindowHeight { get; private set; } 
 
        [JSInvokable] 
        public static async Task RaiseWindowResizeEvent(int width, int height) 
        { 
            WindowWidth = width; 
            WindowHeight = height; 
            try 
            { 
                await WindowResize?.Invoke(); 
            } 
            catch { } 
        } 
    } 

Please try the sample and get back to us if you need any further assistance. 

Regards, 
Nevitha 


Marked as answer
Loader.
Up arrow icon