How to create Fixed Header in GridView Control

אחת מהדרישות שחוזרות על עצמן בפרויקטים שונים היא ששורת הכותרות של ה – Grid תשאר קבועה במהלך הגלילה. הפתרון הראשון שעולה על הדעת הוא לייצר טבלה נפרדת עם שורת הכותרות ולהוסיף רק לגריד את יכולת הגלילה, הבעיה היא שזה די מייגע למדוד פיקסלים ולדייק שהגריד יישב בדיוק מתחת לשורת הכותרות. פתרון נוסף ואלגנטי יותר שאותו אני רוצה להציג מתבצע באמצעות שימוש ב – CSS.

Expression in Css

כדי לקבע את שורת הכותרת נגדיר קלאס בקובץ ה – Css:

.GridHeaderSettings
{

font:12px;

position:relative;

top:expression(document.getElementById("ParentDiv").scrollTop);

}

ה - Top של שורת הכותרת תמיד יחסי ל – Top של ה – Div שיעטוף את הגריד שלנו.

The GridView Coulmns

כך נראה Coulmn טיפוסי בגריד:

<asp:TemplateField HeaderText="מטוס זנב" HeaderStyle-CssClass="GridHeaderSettings">
       <itemtemplate>
        <asp:Label ID="lblTailNumber"
           runat="server" Font-Bold="true" CssClass="GridTailNumber"
           ForeColor="Red"
           Text="<%#GetTailNumber(Container.DataItem) %>">">
        </asp:Label>
        <asp:Label ID="lblTailOrderNumber"
          runat="server"

Read more: Dovi Perla

Posted via email from .NET Info