Kendo UI Gantt - Шаблон редактирования пользовательских задач

Question

Я создал собственный шаблон для задачи, используя этот пример:

http://docs.telerik.com/kendo-ui/api/javascript/ui/gantt

<script id="editor" type="text/x-kendo-template">
   <h3>Edit meeting</h3>
   <p><label>Title: <input name="title" /></label></p>
   <p><label>Start: <input data-role="datetimepicker" name="start" /></label></p>
   <p><label>End: <input data-role="datetimepicker" name="end" /></label></p>
</script>

Теперь мне нужно добавить кнопку "Ресурсы - Назначить", как и в этом примере (Изменить форму задачи): http://demos.telerik.com/kendo-ui/gantt/resources

Что мне нужно сделать, чтобы создать эту кнопку? Я не могу найти документацию по API для этой части элемента управления Ганта.

Answer 1

Есть несколько шагов, необходимых для достижения этой цели. Сначала добавьте что-то подобное в шаблон Kendo:

<div>
  <label for='resources'>Resources:</label>
  <div class='k-gantt-resources' style='display: none;'>
  </div>
  <div class='k-edit-field' data-container-for='resources'>
    <a class='k-button' href='\\#'>Assign</a>
  </div>
</div>

Далее вы захотите добавить следующие два обработчика событий в опции при инициализации виджета:

edit: editHandler,
save: saveHandler

Наконец, вы захотите создать два обработчика, упомянутых выше. Вы в основном перехватываете функциональность по умолчанию и открываете всплывающее окно самостоятельно, а затем сохраняете результаты по завершении (если они были изменены).

var resoucesdEdited = false;

function editHandler(e)
{
    var gantt = e.sender;
    resoucesdEdited = false;

    if (e.task)
    {
        e.container.on('click', 'div[data-container-for="resources"] > a', function (event)
        {
            event.preventDefault();
            resoucesdEdited = true;
            gantt._createResourceEditor(e.container.find('div.k-gantt-resources'), e.task);
        });
    }
}

function saveHandler(e)
{
    if (e.task && resoucesdEdited)
    {
        this._updateAssignments(e.task.get("id"), e.task.get(this.resources.field));
    }
}

Я рад, что вы задали этот вопрос, потому что это то, что мне тоже нужно было знать, и вы правы, в документации Telerik/Kendo ничего не говорится о том, как это сделать!