JSLink-Problem bei View mit Standard-Tabellenkopf und individuellen Items

Christian Merkel erstellt 9 Jan. 2018 11:33

Hi,

ich habe ein JSLink gebaut, welches den Header, Footer und das einzelne Element überschreibt.

Dabei habe ich einen Schalter drin, der entweder den Default-Table Header + Footer rendert (damit man die Spalten zum filtern und das suchfeld hat) oder meinen custom header (einfach nur einen div) rendert.

Mit meinem Custom Header funktioniert alles einwandfrei. Mit dem Default Header habe ich probleme beim Paging:

Erste Seite:

Weiterschalten auf zweite Seite (oder zurück auf 1. Seite):

Die erste Karte bleibt immer stehen. Alle anderen werden beim Ajax-Paging automatisch gelöscht.

Woran liegt das?

Grob mein Code:

//Display-Template registrierung

ContactCardContext.Templates.Header = ContactCard.RenderHeader;
ContactCardContext.Templates.Item = ContactCard.RenderItem;
ContactCardContext.Templates.Footer = ContactCard.RenderFooter;

// render default head
ContactCard.RenderHeader = (function(ctx){
    if(ctx.Templates.Body == ""){
        return "";
        //return RenderViewTemplate(ctx);       
    }
    var html = "";
    html+= '<div class="contactboard">';   
    html+= RenderHeaderTemplate(ctx);
    html+= '<tbody></tbody>';
    html+= '</table>';   
    return html;
});

//render custom item
ContactCard.RenderItem = (function(ctx){
    if(ctx.Templates.Body == ""){
        //return RenderItemTemplate(ctx);
        return "";
    }
   
        console&&console.log("Item rendering... (" +ctx.CurrentItem["FullName"]+')');

   
    var html= "";
    //hide item by default and show after style is loaded
    html+= '<div class="contactcard ms-PersonaCard" style="display: none">';
    //html for contactcard
    html+= '</div>';
   
    // fix for ajax paging breaking list view
    var startElement = $("#scriptBody" + ctx.wpq);
    if(startElement.length > 0 ){
        if (startElement.nextAll('div').length > 0) {
            startElement = startElement.nextAll('div:last');
        }
        startElement.after(html);
       
        return "<tr></tr>";
    }else{
        return html;
    }
}

// default footer
ContactCard.RenderFooter = (function(ctx){
    var html = "";
    // closing custom cardboard-div from header
    html = "</div>";

    html+= RenderFooterTemplate(ctx);
    return html;
}

Ich sehe da irgendwie nicht mehr durch woher dieses ding kommt bzw. warum es nicht mit gelöscht wird....

Ich vermute irgendwie etwas in dem ajax-refresh schaut auf die elemente und startet erst beim 2. oder irgendwie sowas....

Hat jemand eine hilfreiche Idee dafür?

Danke euch!