jorgenkg jorgenkg - 5 months ago 49
Javascript Question

Kendo Gantt: Hooking the task template to MVVM

I've been in pursuit of a way, however hacky, to connect the Gantt diagram's task template to a ObservableObject to take advantage of the MVVM system. I am aware that the edit template support this out of the box, however I've been struggling to make it work with the task template as well.

Thanks to Josh Eastburn and his fiddle, I found that the detail template in the Kendo Grid could be bound to a MVVM through the hooking function

detailInit
.

$("#a-kendo-grid").kendoGrid({
detailTemplate: kendo.template( $("#detail-template").html() ),
detailInit: function(e) {
kendo.bind(e.detailRow, e.data); // this line produces the binding
}
})


I tried, optimistically, to alter the parameter names to refer to a task rather than a detail template when instantiating the Kendo Gantt, but it does not seem to have been implemented.

Have anyone come across another hack/trick to bind the Gantt chart's task template to MVVMs?

Answer

I've been in contact with Telerik Support. They state that they've not planned to implement a MVVM connection between a Gantt Task and its representative the task template in the timeline interface.

However, I found a hacky way to create a MVVM binding:

HTML

<div id="gantt"></div>
<script id="task-template" type="text/x-kendo-template">
    <div>
        <div>
            <span data-bind="text: title"></span>
        </div>
</script>

JavaScript

$("#gantt").kendoGantt({
  dataSource: dataSource,
  taskTemplate: $("#task-template").html(),
  dataBound: function(e) {
    var htmlElement = null;

    e.sender.dataSource.taskTree().forEach(function( taskObject ){
      htmlElement = $(".k-task[data-uid="+taskObject.uid+"]");

      if( htmlElement.find("[data-bind]").get(0).kendoBindingTarget === undefined ){
        // bind unless previously bound
        kendo.bind( htmlElement, taskObject );
      }
    });
  }
});

This snippet will hook the rendered task template elements in DOM to its representative Task object, after the Gantt Diagram has been bound to new data. This event triggers eg: post the first loading of data, and everytime the users saves an alteration to the Gantt tasks.