Dynamically add widget with RenderFragment #6
Description
Hi,
this is probably a more general version of #4.
I guess I'm missing something obvious, maybe somebody can point me in the right direction.
What is the recommended way to use AddWidget to dynamically add elements when the ChildContent shall be defined by a RenderFragment instead of a string with pure Html?
The following works fine, but if an item is added to the items list, the grid displays it, but it is not movable and has no scaling indicator. How can I tell the grid to treat the new element as a proper widget?
Page:
@page "/issue5"
<button @onclick=OnClick>Add</button>
<BlazorGridStackBody @ref=grid GridStackOptions=options OnChange=OnChange>
@foreach (var item in items)
{
<BlazorGridStackWidget WidgetOptions=item.options>
@item.content
</BlazorGridStackWidget>
}
</BlazorGridStackBody>
@code {
public class CombinedModel
{
public BlazorGridStackWidgetOptions options { get; set; }
public RenderFragment content { get; set; }
}
BlazorGridStackBody? grid;
BlazorGridStackBodyOptions options = new()
{
Row = 10,
Float = true
};
List<CombinedModel> 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();
}
},
new CombinedModel()
{
options = new BlazorGridStackWidgetOptions {Id = Guid.NewGuid().ToString(), W = 3, H = 3, X = 3, Y = 0},
content = (builder) =>
{
builder.OpenElement(0, "div");
builder.AddContent(1, "Widget2");
builder.CloseElement();
}
},
new CombinedModel()
{
options = new BlazorGridStackWidgetOptions {Id = Guid.NewGuid().ToString(), W = 3, H = 3, X = 3, Y = 3},
content = (builder) =>
{
builder.OpenElement(0, "div");
builder.AddContent(1, "Widget3");
builder.CloseElement();
}
}
};
async Task OnClick()
{
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(DummyComponent));
builder.AddAttribute(1, "Name", "Dynamic");
builder.CloseComponent();
}
};
items.Add(newWidget);
//how to await grid.AddWidget
grid.BatchUpdate(false);
}
private void OnChange(BlazorGridStackWidgetListEventArgs e)
{
//items[0].options.X = e.Items.ToList()[0].X;
//items[0].options.Y = e.Items.ToList()[0].Y;
}
}
DummyComponent:
<h3>DummyComponent @Name</h3>
@code {
[Parameter]
public string Name { get; set; }
}
Thanks for you library and your support!
Cheers!