This is a migrated thread and some comments may be shown as answers.

Gantt Tasks - Add Custom Fields

8 Answers 702 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
BuildBinder
Top achievements
Rank 1
BuildBinder asked on 24 Dec 2015, 07:28 PM

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

Sort by
0
Bozhidar
Telerik team
answered on 25 Dec 2015, 08:16 AM
Hello,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
BuildBinder
Top achievements
Rank 1
answered on 30 Dec 2015, 07:42 PM

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 ??

0
Dimitar Terziev
Telerik team
answered on 04 Jan 2016, 07:55 AM
Hello Jose,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
BuildBinder
Top achievements
Rank 1
answered on 05 Jan 2016, 06:30 PM

 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.

 

 

<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>
0
Dimitar Terziev
Telerik team
answered on 06 Jan 2016, 08:09 AM
Hello Jose,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
BuildBinder
Top achievements
Rank 1
answered on 15 Jan 2016, 06:38 PM

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

<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>
 
0
Accepted
Dimitar Terziev
Telerik team
answered on 19 Jan 2016, 11:55 AM
Hello Jose,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
BuildBinder
Top achievements
Rank 1
answered on 26 Jan 2016, 03:46 PM
Thanks for the support.
Tags
Gantt
Asked by
BuildBinder
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
BuildBinder
Top achievements
Rank 1
Dimitar Terziev
Telerik team
Share this question
or