DayPilot Pro for JavaScript 7.9 SP1

Release date: October 11, 2014 (build 7.9.1212)

Row Header Splitter (Scheduler, Gantt)

Enabled when row header scrolling is enabled.

The splitter width can be set using rowHeaderSplitterWidth property.

The splitter appearance can be adjusted using *_splitter class.

It fires onRowHeaderResized event after the user drops the splitter at the new position.

Demo:

• http://javascript.daypilot.org/demo/scheduler/rowheaderscrolling.html

Row Header Hiding (Scheduler, Gantt)

In the Scheduler control, it's disabled by default.

In the Gantt control, it's enabled default.

You can enable it using rowHeaderHideIconEnabled.

The icon can be configured using the following CSS classes:

• *_header_icon
• *_header_icon_hide
• *_header_icon_show

Demo:

• http://javascript.daypilot.org/demo/scheduler/rowheaderhiding.html

Real-Time BeforeRowHeaderRender Event (Scheduler)

The Scheduler supports a new onBeforeRowHeaderRender event. It can be used to adjust the row header depending on the row status (events).

args.row is a row object:

• row.events.all()
• row.events.totalDuration()
• row.groups.collapseAll() - collapse event groups, don't use in onBeforeRowHeaderRender()
• row.groups.expandAll()- expand event groups, don't use in onBeforeRowHeaderRender()
• row.groups.expanded()
• row.groups.collapsed()
• row.toggle() - expand/collapse node, don't use in onBeforeRowHeaderRender()
• row.column(i) - access to columns

Example that uses active areas to create event group expand/collapse icons in the row header (see Group Concurrent Events Demo):

dp.onBeforeRowHeaderRender = function(args) {
  var hasExpanded = args.row.groups.expanded().length > 0;
  var hasCollapsed = args.row.groups.collapsed().length > 0;

  if (hasExpanded && hasCollapsed) {
      args.row.areas = [
          {v:"Visible", right: 14, top: 0, height: 12, width: 12, style: "cursor:pointer", html: "<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAKXRFWHRDcmVhdGlvbiBUaW1lAHDhIDMwIEkgMjAwOSAwODo0NjozMSArMDEwMClDkt4AAAAHdElNRQfZAR4HLyUoFBT0AAAACXBIWXMAAA7CAAAOwgEVKEqAAAAABGdBTUEAALGPC/xhBQAAAFJJREFUeNpjrK6s5uTl/P75OybJ0NLW8h8bAIozgeRhgJGREc4GijMBtTNgA0BxFog+uA4IA2gmUJwFog/IgUhAGBB9KPYhA3T74Jog+hjx+A8A1KRQ+AN5vcwAAAAASUVORK5CYII=" />", action:"JavaScript", js: function(row) { row.events.expandGroups(); } },
          {v:"Visible", right: 0, top: 0, height: 12, width: 12, style: "cursor:pointer", html: "<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAKXRFWHRDcmVhdGlvbiBUaW1lAHDhIDMwIEkgMjAwOSAwODo0NjozMSArMDEwMClDkt4AAAAHdElNRQfZAR4HLxB+p9DXAAAACXBIWXMAAA7CAAAOwgEVKEqAAAAABGdBTUEAALGPC/xhBQAAAENJREFUeNpjrK6s5uTl/P75OybJ0NLW8h8bAIozgeSxAaA4E1A7VjmgOAtEHyMjI7IE0EygOAtEH5CDqY9c+xjx+A8ANndK9WaZlP4AAAAASUVORK5CYII=" />", action:"JavaScript", js: function(row) { row.events.collapseGroups(); } }
      ];
  }
  else if (hasCollapsed) {
      args.row.areas = [
          {v:"Visible", right: 0, top: 0, height: 12, width: 12, style: "cursor:pointer", html: "<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAKXRFWHRDcmVhdGlvbiBUaW1lAHDhIDMwIEkgMjAwOSAwODo0NjozMSArMDEwMClDkt4AAAAHdElNRQfZAR4HLyUoFBT0AAAACXBIWXMAAA7CAAAOwgEVKEqAAAAABGdBTUEAALGPC/xhBQAAAFJJREFUeNpjrK6s5uTl/P75OybJ0NLW8h8bAIozgeRhgJGREc4GijMBtTNgA0BxFog+uA4IA2gmUJwFog/IgUhAGBB9KPYhA3T74Jog+hjx+A8A1KRQ+AN5vcwAAAAASUVORK5CYII=" />", action:"JavaScript", js: function(row) { row.events.expandGroups(); } },
      ];
  }
  else if (hasExpanded) {
      args.row.areas = [
          {v:"Visible", right: 0, top: 0, height: 12, width: 12, style: "cursor:pointer", html: "<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAKXRFWHRDcmVhdGlvbiBUaW1lAHDhIDMwIEkgMjAwOSAwODo0NjozMSArMDEwMClDkt4AAAAHdElNRQfZAR4HLxB+p9DXAAAACXBIWXMAAA7CAAAOwgEVKEqAAAAABGdBTUEAALGPC/xhBQAAAENJREFUeNpjrK6s5uTl/P75OybJ0NLW8h8bAIozgeSxAaA4E1A7VjmgOAtEHyMjI7IE0EygOAtEH5CDqY9c+xjx+A8ANndK9WaZlP4AAAAASUVORK5CYII=" />", action:"JavaScript", js: function(row) { row.events.collapseGroups(); } }
      ];
  }
};

Gantt Link Position Adjustment

Use linkBottomMargin property (default value 10).

Improvements

• [Gantt] Flexible milestone width (CSS theme). (build 1166)
• DatePicker: Closed on clicking outside. (build 1175)
• [Scheduler] Scheduler: Themes updated to support new features (row moving, event overlapping, block on callback, event grouping, row header hide/show icon). (build 1209)

Fixes

• [Scheduler] Scheduler: Incorrectly applying row header width auto fit during visibility check (fixed). (build 1168)
• [Scheduler] Scheduler: Cell properties (backColor, business...) fixed for showNonBusiness = false (incorrect start offset). (build 1172)
• [Scheduler] Scheduler: Floating events fixed. (build 1175)
• [Scheduler] Scheduler: row moving fixed (scroll top, overlay, cursor). (build 1197)

API Changes

DayPilot.Task

Methods

• DayPilot.Task.toggle()
• DayPilot.Task.expand()
• DayPilot.Task.collapse()
• DayPilot.Task.expanded([boolean])

DayPilot.Scheduler

Events

• DayPilot.Scheduler.onRowHeaderResized added
• DayPilot.Scheduler.onBeforeRowHeaderRender added

Methods

• DayPilot.Scheduler.rows.expand(level)
• DayPilot.Scheduler.rows.expandAll()

Properties

• DayPilot.Scheduler.rowHeaderSplitterWidth

DayPilot.Gantt

Events

• DayPilot.Gantt.onBeforeRowHeaderRender fired in real time (like DayPilot.Scheduler.onBeforeRowHeaderRender).

Methods

• DayPilot.Gantt.rows.expand(level)
• DayPilot.Gantt.rows.expandAll()

Properties

• DayPilot.Gantt.linkBottomMargin added
• DayPilot.Gantt.rowHeaderSplitterWidth added
• DayPilot.Gantt.milestoneWidth removed