Connect data from api to gantt chart

[DlegendS]

is it a solution for connect data when call api with ganttchart? like create a template or form and using ngFor to import data from api and put it into gantt chart?
Hope received the answer ASAP. Thanks 

[Monisha Sivanthilingam]

Hi DlegendS, 

 

Greetings from Syncfusion support. 

 

We can achieve your requirement by making use of the Web API Adaptor in Gantt Chart. The datasource property in Gantt Chart can be assigned with the instance of the DataManager to bind the remote data. The Web API Adaptor can be used to interact with Web API created under OData standards. We have prepared a sample using Web API Adaptor in Gantt Chart. The following code snippets demonstrate the solution. 

 

App.component.ts 

export class AppComponent{ 

// Data for Gantt 

public data: DataManager; 

public taskSettings: object; 

public columns: object[]; 

public ngOnInit(): void { 

    this.data = new DataManager({ 

        url: 'api/Orders/, 

        adaptor: new WebApiAdaptor, 

        crossDomain: true 

    }); 

            

                   … 

 

} 

} 

 

HomeController.cs 

 

namespace TestSample.Controllers 

{ 

 

    public class HomeController : Controller 

    { 

        public IActionResult GridDatasource([FromBody]DataManager dm) 

        { 

            var Data = OrdersDetails.GetAllRecords(); 

            int count = Data.Count(); 

            if (dm.skip != 0) 

                Data = Data.Skip(dm.skip).ToList(); 

            if (dm.take != 0) 

                Data = Data.Take(dm.take).ToList(); 

            return dm.requiresCounts ? Json(new { result = Data, count = count }) : Json(Data); 

        } 

            public ActionResult BatchUpdate(List<OrdersDetails> changed, List<OrdersDetails> added, List<OrdersDetails> deleted) 

            { 

 

                if (changed != null) 

                { 

                    var ord = changed[0]; 

                    OrdersDetails val = OrdersDetails.GetAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 

 

                    val.EmployeeID = ord.EmployeeID; 

                    val.OrderID = ord.OrderID; 

                    val.CustomerID = ord.CustomerID; 

                } 

                if (deleted != null) 

                { 

                    OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.EmployeeID == int.Parse(deleted[0].OrderID.ToString())).FirstOrDefault()); 

                } 

                if (added != null) 

                { 

                    OrdersDetails.GetAllRecords().Insert(0, added[0]); 

                } 

 

                List<OrdersDetails> Data = OrdersDetails.GetAllRecords().ToList(); 

                return Json(new { result = Data, count = Data.Count }); 

 

                //  return Json(data, JsonRequestBehavior.AllowGet); 

            } 

 

        } 

 

 

Please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/165258/ze/WebAPIAdaptor-1664808744 

 

We hope this meets your requirements. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[DlegendS]

so i have a form and i import data into the form through the api i call in ts file. so how can i put it data into gantt chart like this form. 

I hope i received the answer ASAP. Thank you 

Here is my example:

HTML file:

<tbody #row *ngIf="isLoading == false">

            <tr mdbTableCol *ngFor="let list of assignedLists; let i = index">

                <td style="width: 40%;height: 80px;">

                    <span  [mdbTooltip]="list.name" [ngClass]="{'item-name': list.canView}" (click)="openEditListModal(list)">

                        {{list.name}}

                    </span>

                </td>

                <td style="width: 15%" >

                    <span [mdbTooltip]="list.createdTime | date:'dd/MM/yyyy'">

                        {{list.createdTime | date:'dd/MM/yyyy' || "-"}}

                    </span> 

                </td>          

            </tr>

        </tbody>

TS file:

     ngOnInit() {

    this.isLoading = true;

    this.listService.getListByStatus(

      this.myModel.page,

      this.myModel.limit,

      this.myModel.direction,

      this.myModel.orderBy,

      this.myModel.searchText,

      "TO_ME",

      this.status).subscribe(result =>{

        this.lengthTable.emit(result.totalElements);

        this.myModel.totalElement = result.totalElements;

        if(result.totalElement > 0)

        {

          this.myModel.numberStart = 1;

        }

        this.myModel.totalPages = result.totalPages;

        this.myModel.numberEnd = result.numberOfElements;

        this.myModel.numberOfElements = result.numberOfElements;

        this.assignedLists = result.content;

        this.isLoading = false;

    })

  }

[Monisha Sivanthilingam]

Hi DlegendS, 

  

We studied the code snippets you shared. From it we can understand that you generate the task name and a date. These will be sufficient to add a new task to the Gantt. You can bind the result.content from the line this.assignedLists = result.content; in the TS file you shared to the Gantt data source object, to pass data to the Gantt. 

  

Please contact us if you have any concerns regarding this. 

  

Regards, 

Monisha.