Single API call

[Matthew]

Hi,

Our Gantt displays the results of a fairly complex calculation which is stored in a db.  Using the GanttDataSource and GanttDependencyDataSource we can load the results in a nice AJAX experience - the 2 separate api calls get the data from the DB.  However I now need to allow our calculation to be previewed without saving to the DB.  This makes having 2 api calls a pain.  It would be much easier if the calculation just returned one joint JSON response for read only viewing in the Gantt. 

I guess I could emit the data as a string embedded in the page source before its sent to the client.  Is there another way?

Thanks, Matt

 

[Matthew]

forgot to say  that I'm using Kendo UI direct in JQuery, I go switch to ASP.Net core component if it offers a solution to sending the data and dependencies together.

[Veselin Tsvetanov]

Hi Matt,

As you have correctly noted, the Gnatt widget DataSources would need separate read calls in order to load initially the data in the widget. I am afraid, that the Dependencies and Tasks could not be configured to use the same, single remote call to display the required data in the widget.

As you have properly suggested, a possible workaround in this case would be to load the data on the page before it has been sent to the client. Then you could load both the Tasks and Dependencies from the available on the client source.

Regards,
Veselin Tsvetanov
Progress Telerik

[Matthew]

Hi, Could I not:

1) initialise the widget with no data

2) use ajax to call a single api to get a json object (with tasks and dependency arrays)

3) in ajax response set the widget task and dependency data to each of the arrays

4) call gantt refresh

Any tips would be appreciated!

Or put the whole widget in a partial view and use one of these techniques to load async:

https://blog.michaelckennedy.net/2012/11/13/improve-perceived-performance-of-asp-net-mvc-websites-with-async-partialviews/

https://www.codeproject.com/Tips/1206368/An-MVC-HTML-Helper-to-Asynchronously-Load-Partial

Thanks, Matt

[Veselin Tsvetanov]

Hi Matt,

Initializing the Gantt widget with an empty Tasks and Dependencies DataSources and setting them at a later stage is a viable approach in the discussed scenario. For example, if you have requested the join data with an AJAX call to the server, you can use the setDataSource() and setDependenciesDataSource() methods in order to pass that info to the widget. By using the set... methods you won't need to refresh the Gantt view:

var tasks = data.tasks;
var dependencies = data.dependencies;

var tasksDataSource = new kendo.data.GanttDataSource({
  data: tasks,
  schema: {
    model: {
      id: "id",
      fields: {
        id: { from: "ID", type: "number" },
        orderId: { from: "OrderID", type: "number", validation: { required: true } },
        parentId: { from: "ParentID", type: "number", defaultValue: null, validation: { required: true } },
        start: { from: "Start", type: "date" },
        end: { from: "End", type: "date" },
        title: { from: "Title", defaultValue: "", type: "string" },
        percentComplete: { from: "PercentComplete", type: "number" },
        summary: { from: "Summary", type: "boolean" },
        expanded: { from: "Expanded", type: "boolean", defaultValue: true }
      }
    }
  }
});

var dependenciesDataSource = new kendo.data.GanttDependencyDataSource({
  data: dependencies,
  schema: {
    model: {
      id: "id",
      fields: {
        id: { from: "ID", type: "number" },
        predecessorId: { from: "PredecessorID", type: "number" },
        successorId: { from: "SuccessorID", type: "number" },
        type: { from: "Type", type: "number" }
      }
    }
  }
});

gantt.setDataSource(tasksDataSource);
gantt.setDependenciesDataSource(dependenciesDataSource);

You are also correct, that passing the Tasks and Dependencies data in the Model will be the other appropriate approach in this case. You even do not need to load a separate partial view. You could simply get the Model data to JavaScript and pass that data to the Gantt initialization:

var tasks = @Html.Raw(Json.Serialize(Model.Tasks));
var dependencies = @Html.Raw(Json.Serialize(Model.Dependencies));

var tasksDataSource = new kendo.data.GanttDataSource({
  data: tasks,
  schema: {
    model: {
      id: "id",
      fields: {
        id: { from: "ID", type: "number" },
        orderId: { from: "OrderID", type: "number", validation: { required: true } },
        parentId: { from: "ParentID", type: "number", defaultValue: null, validation: { required: true } },
        start: { from: "Start", type: "date" },
        end: { from: "End", type: "date" },
        title: { from: "Title", defaultValue: "", type: "string" },
        percentComplete: { from: "PercentComplete", type: "number" },
        summary: { from: "Summary", type: "boolean" },
        expanded: { from: "Expanded", type: "boolean", defaultValue: true }
      }
    }
  }
});

var dependenciesDataSource = new kendo.data.GanttDependencyDataSource({
  data: dependencies,
  schema: {
    model: {
      id: "id",
      fields: {
        id: { from: "ID", type: "number" },
        predecessorId: { from: "PredecessorID", type: "number" },
        successorId: { from: "SuccessorID", type: "number" },
        type: { from: "Type", type: "number" }
      }
    }
  }
});

var gantt = $("#gantt").kendoGantt({
  views: [
    "day",
    { type: "week", selected: true },
    "month"
  ],
  height: 700,
}).data("kendoGantt");

Regards,
Veselin Tsvetanov
Progress Telerik