Header Text Format and Header Height Customization

Header Height

You can specify a custom height for each of the headers in the GanttChart using the TimeScaleHeaderDefinition.HeaderHeight property.

For example, to change the height of the top-most header:

In HTML

var self = this;

$(document).ready(function(){

var tmshs = new RadiantQ.Gantt.TimeScaleHeaderDefinitions();

tmshs.HeaderCollection.add(self.monthHeaderLine());

tmshs.HeaderCollection.add(self.weekHeaderLine());

tmshs.HeaderCollection.add(self.dayHeaderLine());

$('#container').FlexyGantt({

TimeScaleHeaders : tmshs,

.........

});

function weekHeaderLine(){

var weeksHeader = new RadiantQ.Gantt.TimeScaleHeaderDefinition();

weeksHeader.Type = RadiantQ.Gantt.TimeScaleType.Weeks;

return weeksHeader;

}

function monthHeaderLine(){

var monthsHeader = new RadiantQ.Gantt.TimeScaleHeaderDefinition();

monthsHeader.Type = RadiantQ.Gantt.TimeScaleType.Months;

monthsHeader.HeaderHeight=25;

return monthsHeader;

}

function dayHeaderLine(){

var daysHeader = new RadiantQ.Gantt.TimeScaleHeaderDefinition();

daysHeader.TextFormat = "ddd";

daysHeader.Type = RadiantQ.Gantt.TimeScaleType.Days;

return daysHeader;

}

In ASP.NET MVC

@Html.JQFlexyGantt(

new JQFlexyGanttSettings()

{

ControlId = "gantt_container",

AfterDataRetrievedCallback = "AfterDataRetrievedCallback",

AfterGanttWidgetInitializedCallback = "AfterGanttWidgetInitializedCallback",

DataSourceUrl = new Uri("/Home/GetFlexyGanttItemSource", UriKind.RelativeOrAbsolute),

Options = new FlexyGanttOptions()

{

TimeScaleHeaders = new TimeScaleHeaderDefinitions(){

new TimeScaleHeaderDefinition(){

Type = TimeScaleType.Months

new TimeScaleHeaderDefinition(){

Type = TimeScaleType.Weeks

new TimeScaleHeaderDefinition(){

Type = TimeScaleType.Days,HeaderHeight=22

}

})

In ASP.NET

<RQ:GanttControl ID="gantt" DataSourceUrl="../../DataSources/TaskListHandler.ashx"

AfterGanttWidgetInitializedCallback="AfterGanttWidgetInitializedCallback"

TimeRangeHighlightBehavior="HighlightInChartOnHeaderMouseHover"

LocalizationResourceFilePath="../../Src/ResourceStrings/"

Height="500px" runat="server" >

<GanttBase:TimeScaleHeaderDefinition Type="Years" Name="yearHeader" />

<GanttBase:TimeScaleHeaderDefinition Type="Months" Name="monthHeader" TextFormat="MMM yyyy" />

<GanttBase:TimeScaleHeaderDefinition Type="Days" Name="daysHeader" HeaderHeight="22" />

</TimeScaleHeaders>

</RQ:GanttControl>

Changing the chart header's height will automatically change the height of the grid's header.

Header Text Format

a) The TimeScaleHeaderDefinition type lets you specify the format string that will be internally used in the Date().toString method to arrive at the text that is to be displayed in the headers above.

Set a custom TextFormat value to customize this. The supported format strings are discussed here.

In HTML

function dayHeaderLine(){

var daysHeader = new RadiantQ.Gantt.TimeScaleHeaderDefinition();

daysHeader.TextFormat = "ddd";

daysHeader.Type = RadiantQ.Gantt.TimeScaleType.Days;

return daysHeader;

}

In ASP.NET MVC And ASP.NET

new TimeScaleHeaderDefinition()

{

Type = TimeScaleType.Days,

TextFormat="ddd"

}

Custom format in day headers.

b) The gantt also provides you the ability to specify multiple text formats and intelligently displays the format that best fits the available width. For example:

headers.Add(new TimeScaleHeaderDefinition() { Type = TimeScaleType.Days, TextFormat="M|dd" });

In HTML

function dayHeaderLine(){

var daysHeader = new RadiantQ.Gantt.TimeScaleHeaderDefinition();

daysHeader.TextFormat = "MMMM dd |dd";

daysHeader.Type = RadiantQ.Gantt.TimeScaleType.Days;

return daysHeader;

}

In ASP.NET MVC And ASP.NET

new TimeScaleHeaderDefinition()

{

Type = TimeScaleType.Days,

TextFormat=""MMMM dd |dd"

}

... will cause the gantt to first try to render the date in "MMMM dd" format like this:

Day headers rendered in "MMMM dd" format.

... and when the headers size is not big enough to accommodate the text, it would render in "dd" format like this:

Day headers rendered in "dd" format

Also, if the default formatting options don't suffice, you can provide custom header texts as follows:

// Customize the weekly header's text:

In HTML

function weeksHeaderLine()

{

var weeksHeader = new RadiantQ.Gantt.TimeScaleHeaderDefinition();

weeksHeader.Type = ns_gantt.TimeScaleType.Weeks;

weeksHeader.ProvideCustomHeaderText.subscribe( provideCustomHeaderText );

function provideCustomHeaderText( sender, args )

{

var jan1st = new Date( args.dateTime.getFullYear(), 0, 1, 0, 0, 0, 0 );

var days = new TimeSpan( args.dateTime - jan1st ).days;

var weeks = days / 7;

args.Text = "W " + weeks.toString();

args.TooltipText = "Week of " + args.dateTime.toShortDateString();

}

return weeksHeader;

}

In ASP.NET MVC And ASP.NET

function provideCustomHeaderText(sender, args) {

var jan1st = new Date(args.dateTime.getFullYear(), 0, 1, 0, 0, 0, 0);

var days = new TimeSpan(args.dateTime - jan1st).days;

var weeks = days / 7;

args.Text = "W " + weeks.toString();

args.TooltipText = "Week of " + args.dateTime.toShortDateString();

}

</script>

new TimeScaleHeaderDefinition()

{

Type = TimeScaleType.Weeks,

ProvideCustomHeaderText="provideCustomHeaderText"

}

Weeks in the format "W XX"