Frozen/Sticky Rows

The Scheduler can display one or more rows at the top and/or bottom in a fixed non-scrolling area.

Available since 2020.1.4205

How to Freeze Scheduler Rows

Use frozen property of resource data object. Two values are accepted:

• "top" - the row will be frozen at the top of the Scheduler
• "bottom" - the row will be frozen at the bottom of the Scheduler

Example:

dp.resources = [
    { name: "Frozen 1", id: "frozen1", frozen: "top"},
    { name: "Frozen 2", id: "frozen2", frozen: "top"},
    { name: "Frozen 3", id: "frozen3", frozen: "bottom"},
    { name: "Locations", id: "G1", expanded: true, children: [
            {name: "Room 1", id: "A"},
            {name: "Room 2", id: "B"},
            {name: "Room 3", id: "C"},
            {name: "Room 4", id: "D"}
        ]
    },
    // ...
];

Only the top-level resources will be scanned for frozen rows. The order of rows in resources[] array will be respected.

Identification of Frozen Rows

DayPilot.Row.grid stores the grid id: "top" | "bottom" | "main"

dp.onBeforeRowHeaderRender = function(args) {
    if (args.row.grid !== "main") {
        args.row.backColor = "#ffd966";
    }
};

Identification of Cells in Frozen Rows

Cell.grid stores the grid id: "top" | "bottom" | "main"

dp.onBeforeCellRender = function(args) {
    if (args.cell.grid !== "main") {
        args.cell.backColor = "#f0f0f0";
    }
};

Limitations

The frozen rows have the following limitations:

• No vertical scrollbar inside the frozen section
• No resource children (children of frozen rows are ignored)
• No drag and drop row moving
• No row selection
• No links between events in the frozen and standard rows

Supported Features

• Drag and drop between frozen and standard rows
• Time range selection
• Crosshair
• Cell customization (onBeforeCellRender)
• Row customization (onBeforeRowHeaderRender)

Demo

• Frozen Rows Demo