Gantt chart displays data from a class containing activities that are occuring in certain time frames and continue one after each other. Every activity belongs to a certain whole, project. We always display activities related to certain project in the Gantt chart. We can set the project, activities of which should be displayed, in several ways.
- Setting up project directly in the webpart
- Setting up project by a variable in URL
- Setting up project by means of project selector (combobox)
Setting up project directly in the webpart
Project can be determined by the webpart property Project Id. Use this option, when you created a page determined directly for the given project and therefore you do not need to switch between projects.
Setting up project by a variable in URL
Set the variable name in the webpart definition in the property Name of the control parameter in the URL. If you then add the variable in URL with Id of the project, Gantt chart will display activities related to these project.
Example:
https://demo2.objectgears.cz/WebContentPage.aspx?Id=64&gantt1=25
URL contains parameter gannt1 with value 25. You have to state gantt1 in the property Name of the control parameter in the URL of the webpart of the given page. Gantt chart will then display activities related to project Id 25.
This setting can be used if you want to call the given page from a list of projects when a button at each project will insert Id of the project into URL.
Setting up project by means of project selector (combobox)
In case of a generic page, that should be used for more projects, you will probably want to allow user selecting project, for which the gantt chart should be displayed and further switch the project by the selector.
You can define the selector in the page or directly in the webpart Script.
Definition of the project selector in a page
We can define the control element combobox and records that it contains in the tab Scripts.
function OnLoad()
{
var projectsV = OGControls['projects'];
projectsV.ClientIDMode = System.Web.UI.ClientIDMode.Static;
projectsV.Items.Add(new System.Web.UI.WebControls.ListItem("", "-"));
projectsV.Items.Add(new System.Web.UI.WebControls.ListItem("Projekt 26", "26"));
projectsV.Items.Add(new System.Web.UI.WebControls.ListItem("Projekt 25", "25"));
}
Then we insert webpart script into the page, that will respond to the selection of a value in the combobox. The script from the tab JavaScript sets the project in the Gannt chart with the Name of the control element gannt1.
<div id=""gg{WebPart.Id}"" class=""og-gantt"" wpid=""{WebPart.Id}"" projectId=""{projectId}""></div>
<script type=""text/javascript"">
$(function()
{{
$('#projects').change(function() {
var value = $( "#projects" ).val();
var ggElement = $('li.gantt1 div.og-gantt');
ggElement.attr('projectId', value);
ggElement.ganttGraph();
});
}});
</script>";
Definition of the project selector in the webpart Script
You can define the selector also in the webpart Script. Skript from the tab Script will read records from the class project of the model it into the combobox.
function OnLoad()
{
var cl = OG.Model.GetByCode('it').ClassDefs['project'];
var f = OG.DataRow.GetDataRowFilter(cl.Id);
f.Filter_OnlyActive = true;
var drl = OG.DataRow.GetDataByFilter(f);
var html = ''; for (var i = 0; i < drl.Count; ++i) { var dr = drl[i]; html += '' + dr.Id + ' - ' + dr.ShortDescriptionOrFullId + ''; } html += '';
var l = OGForm.CreateOGLabel('l1', html);
OGForm.AddControl(l);
}
Response to the choice in the combobox will be again secured by the Script in tab JavaScript, that will set the project in the Gannt chart with the Name of the control element gannt1.
<div id=""gg{WebPart.Id}"" class=""og-gantt"" wpid=""{WebPart.Id}"" projectId=""{projectId}""></div>
<script type=""text/javascript"">
$(function()
{{
$('#projectsX').change(function() {
var value = $( "#projectsX" ).val();
var ggElement = $('li.gantt1 div.og-gantt');
ggElement.attr('projectId', value);
ggElement.ganttGraph();
});
}});
</script>";