I have an ASP-WebPage where I'm using an UpdatePanel with a Dropdown and Output-Div for dynamically generated Cards. These cards are layouted by Masonry. The content of the Output-Div is bound to the Dropdown selection.
Initially, the Masonry-Layout works fine on PageLoad. However, when the Dropdown is changed, the layout breaks and spaces between the cards appear.
I've attempted to trigger the layout method of the Masonry object after the content of the output-div changes. It seems that this method is not being executed inside the UpdatePanel.
Could someone provide me with a suggestion on how to ensure that the Masonry layout is re-applied after changes in the update panel?
This is how I have implemented it:
<asp:ScriptManager runat="server" EnablePageMethods="false"/>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:DropDownList OnSelectedIndexChanged="ddKat_SelectedIndexChanged" OnDataBound="ddKat_DataBound" ID="ddKat" CssClass="form-control" runat="server" DataSourceID="SqlDataSource1" DataTextField="name" DataValueField="id" AutoPostBack="true">
</asp:DropDownList>
<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString='<%$ ConnectionStrings:comidosDElocalConnectionString %>' SelectCommand="SELECT [id], [name] FROM [kategorien] order by name"></asp:SqlDataSource>
<div class="wrapper" id="wrapper">
<!-- Start Blog Masonry Area -->
<section class="blog__masonery__area bg--white section-padding--lg">
<div class="container blog__masonry__container">
<div class="row blog__masonery__wrap" id="ausgabe" runat="server">
</div>
</div>
</section>
<!-- End Blog Masonry Area -->
</div><!-- //Main wrapper -->
</ContentTemplate>
</asp:UpdatePanel>
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{
List<kategorien> listeKategorien = myKATEGORIE.holeKategorienMitContent();
foreach (var item in listeKategorien)
{
ausgabeNav.Controls.Add(erzeugeNavZuKategorie_id(item));
}
}
}
protected void ddKat_SelectedIndexChanged(object sender, EventArgs e)
{
bestückeAusgabeCards();
}
private void bestückeAusgabeCards()
{
List<FREE.konzepte> listeDBfürDROPDOWN = new List<FREE.konzepte>();
using (comidosDElocalEntities context = new comidosDElocalEntities())
{
listeDBfürDROPDOWN = context.konzepte.ToList();
}
foreach (var item in listeDBfürDROPDOWN)
{
if (item.kategorie_id.ToString() == ddKat.SelectedValue)
{
ausgabe.Controls.Add(erzeugeBlogEintragMasonry(item));
}
}
}
public static HtmlGenericControl erzeugeBlogEintragMasonry(konzepte konzeptItem)
{
// function body stays the same
}
Is there a way to trigger the layout method of Masonry on a specific Event that fires when the update panel changes? Or is there another way to execute client-side code when the content of the output-div changes within the update panel?