Why BlazorGridStackBody doesn't sync the new BlazorGridStackWidgetOptions added?

[nima-ghomri]

I've created multiple sets of widgets so I could switch between them using a button.

Index.razor

@page "/"
@using BlazorGridStack.Models
@using System.Diagnostics.CodeAnalysis;

@foreach (var info in infos)
{
    <div>@info</div>
}

<button @onclick=OnClick>Change Widgets</button>
<BlazorGridStackBody @ref=grid GridStackOptions=options OnChange=OnChange>
    @foreach (var item in items)
    {
        <BlazorGridStackWidget WidgetOptions=item>
            <MyComponent Name=@item.Id.ToString() />
        </BlazorGridStackWidget>
    }
</BlazorGridStackBody>


@code {
    bool flag;
    [AllowNull]
    BlazorGridStackBody grid;
    BlazorGridStackBodyOptions options = new()
        {
            Row = 10
        };

    IEnumerable<string> infos = Enumerable.Empty<string>();
    IEnumerable<BlazorGridStackWidgetOptions> items => flag ? items1 : items2;
    IEnumerable<BlazorGridStackWidgetOptions> items1 = new[] {
        new BlazorGridStackWidgetOptions {Id = "A", W = 2, H = 2},
        new BlazorGridStackWidgetOptions {Id = "B", W = 3, H = 3, X = 3, Y = 0},
        new BlazorGridStackWidgetOptions {Id = "C", W = 3, H = 3, X = 3, Y = 3},
    };
    IEnumerable<BlazorGridStackWidgetOptions> items2 = new[] {
        new BlazorGridStackWidgetOptions {Id = "1", W = 2, H = 2},
        new BlazorGridStackWidgetOptions {Id = "2", W = 2, H = 2, X = 3, Y = 3},
    };

    void OnClick()
    {
        flag = !flag;
    }

    private void OnChange(BlazorGridStackWidgetListEventArgs e)
    {
        infos = e.Items.Select(x => $"Id: {x.Id ?? "NULL"}, Content: {x.Content.Substring(0, 20)}...");
    }
}

MyComponent.razor

<h3>@Name.ToUpper()</h3>

@code {
    [Parameter]
    public string Name { get; set; }
}

As the items get switched, not all the corresponding widgets get created by the body. Actually the 3rd widget "C", not getting detected by the body making it not draggable. how to make it to work? Thanks.

[decelis]

Sorry, closed this one by mistake.

Widgets only get added the first time the dashboard is rendered, any time you update the dashboard you need to signal gridstack so it can add you changes.

• Instead of using the DOM to add your components, you can use 'AddWidget' and pass your BlazorGridStackOptions as a parameter, or using load to pass multiple widgets at the same time.
• If you want to add them the way you are doing it now, you can give each widget an Id and call 'AddWidget' but pass this id instead.

[nima-ghomri]

That's okay thank you for your response.

• I can't add widgets using AddWidget method and BlazorGridStackOptions. Because I want to be able to add my components inside Widgets and BlazorGridStackOptions only accepts string contents.
• Using AddWidget in OnAfterRenderAsync did solve the problem of the body not recognizing new widgets. and now the widgets are draggable:

@page "/"
@using BlazorGridStack.Models
@using System.Diagnostics.CodeAnalysis;

<button @onclick=OnClick>Change Widgets</button>
<BlazorGridStackBody @ref=grid GridStackOptions=options>
    @foreach (var item in items)
    {
        <BlazorGridStackWidget WidgetOptions=item>
            <MyComponent Name=@item.Id.ToString() />
        </BlazorGridStackWidget>
    }
</BlazorGridStackBody>


@code {
    [AllowNull]
    BlazorGridStackBody grid;

    BlazorGridStackBodyOptions options = new() { Row = 10, Column = 12, Float = true };
    bool flag;

    IEnumerable<BlazorGridStackWidgetOptions> items => flag ? items1 : items2;
    IEnumerable<BlazorGridStackWidgetOptions> items1 = new[] {
        new BlazorGridStackWidgetOptions {Id = "A", W = 2, H = 2},
        new BlazorGridStackWidgetOptions {Id = "B", W = 3, H = 3, X = 2, Y = 2},
        new BlazorGridStackWidgetOptions {Id = "C", W = 3, H = 3, X = 7, Y = 0},
    };
    IEnumerable<BlazorGridStackWidgetOptions> items2 = new[] {
        new BlazorGridStackWidgetOptions {Id = "1", W = 2, H = 2},
        new BlazorGridStackWidgetOptions {Id = "2", W = 2, H = 2, X = 2, Y = 2},
    };

    async Task OnClick()
    {
        //await grid.RemoveAll(true);
        flag = !flag;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender)
        {
            foreach (var item in items)
                await grid.AddWidget(item.Id.ToString());
        }
    }
}

But now the Change Widgets button cause widgets to move from their original location (probably caused by previous widgets still living inside current body). If you press the button couple of times the widgets will start moving downwards.
Unfortunately using RemoveAll method cause the grid to throw exception when I want to add new widgets.
So, my questions are:

• Am I using the AddWidget method correctly, Is the OnAfterRenderAsync the right time to call it?
• How can I clear the grid from any previous widgets and their associated options and start fresh with a set of new widgets?

[0use-TE]

@decelis @nima-ghomri hiHello, brother, my English is not good, so I use a translator. I successfully implemented the dynamic addition of RenderFragment delegate components, in fact, it is very simple, just need to add ChildContent to GirdStackItem, and then call the MakeWidget method in GirdJS. GirdStack has two kinds of widgets. One is to create a container and add content, that is, AddWidget, which can only be passed in string, so we need to create it first, and then add it to Gird, that is, we need to use MakeWidget。
Example

@page "/"
Home
@using Microsoft.AspNetCore.Components.Rendering
<button @OnClick=OnClick>Add
<BlazorGridStackBody @ref=grid GridStackOptions=options >
@foreach (var item in items)
{

@item.content

}

@code {
public class CombinedModel
{
public BlazorGridStackWidgetOptions options { get; set; }
public RenderFragment content { get; set; }
}
BlazorGridStackBody? grid;
BlazorGridStackBodyOptions options = new()
{
Row = 10,
Float = true
};
List items = new()
{
new CombinedModel()
{
options = new BlazorGridStackWidgetOptions {Id = Guid.NewGuid().ToString(), W = 2, H = 2},
content = (builder) =>
{
builder.OpenComponent(0, typeof(DummyComponent));
builder.AddAttribute(1, "Name", "Widget1");
builder.CloseComponent();
}
}
};

async Task OnClick()
{
    await  grid.BatchUpdate(true);
    var newGuid = Guid.NewGuid().ToString();
    CombinedModel newWidget = new()
    {
        options = new BlazorGridStackWidgetOptions { Id = newGuid, W = 2, H = 2, X = 7, Y = 3 },
        content = (builder) =>
        {
            builder.OpenComponent(0, typeof(Counter));
            builder.CloseComponent();
        }
    };

    items.Add(newWidget);

    StateHasChanged();

    Console.WriteLine(newGuid);

    await grid.MakeWidget(newGuid);  
    
  await  grid.BatchUpdate(false);
}

}

QQ2025123-23221.mp4