27 Kommentare

Spaltenüberschriften in SharePoint Tabellen-/Listenansichten einfrieren/fixieren

Sobald im SharePoint 2010 in einer Liste etwas mehr als 30 Zeilen angezeigt werden oder auf einer Zeile noch ein Bild angezeigt, erscheint ein Scrollbar. Lästig ist dabei, dass beim nach unten Scrollen die Kopfzeile der Tabelle verschwindet bzw. nicht mehr im sichtbaren Bereich ist. Bei umfangreichen Tabellen verliert man dann schnell den Überblick.

Leider gibt es keine eingebaute Funktion wie das „Fenster einfrieren“ im Microsoft Excel. Aber mit jQuery und einem jQuery Script lässt sich diese Funktion nachbauen. Im Internet gibt es schon ein Paar solche Lösungsansätze um Tabellen Kopfzeile zu fixieren, wie SharePoint 2010 jQuery: List Scrolling View with Frozen Header oder das jQuery Plugin .FixedHeaderTable(), aber keine davon funktioniert richtig zusammen mit SharePoint 2010.

Die Demo von Amit Phule sieht aufgrund der doppelten Scrollbars unschön aus und ich konnte diese gar nicht 1:1 zum Laufen bekommen. Das .FixedHeaderTable() Plugin versagt, weil die SharePoint HTML-Tabellenstruktur nicht den Anforderungen entspricht (THEAD fehlt), und wenn man dieses Problem mit etwas jQuery löst, funktionieren die Sortier- und Filter-Menüs auf den Spalten gar nicht mehr.

Darum hier eine funktionierende Alternative von mir, welche mit jQuery die Kopfzeile kopiert und eingefriert einblendet, wenn nötig. Mein Script passt die dynamischen Tabellen-Spaltenbreiten laufend an, funktioniert mit horizontalem Scrolling und berücksichtigt, ob der Ribbon sichtbar ist bzw. nicht! Die Sortier- und Filter-Menüs auf den Spalten funktionieren nach wie vor identisch, aber nur wenn nach oben gescrollt wird (auf der Original-Tabelle).

Die Einbindung ist simple, am einfachsten in der MasterPage jQuery und mein Script einbinden, fertig.

Fertiges Resultat der Einbindung

Enbindung:
<script type=“text/javascript“ src=“/SiteAssets/scripts/jquery-1.7.1.min.js“></script>
<script type=“text/javascript“ src=“/SiteAssets/scripts/FixedTableHeader.js“></script>

Download: FixedTableHeader.js

Über Benjamin Gemperle

Web Developer bei 2sic Internet Solutions GmbH seit 2006. Entwickelt Software-Lösungen mit Web-Standards und Microsoft-Technologien. Mein Daily Business: SharePoint, DNN, AngularJS, ASP.Net, C#, SQL Server, IIS, InfoPath, Access, Excel, PowerShell sowie gängigen Web-Sprachen HTML, CSS, JavaScript (jQuery, AngularJS), AJAX, XML, XSL/XSLT. Mein Ausgleich: Reisen, Natur, fein Kochen und Essen, Fitness, Biken, Skiing.

27 Kommentare zu “Spaltenüberschriften in SharePoint Tabellen-/Listenansichten einfrieren/fixieren

  1. Hallo, es muss doch auch möglich sein den Code direkt in ein CEWP zu schreiben. Ich habe es folgendermaßen probiert:

    $(document).ready(function () {
    InitFixedTableHeader();
    });

    //anschließend sind hier noch die beiden Funktionen InitFixedTableHeader() und InitFixedTableHeaderWidths() eingefügt

    Leider funktioniert es so nicht. Wo liegt mein Fehler?

    • Hallo David

      InitFixedTableHeader() darf nicht direkt beim .ready Event aufgerufen werden, sondern muss im SharePoint BodyOnLoad hinzugefügt werden:

      $(document).ready(function () {
      _spBodyOnLoadFunctionNames.push(„InitFixedTableHeader“);
      });

      Gruss
      Beni

  2. Hallo Benjamin,

    danke für deine Hilfe, funktioniert bei mir leider immer noch nicht. Könnte es daran liegen, dass ich SP 2007 benutze?

    Gruß
    David

  3. Hello, I’m trying to make this work in SharePoint 2010. For some reason it doesn’t work. I’ve put alerts in between to make sure script is being called. Alerts are fired but the headers are not fixed. Please help

    • I’d recommend you to use Firefox and check whether there are Errors in the Error Console. If there’s none, use Firebug or IE Developer Tools to verify InitFixedTableHeaderWidths() is called.

      • Hi.. Thank you for the reply. There are no errors and I can see that the FloatingHeaderTable is getting added to the page but it is not visible. The top value is not set correctly. It is getting hidden behind the blue bar (site actions).

      • Are you using the default master Page v4.master or another one? Could you send me a Screenshot or give me a login to your SharePoint?

  4. Hallo, super Sache!!
    Leider bekomm ich es nicht zum laufen… An welcher Stelle der v4.Master füge ich das Script denn am besten ein? Vielen Dank für die Info!

    • Hallo Ruediger

      Die Stelle in v4.Master ist nicht wichtig. Typischerweise im head-Tag an derselben Stelle, an der schon andere JavaScripts eingebunden werden.

      Zum Eingrenzen empfehle ich dir mit Internet Explorer Developer Tools oder Firebug Breakpoints zu setzen oder alerts einzubauen. So findest du rasch heraus, ob und bis wohin das JavaScript funktioniert. Allenfalls findest du auch in der Console Warnungen oder Fehlermeldungen, die dir weiterhelfen.

      • Hallo Benjamin,
        vielen Dank für die Antwort! Das debuggen hat geholfen! Hab ein einfaches alert ( alert( ‚Testnachricht‘ ); ) an dieselbe Stelle mit eingebaut und dieses wurde aufgerufen. Dann viel mir auf das ich nen Fehler in einem der Pfade zur Style Library (dort liegen die Skripte momentan) hatte und somit das Skript garnicht aufgerufen wurde… Jetzt läuft aber alles und es funktioniert super! Nochmals vielen vielen Dank für diese tolle Lösung! Ruediger

  5. Hallo Benjamin,
    deine Lösung funktiniert prima. Kann man diese Funktionalität auch in Listen innerhalb eines Webparts einbauen?

    Gruß Klaus

    • Hallo Klaus
      Eine ähnliche Lösung sollte auch innerhalb eines Webparts (z.B. auf einer Wiki-Seite) möglich sein. Die Anforderungen sind etwas komplexer, da mehrere unterschiedliche Webparts vorhanden sein können (mit jeweils eigenen Hilfstabellen für die Spaltenüberschriften) und sich der Ribbon etwas anders verhält.
      Gruss
      Benjamin

  6. Thank You Benjamin for sharing this code.

    The script is absolutely working fine & freezing the column headers in SharePoint 2010 list view pages that are using default Master Page.

    What I am supposed to take care, so that this script will work fine with list views pages (sites) that are using Custom Master page?

    In customized sites, the script runs ( I inserted alert messages) but does not show any effect in freezing the view headers. Also does not throw any errors.

    Appreciate your help.
    Aravind

    • Hello Aravind,
      You said the solution is working fine. Can you please tell me the step by step procedure for implementing this in sharepoint 2010.

      Thank in advance

      • Vamsee,

        This code works fine with v4,master page only. If you are using default master page, Upload the .js file in site assets library and just put the code in a content editior webpart (HTML Portion) in a list view page.

        If yours is a custom master page, then this code will not be much useful.

        Thank You.

  7. Hello everyone,

    From the example image given in this blog, I see that the column header is working with respect to the ribbon. What am I supposed to do, if I want the column header to be fixed with respect to the table and the content of it should scroll.

    Can anyone give me a solution?

    Thanks in advance.

  8. Hallo,

    es würde mich interessieren, ob man auch eine Möglichkeit hat das Script mit einem Inhaltseditor auf der entsprechende Seite zu platzieren.
    Wir haben noch nicht viel mit dem SP-Designer gearbeitet. Müsste ich dort auf der .aspx des gewünschten Views dein Script einbinden? Wo müsste ich das platzieren?
    Leider mit dem Bearbeiten der Masterpage etwas unerfahren.
    Es wäre nett, wenn mir jemand eine Tipp geben könnte.

    Grüße
    Tiac

    • Hallo Tiac

      Du kannst die beiden JavaScripts auch irgendwo auf der View-Seite (z.B. /Lists/Products/AllItems.aspx) in einem Inhalts-Editor-Webpart platzieren.

      Beni

  9. Can the headers show filters after scrolling down. Currently after scroll down filter options are not show?

    • Hi Sri,

      Currently the fixed headers can’t show filters. I think there’s almost no possibility because it would require duplicating the filters menu or move it in the DOM. Unfortunately both breaks the SharePoint filter functionality.

      Regards,
      Benjamin

  10. Hallo Benjamin,

    mir ist noch ein kleiner Fehler aufgefallen. Und zwar: Wenn ich in meiner Liste runterscrolle und dann das Fenster maximiere, dann bleiben die Überschriften mitten in der Liste stehen. Kann man dort irgend etwas machen?

    Hier noch ein Screenshot: http://www.imagebanana.com/view/a9kra6of/Ueberschriften_Liste.PNG

    Viele Grüße,
    Daniel

    • Was mir auch noch aufgefallen ist: Wenn ich eine Liste öffne, bei der normal der vertikale Scrollbalken im Browser erscheinen würde, dann hat man als User keine Möglichkeit weiter runter zu scrollen.

    • Hallo Daniel
      Das Problem kann ich leider nicht reproduzieren. Bei jedem Scrollen und Windows Resize ($(window).resize) wird die Header-Row aktualisiert.
      Ich tippe auf ein grundsätzliches Problem mit deinem Browser, dass der Resize-Event nicht funktioniert. Details: http://api.jquery.com/resize/
      Gruss
      Benjamin

      • Hallo Benjamin,

        selbes Verhalten habe ich zum Teil in zwei verschiedenen Browsern.

        1. Die Überschriften der Spalten beim Maximieren des Fenster bleiben nur beim IE9 bestehen. Beim Firefox hingegen funktioniert soweit alles.

        2. Der vertikale Scrollbalken ist aber bei beiden ein Problem. Im IE9 wird er zu groß angezeigt und ich habe keine Möglichkeit damit zu scrollen (s. Screenshot) und beim Firefox bekomme ich gar keinen Balken angezeigt.

        Hier noch der Screenshot:

        Viele Grüße,
        Daniel

  11. Hi Benjamin,

    versuche nun schon seit Wochen deine Lösung mit einzubauen und bekomme es einfach nicht hin.
    Es kann ja nur daran liegen das ich totaler Anfänger bin, gibt es irgendwo zu deiner Lösung eine bebilderte Anleitung oder eben eine schritt für schritt Anleitung für Dummies?

    Viele Grüße
    Jörg

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: