Rank 1
Hi,
I'm trying to migrate my old gantt component for the telerik MVC gantt,
but I need to know if is possible to add new custom fields per task,
because the old one component handle more fields, like critical task, priority, status and attached files for each task, and I want to conserve these fields.
If it's possible, how to do that?.
Thanks,
Regards.
8 Answers, 1 is accepted
You can define custom task fields in the DataSource Model and set a custom Editable template. Here's a small sample demonstrating how you can define a custom field called Description:
@(Html.Kendo().Gantt<Kendo.Mvc.Examples.Models.Gantt.TaskViewModel, Kendo.Mvc.Examples.Models.Gantt.DependencyViewModel>() .Name("gantt") .Columns(columns => { columns.Bound(c => c.TaskID).Title("ID").Width(50); columns.Bound("title").Editable(true).Sortable(true); columns.Bound("Description").Title("Description").Width(100).Editable(true).Sortable(true); }) .Views(views => { views.WeekView(); }) .Editable(editable => { editable.Template("<h3>Edit task</h3>" + "<p><label>Title: <input name='title' /></label></p>" + "<p><label>Description: <input name='Description' /></label></p>" + "<p><label>Start: <input data-role='datetimepicker' name='start' /></label></p>" + "<p><label>End: <input data-role='datetimepicker' name='end' /></label></p>"); }) .Height(400) .ShowWorkHours(false) .ShowWorkDays(false) .DataSource(d => d .Model(m => { m.Id(f => f.TaskID); m.ParentId(f => f.ParentID); m.OrderId(f => f.OrderId); m.Field(f => f.Expanded).DefaultValue(true); m.Field(f => f.Summary).DefaultValue(false); m.Field(f => f.Description); }) .Read("ReadTasks", "Gantt") .Create("CreateTask", "Gantt") .Destroy("DestroyTask", "Gantt") .Update("UpdateTask", "Gantt") ))Regards,
Bozhidar
Telerik
Rank 1
Hello, your code helped me, but I have other problems.
When I used the editable.template, I lost some of the features,
for example the Assign button (of resources) and the percentage of avance() field,
What code (inputs html) need to recover these features?
And also in the columns section, I want to customize some values, because I have a boolean field and the Gantt displays the value (true or false), but I need to change these values by a checkbox or a picture, It is possible to customize the columns values ??
The purpose of the editable template is to allow the developer to defined custom edit template. You could examine the structure of the original edit form using the developer tools in the browser and to apply the necessary fields to your custom template.
Regarding your second enquery, here is a dojo snippet showing a similar implementation to the requested one.
Regards,
Dimitar Terziev
Telerik
Rank 1
Thanks for the reply again,
my question is if my code is based on MVC How could use the DataBound (e) event (javascript), because I tried to apply this event, but the Gantt is showing duplicate.
And about my customization, in the editable section I'm trying to use several comoboxes for new fields,
<div class='k-edit-label'><label for='PriorityID'>Priority</label></div>
<div data-container-for='PriorityID' class='k-edit-field'>
<input id='priority' type='combobox' data-role='combobox' name='PriorityID' />
</div>
$('#priority').kendoComboBox({
index: 0,
placeholder: 'Select priority',
dataTextField: 'text',
dataValueField: 'value',
dataSource: [
{ text: 'Low', value: '1' },
{ text: 'Normal', value: '2' },
{ text: 'High', value: '3' },
]
});
the last example is one of my combobox widget and is working fine, is linked with the TaskViewModel and is saved correctly in the database, but I have another combobox and I need that this will be filled with a datasource, I managed to do this :
<div class='k-edit-label'><label for='ResponsibleID'>Responsible</label></div><div data-container-for='ResponsibleID' class='k-edit-field'> <input id='responsible' name='ResponsibleID' required validationMessage='Enter Responsible'/></div>$('#responsible').kendoComboBox({ placeholder: 'Select responsible', dataTextField: 'Name', dataValueField: 'ResponsibleID', dataSource: { serverFiltering: true, transport: { read: { url: '/ProjectSchedule/ReadResources', dataType: 'json' } }, schema: { data: 'Data', model: { id: 'ResourceID' } },}Now the combobox if being filled with data, but is not linked with the TaskViewModel, I checked the properties and are as the others comboboxes, but it doesn't work.
how could resolved that (how can I link the widget with the field in the taskviewmodel)?
Thanks.
Handling events when using KendoUI for ASP.NET MVC is done as described in our online documentation.
Each editor should have a "name" attribute pointing to the corresponding field of the model, thus the binding mechanism will update the underlying data model when the value of the editor is changed. This is described in our API reference here.
Since you have the necessary attributes defined in your editors my suggestion is to provide a runnable sample reproducing the experience problem so we could inspect it locally.
Regards,
Dimitar Terziev
Telerik
Rank 1
Thanks a lot Dimitar for the support,
I have a great progress in my solution with the gantt (in the ui and the edit customization, see the pictures).
But I have new questions:
1) I´m trying to implement a Uploader widget in the task editing screen, I added the uploader in the edit template and I used the "name" attribute as you comment me, but the widget is not linked with the task model and the file name is no saved in the database, Is poosible implement this widget??
<div class='k-edit-label'><label for='Attachment'>File Attachment</label></div> <div data-container-for='Attachment' class='k-edit-field'> <div class='demo-section' style='width:75%;'> <input id='files' type='file' data-role='upload' name='Attachment' autocomplete='off' /> </div></div>
2) And if is it possible I need to implement the uploader in synchronous mode, my question is if the task edit window works like submit form for to use the uploader widget in synchronous mode??
3) And the last question, I need to have in the gantt rows in smallest size, how can do that ??,
or if is possible to change the scale size of the whole gantt widget (headers, titles, rows, tasks) ??
Regards
Regarding your questions:
1) Using the upload in the edit template is not supported out of the box, since this is not a widget which has a value field. Nevertheless a custom implementation could be applied, here is a dojo snippet.
2) The "Save" button of the edit template is not a submit one, it is in fact an anchor element styled as a button. My suggestion is to use the async functionality with the autoUpload option set to false as shown in our online documentation. In order to define such complex configuration via mvvm, please use the following approach:
<div class='k-edit-label'><label for='Attachment'>File Attachment</label></div> <div data-container-for='Attachment' class='k-edit-field'> <div class='demo-section' style='width:75%;'> <input id='files' type='file' data-role='upload' name='Attachment' autocomplete='off' data-async="{ saveUrl: 'save', removeUrl: 'remove', autoUpload: false }" /> </div> </div>3) In order to alter the height of the gantt rows, please use the css rules applied in the following dojo snippet.
Regards,
Dimitar Terziev
Telerik
Rank 1