Add new Field in the popup

[Marcio]

Hi, 

I would like to add a new  field in the popup.

For example, there is the fields Title, Start, End, Complete, I'm trying to add a new field Project Number.

Can you suggest me some documentation about it?

[Dimitar]

Hi Marcio,

In order to customize the edit popup of the Gantt, the editable.template option could be used as demonstrated in the following API reference:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/gantt/configuration/editable.template

I hope this helps.

Regards,
Dimitar
Progress Telerik

[Gabriel]

Do you know how can I do this in php?

[Martin]

Here is a link to the PHP api reference of the configuration. Below you will find how the implementation should look like:

<?php
  $editable = new \Kendo\UI\GanttEditable();
  $editable->template('my-edit-template');
?>
 
<script id="my-edit-template" 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>

Important to note is that the template should contain elements whose name HTML attributes are set as the editable fields in order for the Gantt to know which field to update. The other option is to use MVVM bindings in order to bind HTML elements to data item fields.

[Gabriel]

It seems that I'm not so good here, I don't know for which reason I get a pop-up window with a message inside "my-edit-template".

[Martin]

I am not sure I understand the current issue you are having. Could you please elaborate a bit more what the problem is, so that I can help you further?

[Gabriel]

Output:

$editablex = new \Kendo\UI\GanttEditable();

$editablex->template('my-edit-template');

?>

<script id="my-edit-template" 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>

however, the following works:

$editablex = new \Kendo\UI\GanttEditable();

$editablex->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>')
->create(true)
->update(true)
->confirmation(true);

?>

[Martin]

Could you please try using templateId instead of template?

$editablex = new \Kendo\UI\GanttEditable();

$editablex->templateId('my-edit-template');

[Gabriel]

Thank you very much. It works perfectly!

[Mario]

Hey there! actually I have a Dojo that does what you need, take a look

Best Regards