TimeSpan Paging

Accessing the Pager Buttons

There are buttons at the bottom right and bottom left to page the view right and left respectively. You can access them and disable them for example as follows:

In HTML

$('#container').FlexyGantt({

............

GanttChartTemplateApplied: function (sender , args) {

var ganttChart = args.element;

//setting anchor time to chart

ganttChart.setOption("AnchorTime", anchorTime);

//To disable pager buttons

ganttChart.setOption("EnablePagerButtonRight", false);

ganttChart.setOption("EnablePagerButtonLeft", false);

}

});

In ASP.NET MVC

@Html.JQFlexyGantt(

new JQFlexyGanttSettings()

{

Options = new FlexyGanttOptions()

{

...

GanttChartOptions = new GanttChartOptions()

{

AnchorTime = DateTime.Today,

EnablePagerButtonRight= false,

EnablePagerButtonLeft= false

}

)

In ASP.NET

protected void gantt_Load(object sender, EventArgs e)

{

this.gantt.GanttChartOptions.EnablePagerButtonLeft = false;

this.gantt.GanttChartOptions.EnablePagerButtonRight = false;

}

</script>

<RQ:GanttControl ID="gantt" OnLoad="gantt_Load" .. runat="server" />

Customize Paging

Sometimes you will want to "page" by a custom span, rather than the default paging behavior. You can do so, by listening to the above pager button clicks and page by your preferred time span.

In the example below, we page by 5 days, instead of the default paging behavior.

In HTML

$gantt_container = $('#gantt_container');

$gantt_container.FlexyGantt({

....................

GanttChartTemplateApplied: function (sender , args) {

var $GanttChart = args.element;

$GanttChart.GanttChart({

AnchorTime: anchorTime,

BeforePagingGanttChart: function (sender, e) {

var HScrollbar = $GanttChart.data("GanttChart").HScrollBar;

if (sender == "LeftPagerButton" && HScrollbar[0].scrollLeft == 0) {

this.AnchorTime = this.AnchorTime.clone().addDays(-5);

}

if (sender == "RightPagerButton" && HScrollbar.width() + HScrollbar[0].scrollLeft == HScrollbar[0].scrollWidth) {

this.AnchorTime = this.AnchorTime.clone().addDays(5);

}

});

}

});

In ASP.NET , ASP.NET MVC

AfterGanttWidgetInitializedCallback = function () {

ganttChart = $("#rq_gantt").data("FlexyGantt").GetGanttChart();

ganttChart.GanttChart({

BeforePagingGanttChart: function (sender , e) {

var HScrollbar = ganttChart.data("GanttChart").HScrollBar;

if (sender == "LeftPagerButton" && HScrollbar[0].scrollLeft == 0) {

this.AnchorTime = this.AnchorTime.clone().addDays(-5);

}

if (sender == "RightPagerButton" && HScrollbar.width() + HScrollbar[0].scrollLeft == HScrollbar[0].scrollWidth) {

this.AnchorTime = this.AnchorTime.clone().addDays(5);

}

});