Grid in the Scheduler Edit Template

Environment

Progress® Kendo UI® Scheduler for jQuery

Product

Progress® Kendo UI® Grid for jQuery

Description

How can I add a Grid in the editable template of the Scheduler with an additionally dynamically bound row editor ?

Solution

1. In the edit template of the Scheduler add a Grid using the MVVM binder scenario (using data-role="grid").
2. Add an empty 'rowEditor' container inside the edit template.
3. Using the edit event of the Scheduler you can programmatically inject the detached row editor and create the temporary model for the binder.

<script id="editor" type="text/x-kendo-template">
   <h3>Edit meeting</h3>
   <p>
       <label>Title: <input data-bind="value: title" class="k-input k-textbox k-input-solid k-input-md k-rounded-md" /></label>
   </p>
   <p>
       <label>Start: <input data-role="datetimepicker" data-bind="value: start" /></label>
   </p>
   <p>
       <label>End: <input data-role="datetimepicker" data-bind="value: end" /></label>
   </p>
   <div id="rowEditor">

   </div>
   <div id="rowGrid" data-role="grid" data-bind="source: rows" 
            data-selectable="true"
        data-columns="[
                                 { 'field': 'name', 'title': 'Name', 'width': 270 },
                                 { 'field': 'field', 'title': 'Field' }
                              ]">
   </div>
</script>

<script id="rowEditor" type="text/x-kendo-template">
        <p>
       <label>Name: <input  data-bind="value: selected.name" class="k-input k-textbox k-input-solid k-input-md k-rounded-md" /></label>
   </p>
   <p>
       <label>Field: <input data-bind="value: selected.field" class="k-input k-textbox k-input-solid k-input-md k-rounded-md" /></label>
   </p>
   <button data-role="button" data-bind="click: add">Add</button>
   <button data-role="button" data-bind="click: update">Update</button>
   <button data-role="button" data-bind="click: remove">Remove</button>
   <button data-role="button" data-bind="click: clear">Clear</button>
</script>


<div id="scheduler"></div>
<script>


$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  editable: {
    template: $("#editor").html()
  },
  views: [
    { type: "day" }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview",
      rows: [ 
        { name: "Name 1", field: "Field 1" }, 
        { name: "Name 2", field: "Field 2" }
      ]
    },
    {
      id: 2,
      start: new Date("2013/6/6 10:00 AM"),
      end: new Date("2013/6/6 11:00 AM"),
      title: "Interview 2",
      rows: []
    }
  ],
  edit: function (ev) {
    var event = ev.event,
        container = ev.container,
        rowEditorContainer = container.find("#rowEditor"),
        grid = container.find("#rowGrid").data("kendoGrid");

    if (!event.rows) {
        event.set("rows", []);
    }

    var rowModel = kendo.observable({
          selected: { name: "", field: "" },
          add: function () {           
            grid.dataSource.insert(this.get("selected"));
          }, 
          update: function () {
            // Updates of a selected row happen automatically due to the Binder. 
          }, 
          remove: function () {
            grid.dataSource.remove(this.get("selected"));
            this.set("selected", { name: "", field: "" })
          }, 
          clear: function () {
            grid.clearSelection();
            this.set("selected", { name: "", field: "" })
          }
    });

    grid.bind("change", function (ev) {
      var selectedRow = ev.sender.select()[0];
      var selectedDataItem = ev.sender.dataItem(selectedRow);
      rowModel.set("selected", selectedDataItem);
    });    

    rowEditorContainer.html($("#rowEditor").html());
    kendo.bind(rowEditorContainer, rowModel);
  }
});
</script>

See Also

• API Reference of the Scheduler