We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hi,
I'm still researching for this and I found that this example much better for my application:
http://asp.syncfusion.com/demos/web/gantt/ganttworkingtimerange.aspx
But I still have a long way to go.
Thanks,
Andy
Hi Dharani,
Thank you for this! If we cannot have all the functions in Windows Forms, lets make it in JS. Like the example: http://asp.syncfusion.com/demos/web/gantt/ganttworkingtimerange.aspx
We can add Date range picker for start and end schedule dates for the chart and to load from mysql database into the datagrid with all task for the chosen period. Also a filter dropdown menu for Lines and textbox search for Name/Employee Id number.
Thank you for your help!
Andy
|
[ASPX]
<body>
<form id="form1" runat="server">
<ej:Gantt ID="Gantt" runat="server" ... >
//...
</ej:Gantt>
StartDate: <ej:DatePicker runat="server" ID="datepick"></ej:DatePicker>
EndDate: <ej:DatePicker runat="server" ID="EndDatePicker"></ej:DatePicker>
<button id="butt">Update</button>
<script type="text/javascript">
$("#butt").on("click", function (e) {
e.preventDefault();
var startObj = $("#datepick").ejDatePicker("instance"), tempArgs = {},
endObj = $("#EndDatePicker").ejDatePicker("instance");
tempArgs.startDate = startObj.model.value;
tempArgs.endDate = endObj.model.value;
PageMethods.ChangeScheduleDate(tempArgs,
function (result) {
var ganttObj = $("#Gantt").ejGantt("instance"),
tempStartObj = $("#datepick").ejDatePicker("instance"),
tempEndObj = $("#EndDatePicker").ejDatePicker("instance");
ganttObj.model.scheduleStartDate = tempStartObj.model.value;
ganttObj.model.scheduleEndDate = tempEndObj.model.value;
ganttObj.option("dataSource", result);
});
});
</script>
</form>
</body> |
|
[ASPX.CS]
namespace GanttTestSample
{
//..
public class GetDateRange
{
public DateTime startDate { get; set; }
public DateTime endDate { get; set; }
}
//..
[WebMethod]
public static object ChangeScheduleDate(GetDateRange data)
{
//..
using (con)
{
using (var command = con.CreateCommand())
{
DateTime start = data.startDate;
DateTime end = data.endDate;
command.CommandText = "SELECT * FROM GanttData WHERE StartDate BETWEEN CONVERT(datetime,'" + start + "') AND CONVERT(datetime,'" + end + "')";
using (var reader = command.ExecuteReader())
{
var indexOfCol1 = reader.GetOrdinal("TaskId");
var indexOfCol2 = reader.GetOrdinal("TaskName");
//..
while (reader.Read())
{
GanttSample res = new GanttSample();
TaskData obj = new TaskData();
obj.TaskId = Convert.ToInt32(reader.GetValue(indexOfCol1));
obj.TaskName = reader.GetValue(indexOfCol2).ToString();
//..
list.Add(obj);
}
reader.Close();
}
}
con.Close();
}
return list;
}
} |
|
[ASPX]
<body>
<form id="form1" runat="server">
<ej:Gantt ID="Gantt" runat="server" ... >
//...
<ToolbarSettings ShowToolbar="true" ToolbarItems="add,edit, … ,search" />
</ej:Gantt>
</form>
</body> |
Hi,
This forum is awesome! Thank for your help!
I'm new to ASP.net, but I think you didn't attached the solution file for the sample, if you can please attach also the solution because I have some miss matching dll files if I import only the gantt files.
Can you please help me also getting the connection with mysql database ?
Many thanks!
Andy
|
[ASPX]
<head>
<title>Gantt</title>
<meta charset="utf-8" />
//...
<script src="Scripts/ej.web.all.min.js"></script>
<link rel='nofollow' href="Themes/ej.widgets.core.min.css" rel="stylesheet" />
<link rel='nofollow' href="Themes/default-theme/ej.theme.min.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
//...
<div id="Gantt" style="height: 300px; width: 100%;"></div>
<input id="datepick" type="text" />
<input id="EndDatePicker" type="text" />
<button id="butt">Change</button>
</form>
<script type="text/javascript">
$(function () {
var dataManager = ej.DataManager({
url: "/Gantt.aspx/GetGanttData",
adaptor: "UrlAdaptor"
});
$("#Gantt").ejGantt({
dataSource: dataManager,
//...
});
$("#datepick").ejDatePicker({});
$("#EndDatePicker").ejDatePicker({});
});
</script>
<script type="text/javascript">
$("#butt").on("click", function (e) {
e.preventDefault();
var startObj = $("#datepick").ejDatePicker("instance"), tempArgs = {},
endObj = $("#EndDatePicker").ejDatePicker("instance");
tempArgs.startDate = startObj.model.value;
tempArgs.endDate = endObj.model.value;
PageMethods.ChangeScheduleDate(tempArgs,
function (result) {
var ganttObj = $("#Gantt").ejGantt("instance"),
tempStartObj = $("#datepick").ejDatePicker("instance"),
tempEndObj = $("#EndDatePicker").ejDatePicker("instance");
ganttObj.model.scheduleStartDate = tempStartObj.model.value;
ganttObj.model.scheduleEndDate = tempEndObj.model.value;
ganttObj.option("dataSource", result);
});
});
</script>
</body> |
|
[ASPX.CS]
public class TaskData
{
public string Id { get; set; }
public string Name { get; set; }
//...
}
public class GetDateRange
{
public DateTime startDate { get; set; }
public DateTime endDate { get; set; }
}
[WebMethod]
public static object GetGanttData()
{
string con_string = "Server=localhost;Database=tgrid;Uid=root;Pwd=Treegrid"; // Change your MySQL username and password.
//...
command.CommandText = "SELECT * FROM gantt";
con.Open();
MySqlDataReader dr = command.ExecuteReader(); //execute select query
var indexOfCol3 = dr.GetOrdinal("StartDate");
while (dr.Read())
{
TaskData obj = new TaskData();
obj.Id = dr["taskID"].ToString();
//...
list.Add(obj);
}
con.Close();
return list;
}
[WebMethod]
public static object ChangeScheduleDate(GetDateRange data)
{
String start = data.startDate.ToString("yyyy/MM/dd");
String end = data.endDate.ToString("yyyy/MM/dd");
//...
string con_string = "Server=localhost;Database=tgrid;Uid=root;Pwd=Treegrid";
//...
command.CommandText = "SELECT * FROM `gantt` WHERE startDate >= '" + start + "' AND startDate <= '" + end + "'";
con.Open();
MySqlDataReader dr = command.ExecuteReader(); //execute select query
while (dr.Read())
{
TaskData obj = new TaskData();
obj.Id = dr["taskID"].ToString();
//...
list.Add(obj);
}
con.Close();
return list;
} |
Hi,
This is great! I already made it run with my database.
How can I show in Gantt these columns from the database?
- employee_no
- employee_name
- employee_Fname
and to be sort it on load by Start Date and time.
Can I have the hierarchy in Gantt based on employee_no not task id ?
If we add the columns can we search for the name of employee not the task name?
Thanks in advance!
Andy
|
[ASPX]
$("#Gantt").ejGantt({
dataSource: dataManager,
//..
load: 'load'
});
<script type="text/javascript">
function load(args) {
var columns = this.getColumns();
//..
//To bind the custom field
columns.splice(2, 0,
{
field: "Employee_Name",
headerText: "Employee_Name",
editType: "stringEdit",
mappingName: "Employee_Name",
width: "180px"
});
columns.splice(3, 0,
{
field: "Employee_Fname",
headerText: "Employee_Fname",
editType: "stringEdit",
mappingName: "Employee_Fname",
width: "180px"
});
}
</script> |
|
[ASPX.CS]
[WebMethod]
public static object GetGanttData()
{
//..
command = con.CreateCommand();
command.CommandText = "SELECT * FROM gantt ORDER BY startDate Asc";
con.Open();
MySqlDataReader dr = command.ExecuteReader(); //execute select query
while (dr.Read())
{
TaskData obj = new TaskData();
obj.Employee_ID = dr["Employee_ID"].ToString();
//..
list.Add(obj);
}
con.Close();
return list;
} |
|
[ASPX]
$("#Gantt").ejGantt({
dataSource: dataManager,
taskIdMapping: "Employee_ID",
parentTaskIdMapping: "TeamId",
//..
load: 'load'
});
<script type="text/javascript">
function load(args) {
var columns = this.getColumns();
//To Rename the Header text of Task Id column to Employee_id.
columns[0].width = '180px';
columns[0].headerText = 'Employee_ID';
} |
|
[ASPX]
$("#Gantt").ejGantt({
dataSource: dataManager,
//..
toolbarSettings: {
showToolbar: true,
toolbarItems: [ej.Gantt.ToolbarItems.Search]
},
}); |
Hi,
Now the application is working. But before future work, I wanted to deploy the application and to use it in windows 10 IIS. I'm very confused about SQL requirement of database and my application on mysql.
Also I have the error :
The error is only when I try to publish it.
Can you please help me with step by step tutorial how can I publish it ?
Thank you,
Andy
I finally succeeded to publish as package and import in the local IIS.
This is the page from Visual Studio:
This is the page from IIS:
Gantt is not showing.
Any idea how to fix it ?
Thanks,
Andy
Hi,
I have seen some sample applications with javascript has only a html page with gantt. Can you help me converting the code with mysql in that kind of page? Maybe is easier than to find what is the issue with IIS.
Maybe Javascript with DataManager and Php file datasource.
Thank you in advance!
Andy
|
[html]
<script type="text/javascript">
$(function () {
var dataManager = ej.DataManager({
url: "http://localhost:10080/Ganttphp/crud.php/?action=getData",
});
$("#Gantt").ejGantt({
dataSource: dataManager,
//
});
$("#datepick").ejDatePicker({});
$("#EndDatePicker").ejDatePicker({});
});
$("#butt").on("click", function (e) {
e.preventDefault();
var ganttObj = $("#Gantt").ejGantt("instance");
var startObj = $("#datepick").ejDatePicker("instance"), tempArgs = {},
endObj = $("#EndDatePicker").ejDatePicker("instance");
tempArgs.startDate = startObj.model.value;
tempArgs.endDate = endObj.model.value;
var encoded = JSON.stringify(tempArgs);
$.ajax({
type: "POST",
url: 'http://localhost:10080/GanttPHP/crud.php/?action=update',
data: encoded,
success: function (data) {
var ganttObj = $("#Gantt").ejGantt("instance"),
tempStartObj = $("#datepick").ejDatePicker("instance"),
tempEndObj = $("#EndDatePicker").ejDatePicker("instance");
ganttObj.model.scheduleStartDate = tempStartObj.model.value;
ganttObj.model.scheduleEndDate = tempEndObj.model.value;
ganttObj.option("dataSource", ej.parseJSON(data));
}
})
});
</script>
[PHP]
function getData(){
//connection to the database
$dbhandle = mysql_connect("localhost", "root" , "Treegrid");
$selected = mysql_select_db("tgrid",$dbhandle);
//execute the SQL query and return records
$result = mysql_query("SELECT Employee_ID,taskName,startDate,duration,TeamId,progress,Employee_Name,Employee_Fname FROM gantt");
//fetch tha data from the database
$emparray=array();
while ($row = mysql_fetch_assoc($result)) {
if($row['TeamId']== ""){
$row['TeamId']= null;
}
$emparray[]=$row;
}
echo json_encode($emparray);
}
function update(){
//connection to the database
$dbhandle = mysql_connect("localhost", "root" ,"Treegrid");
$selected = mysql_select_db("tgrid",$dbhandle);
$json_del=file_get_contents("php://input");
$obj_del = json_decode($json_del,true);
$startDate = date( "Y-m-d", strtotime($obj_del['startDate']));
$endDate = date( "Y-m-d", strtotime($obj_del['endDate']));
//to filter the required data
$result = mysql_query("SELECT * FROM `gantt` WHERE startDate >= '" .$startDate. "' AND startDate <= '".$endDate. "'");
//fetch tha data from the database
$emparray=array();
if ($result){
while ($row = mysql_fetch_assoc($result)) {
if($row['TeamId']== ""){
$row['TeamId']= null;
}
$emparray[]=$row;}
}
echo json_encode($emparray);
} |
Hi,
Thank you so much for this! Everything is working. Now I'm setting up some details.
I encounter some difficulties to set the schedulestartdate and scheduleenddate dinamically. For example when I'm getting the data from database I made the formula to get by default all the data between last week monday and last week friday.
$lastweek_monday = date('Y-m-d', strtotime('Monday last week today')); $lastweek_friday = date('Y-m-d', strtotime('Friday last week today')); $sql = "SELECT id,htc,start_Date,actual_duration,employee_no,empl_eff,Employee_Name,Employee_Fname, start_time, line FROM production_input where start_Date >= '$lastweek_monday' AND start_Date <= '$lastweek_friday' and line = '1' order by line, start_date,start_time";
Until here, all good, but the schedulestartdate and scheduleenddate are set manually. How can I set them dinamically for schedulestartdate = last week Monday and scheduleenddate = last week Friday?
I also added a dropdown menu with the production lines (Ex: ALL, 1, 2, 3, ...12). How can I update automatically the gantt after they selected the LINE?
This is my code for dropdown:
div id="line" style="float: left;">Line: <input type="text" id="dropdown" /> div> <div id="lines" > <ul> <li>ALLli> <li>1li> <li>3li> <li>4li> <li>5li> <li>6li> <li>7li> <li>8li> <li>9li> <li>10li> <li>11li> <li>12li> ul> div><script> // Creates the DropDownList $('#dropdown').ejDropDownList({targetID: "lines", enableAnimation: true, value: "1"}); script>
Also how can I change the name of the PROGRESS to "EFF"? I tried on load function : columns[7].headerText = 'EFF'; but is not changing.
Another issue I have with the duration and working time. Daily working time can be different, so if I set start_Date and duration will not end up as in the database. Can I have the gantt with start_date and end_date without duration?
THank you,
Andy
|
[Html]
$("#butt").on("click", function (e) {
e.preventDefault();
var ganttObj = $("#Gantt").ejGantt("instance");
var startObj = $("#datepick").ejDatePicker("instance"), tempArgs = {},
endObj = $("#EndDatePicker").ejDatePicker("instance");
tempArgs.startDate = startObj.model.value;
tempArgs.endDate = endObj.model.value;
var encoded = JSON.stringify(tempArgs);
$.ajax({
type: "POST",
url: 'http://localhost:10080/GanttPHP/crud.php/?action=update',
data: encoded,
success: function (data) {
//to parse the retrieved data
var retrievedData = ej.parseJSON(data);
//fetch tha data from the database
var ganttObj = $("#Gantt").ejGantt("instance"),
tempStartObj = $("#datepick").ejDatePicker("instance"),
tempEndObj = $("#EndDatePicker").ejDatePicker("instance");
ganttObj.model.scheduleStartDate = retrievedData.sDate;
ganttObj.model.scheduleEndDate = retrievedData.eDate;
ganttObj.option("dataSource", retrievedData.dataSource);
}
})
});
[PHP]
function update(){
//
$test = array();
$test['dataSource'] = $emparray;
$test['sDate'] = $lastweek_monday;
$test['eDate'] = $lastweek_friday;
echo json_encode($test);
} |
|
$("#Gantt").ejGantt({
showColumnChooser: true,
showColumnOptions: true,
});
function load(args) {
//to change the progress header text
columns[4].headerText = 'Modified Progress';
//To bind the custom field
} |
|
Duration Mapping |
Description |
|
Yes |
End date will be calculated based on startdate and duration even though endDate is mapped. |
|
No |
Duration will be calculated based on start date and end date values. |
|
$("#Gantt").ejGantt({
startDateMapping: "startDate",
endDateMapping:"endDate",
}); |
Hi again,
This is great! Everything applied and is working.
I tried to apply also the code from the sample for exporting, but I cannot find a way to make it work.
I tried to use the following function, but is not working:
function toolbarClick(args) {
var id = $(args.currentTarget).attr("id");
this.exportGantt = this["export"];
if (id == "GanttContainer_pdfExport") {
this. exportGantt("http://js.syncfusion.com/demos/ejServices/api/Gantt/PdfExport", "", false);
args.cancel = true;
}
if (id == "GanttContainer_excelExport") {
this. exportGantt("http://js.syncfusion.com/demos/ejServices/api/Gantt/ExcelExport", "", false);
args.cancel = true;
} }
