1

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?

1 Answer 1

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.