How to create Dynamic Kendo Gantt Chart in ASP.Net ตอนที่ 1

Kendo มักจะมีฟังค์ชั่นให้กับเราในการสร้าง Chart ต่างๆเสมอ แต่ว่าหากว่าเป็น Chart ที่เราต้องจัดการเองเช่น Dynamic Gantt Chart ซึ่งเป็นแบบไดนามิคและเราจำเป็นจะต้องจัดการชาร์ตนี้เอง Kendo เองไม่อาจจะทำแบบนี้ได้โดยตรง แต่ว่าเราสามารถจัดการได้ดังเช่นในตัวอย่างข้างล่าง

Dynamic Gantt Chart ในตัวอย่างเป็นการสร้าง Gantt Chart ที่แสดง รายการงานที่พนักงานหนึ่งคนได้รับผิดชอบต่อหนึ่งวัน ซึ่งในหนึ่งวันก็จะมีจำนวน 4 ชั่วโมง แล้วในแต่ละชั่วโมงนั้นก็มีหลายงานหลัก และในหนึ่งงานหลักที่มีหลายงานย่อย อีกที ซึ่งการนำข้อมูลในลักษณะนี้มาทำเป็น Gantt Chart แบบนี้ค่อนข้างยากที่จะทำตาม Gantt Chart ปกติของ Kendo แต่ว่านี่คือตัวอย่างที่เราได้ทำมาแล้ว และทำออกมาในรูปแบบดังภาพข้างล่างนี้

สำหรับตัวอย่าง View Model ก็จะเป็นแบบนี้

public class GanttChartViewModel : ViewModelBase
{
    public string Name {get; set;}
    public DateTime? StartDate {get; set;}
    public DateTime? EndDate {get; set;
    public IEnumerable<DetailList> JobDetailList {get; set;}
    public GanttChartViewModel(GanttChart model)
    {
        Name=model.Name;
        StartDate=model.StartDate;
        EndDate=model.EndDate;
        JobDetailList=model.JobDetailList;
   }
}
public class DetailList
{
    public long Id {get; set;}
    public JobNumber {get; set;}
    public bool H08 {get; set;}
    public bool H09 {get; set;}
    public bool H10 {get; set;}
    public bool H11 {get; set;}
    public int DateSequence {get; set;}
    public string JobDetail {get; set;}
}

ตรงส่วนของโค้ด Web UI Controller สร้าง List เพื่อเก็บข้อมูลจากหลังบ้าน จากนั้นก็ return เป็น json ออกไป

List<GanttChart> list = result.Body.Value.Data.ToList();
var viewModels = list.Select(item => new GanttChartViewModel(item)).ToList();
DataSourceResult dataSourceResult = new DataSourceResult
{  Errors = result.Body.Value.Errors,
   Total = result.Body.Value.Total,
   Data = viewModels
};
var ganttChartResult = Json(dataSourceResult, JsonRequestBehavior.AllowGet);
return ganttChartResult;

ติดตามต่อได้ใน Part 2 ซึ่งจะกล่าวถึงการวาด Gantt Chart ที่แท้จริง

1. ใน Java Script ก็เขียนฟังชั่นค์ ในการเรียกข้อมูลโดยใช้ Ajax Call ซึ่งถ้าได้ข้อมูลมาแล้วก็จะสั่งให้ฟังค์ชั่น สำหรับการเรนเดอร์ฟังชั่นต่อไป ดังภาพข้างนี้นี้

2.หลังจากที่ได้ข้อมูลมาแล้ว ก็จะมาทำการสร้างหัวคอลัมน์ใน Grid กัน ซึ่งในตัวอย่างนี้ใช้ วันเริ่มต้น กับวันสุดท้าย จากวันที่ที่เลือกมา จากนั้นก็สร้าง ตัวแปรแบบ Array ขึ้นมาเก็บชื่อของแต่ละคอลัมน ์ซึ่งส่วนที่สำคัญคือการ ทำ Group Header เป็นการ group ชั่วโมง ต่อ วัน

3. Use script to create a template. This script will generate a table and put it on grid.

4. Use this function to draw a table and return it to grid. This function is about find the whole column time, paint a line for gantt chart, and create a tooltip.

First of all, we have to find the unique job per day.

Then loop that unique job list to find time of each job in each day.

After get the list of job and job detail, then collect job detail together. And draw it on table. This table will be return to grid and show as a gantt chart. You can write a tooltip in table, when you use mouse hover it the message of job detail will pop up.

After it draw a table and the line then set these value to zero.

This is the function use to get only unique value.

Here is the final result. You will get the gantt chart that show job in each hour that employer get and can view the detail of job by using mouse hover like picture below.