Bootstrap

In this topic we discuss how to use the RadiantQ jQuery Gantt along with Bootstrap, in the process addressing any issues that need to be addressed.

Note: A working sample of this topic can be found in the ..\PatternSamples\Bootstrap folder.

Including Bootstrap Files

a) Bootstrap js files

Include the Bootstrap JS files in a folder like this from our sample: "..\PatternSamples\Bootstrap\js".

b) Bootstrap css files

Include the Bootstrap CSS files in a folder like this from our sample: "..\PatternSamples\Bootstrap\css".

c) Fonts

Bootstrap uses some fonts and icon files that are used in it's Navbar and other controls. Include this Bootstrap folder in a path like this: "..\PatternSamples\Bootstrap\fonts"

Including Gantt References

a) HTML file referencing the Gantt Widget

First copy over all required Gantt files into the project folder. Please reference the above PatternSamples sample for the full set of files to include. This is also discussed in detail in the GanttControl Getting Started and FlexyGantt Getting Started topic.

Create a new HTML file inside the project directory (GanttWithBootstrap.html) and reference the following source files and the corresponding Bootstrap related js files and css files.

<head>

</head>

b) Sample JSON Data

Create a GanttWithBootstrap.json file containing a list of sample tasks to be displayed in the gantt.

Addressing conflicts between Bootstrap and jQuery UI

The Gantt widgets use jQuery UI and Bootstrap has some conflicts with certain jQuery UI plugins. We will address those here.

a) Tooltip styling conflicts.

To avoid some naming conflict between the jQuery UI Tooltip and Bootstrap tooltip, incldue this script:

/*** Handle jQuery plugin naming conflict between jQuery UI and Bootstrap ***/

var bootstrapTooltip = $.fn.tooltip.noConflict();

$.fn.bstooltip = bootstrapTooltip;

</script>

b) Sizing issue in Bootstrap css

Bootstrap.min.css redefines box-sizing to an undesirable setting and has to be reset for the dom elements within the gantt. We do so by including the following css:

#gantt_container *{

-webkit-box-sizing: content-box !important;

-moz-box-sizing: content-box !important;

box-sizing: content-box !important;

}

The above code will be inside "..\PatternSamples\Bootstrap\css\GanttWithBootstrap.css", "GanttWithBootstrap.css" contains all sample level css styles definitions.

Including Bootstrap Features within the Gantt

a) Using bootstrap-contextmenu.js instead of Gantt's jQuery UI based built-in context menu.

The RadiantQ jQuery Gantt provides an easy way to plugin other context menu frameworks, thereby letting the gantt use them instead of it's built-in context menu framework. Below code plugs in the Bootstrap ContextMenu into the RadiantQ Gantt.

RadiantQ.Gantt.ContextMenuImpl.ContextMenu = function (className, scope) {

var self = this;

this.ItemClicked = new ObjectEvent("ItemClicked");

this.BeforeContextMenu = new ObjectEvent("BeforeContextMenu");

this.selector = className;

var contextMenu = this;

this._position = { x: 0, y: 0 };

this.Items = new RadiantQ.Gantt.Dictionary();

$(scope).contextmenu({

target: '#context-menu',

before: function (e, context) {

$("#context-menu ul").empty();

if (contextMenu.Items.length != 0) {

self.BeforeContextMenu.raise(context, e);

// execute code before context menu if shown

var menuItems = contextMenu.Items.asArray;

for (var i = 0; i < menuItems.length; i++) {

var name = menuItems[i].name;

var $li = $("<li keyName=" + menuItems[i].keyName + " ><a tabindex='-1' href='#' style='padding:3px 10px'>" + name + "</a></li>");

if (menuItems[i].disabled == true)

$li.addClass("disabled");

$("#context-menu ul").append($li);

}

return true;

} else {

}

scopes: className,

onItem: function (context, e) {

// execute on menu item selection

var key = $(e.currentTarget).attr("keyName");

self.ItemClicked.raise(key, context);

}

});

this.AddNewItems = function (menuItems, enableDefaultItems) {

if (enableDefaultItems == false) {

this.Items = new RadiantQ.Gantt.Dictionary();

for (var i = 0; i < menuItems.length; i++)

this.Items.Add(menuItems[i].keyName, menuItems[i]);

}

else {

for (var i = 0; i < menuItems.length; i++)

this.Items.Add(menuItems[i].keyName, menuItems[i]);

}

return this;

}

</ul>

</div>

b) Bootstrap datetime picker and spinner

We now use a 3rd party bootstrap datetime picker and spinner for editing the table StartTime, EndTime and Progress columns in the Gantt table.

Note that we have also included the appropriate JS and CSS files required for these plugins in our sample.

c) Bootstrap navigation bar html with buttons to interact with Gantt

<span class="sr-only">Toggle navigation</span>

</button>

</div>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

</div>

</nav>

</div>