Masonry Layout inside ASP UpdatePanel

Question

I'm using on my ASP-WebPage an UpdatePanel with Dropdown and Output-Div for Cards which are generated in CodeBehind, layouted by Masonry. The Output is Bound to the Dropdown.

On PageLoad the Masonry-Layout is running fine. When Dropdown changed, layout is lost and spaces between the cards.

I have tried to start the layout method of masonry-object after the output-div is changing. Seems is not running inside the UpdatePanel.

Can someone give me an impulse, how can i realise, that layout of masonry is doing its job again, after changes in update panel?

This is how i´m using 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)
            {
                // 1. VERSION
                // ausgabeCards.Controls.Add(erzeugeCard(item));
                // ". VERSION: MASONRY
                ausgabe.Controls.Add(erzeugeBlogEintragMasonry(item));
            }
        }
    }


    public static HtmlGenericControl erzeugeBlogEintragMasonry(konzepte konzeptItem)
    {
        HtmlGenericControl rückgabe = new HtmlGenericControl("div");
        rückgabe.Style["padding-bottom"] = "10px";
        rückgabe.Attributes["class"] = "col-lg-4 col-md-6 col-sm-12 bl__item cat--1";
        HtmlGenericControl zweitesDiv = new HtmlGenericControl("div");
        zweitesDiv.Attributes["class"] = "blog__masonry foo";
        HtmlGenericControl bildBereich = new HtmlGenericControl("div");
        bildBereich.Attributes["class"] = "bl__maso__thumb";
        HtmlGenericControl linkUmBild = new HtmlGenericControl("a");
        linkUmBild.Attributes["href"] = konzeptItem.startseitePfad;
        HtmlGenericControl bild = new HtmlGenericControl("img");
        bild.Attributes["src"] = konzeptItem.bildPfad;
        bild.Attributes["alt"] = konzeptItem.überschrift;
        bild.Attributes["title"] = konzeptItem.überschrift;
        linkUmBild.Controls.Add(bild);
        bildBereich.Controls.Add(linkUmBild);
        zweitesDiv.Controls.Add(bildBereich);
        HtmlGenericControl textBereich = new HtmlGenericControl("div");
        textBereich.Attributes["class"] = "bl__mass__content";
        HtmlGenericControl titel = new HtmlGenericControl("h4");
        titel.Style["line-height"] = "auto";
        titel.Style["text-align"] = "center";
        titel.Style["font-weight"] = "bold";
        titel.Style["padding-top"] = "5px";

        titel.InnerHtml = konzeptItem.überschrift;
        textBereich.Controls.Add(titel);
        HtmlGenericControl p = new HtmlGenericControl("p");
        p.InnerHtml = konzeptItem.beschreibung;
        p.Style["text-align"] = "center";
        textBereich.Controls.Add(p);
        zweitesDiv.Controls.Add(textBereich);
        // LINKS
        HtmlGenericControl linkBereich = new HtmlGenericControl("div");
        linkBereich.Attributes["class"] = "linkBereich";
        linkBereich.Style["text-align"] = "center";
        HtmlGenericControl linkEins = new HtmlGenericControl("a");
        linkEins.Style["display"] = "inline-block";
        linkEins.Style["margin-bottom"] = "5px";
        linkEins.Attributes["target"] = "_blank";
        linkEins.Attributes["href"] = konzeptItem.startseitePfad;
        linkEins.InnerHtml = "zur Live-Vorschau";
        linkEins.Attributes["class"] = "btn btn-primary blogLink";
        linkEins.Attributes["title"] = "zur Live-Vorschau";
        linkBereich.Controls.Add(linkEins);
        zweitesDiv.Controls.Add(linkBereich);
        rückgabe.Controls.Add(zweitesDiv);
        return rückgabe;
    }

Is there any opinion to call the layout-Method of the Masonry in some Event, that is firing at change of the update panel. Or any other opinion to call client-side code when the output-div is changing inside the update panel?

Answer 1

When you use the UpdatePanel all the contents within is refreshed, this changes the DOM and all the binding done to it. So you need to exectute jQuery again to recreate the Masonry.

Put his code somewhere and it will work.

<script>
    var prm = Sys.WebForms.PageRequestManager.getInstance();

    //when the updatepanel is finished reloading
    prm.add_endRequest(function () {
        initMyMasonry();
    });

    //the normal first time page load
    initMyMasonry();

    function initMyMasonry() {
        //crteate your masonry here
    }
</script>