Gantt Tasks - Add Custom Fields

9 posts, 1 answers
  1. Jose
    Jose avatar
    7 posts
    Member since:
    Dec 2015

    Posted 24 Dec 2015 Link to this post

    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.

  2. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 25 Dec 2015 Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jose
    Jose avatar
    7 posts
    Member since:
    Dec 2015

    Posted 30 Dec 2015 in reply to Bozhidar Link to this post

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

  5. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 04 Jan Link to this post

    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
  6. Jose
    Jose avatar
    7 posts
    Member since:
    Dec 2015

    Posted 05 Jan in reply to Dimitar Terziev Link to this post

     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>
  7. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 06 Jan Link to this post

    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
  8. Jose
    Jose avatar
    7 posts
    Member since:
    Dec 2015

    Posted 15 Jan in reply to Dimitar Terziev Link to this post

    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>
     
  9. Answer
    Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 19 Jan Link to this post

    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
  10. Jose
    Jose avatar
    7 posts
    Member since:
    Dec 2015

    Posted 26 Jan in reply to Dimitar Terziev Link to this post

    Thanks for the support.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready