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

To use the drag handler in task progress bar

3 Answers 42 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
Keerthana
Top achievements
Rank 1
Keerthana asked on 08 May 2017, 11:51 AM

Hi,

I'm not able to get the drag handler in the task progress bar.I want implement drag handler to change the percent complete. This is my code

@(Html.Kendo().Gantt<TaskGanttFacade, TaskGanttDependencyFacade>((IEnumerable<TaskGanttFacade>)ViewBag.Tasks, (IEnumerable<TaskGanttDependencyFacade>)ViewBag.Dependencies)
          .Name("gantt")
                  .DataSource(ds => ds.Read(read => read
                                    .Action("Tasks", "Home")
                                )  
              .Model(m =>
              {
                  m.Id(f => f.Id);
                  m.ParentId(f => f.ParentId);
                  m.OrderId(f => f.OrderId);
                  m.Field(f => f.Expanded).DefaultValue(true);
              })
          )
                  .DependenciesDataSource(ds => ds.Read(read => read
                                    .Action("Dependencies", "Home")
                                )
              .Model(m =>
              {
                  m.Id(f => f.DependencyId);
                  m.PredecessorId(f => f.PredecessorId);
                  m.SuccessorId(f => f.SuccessorId);
                  m.Type(f => f.Type);
              })
          )

          .Columns(columns =>
          {
              columns.Bound("title").Editable(true).Sortable(true).Width(200);
              columns.Bound("Owner").Editable(true).Sortable(true).Width(75);
              columns.Bound("Property").Editable(true).Sortable(true).Width(50);
              columns.Bound("end").Title("End Time").Format("{0:MM/dd/yyyy}").Width(75).Editable(true).Sortable(true);
          })
          .Views(views =>
          {
              views.WeekView(weekView => weekView.Selected(true));
              views.MonthView();
          })
          .Events(events => events
              .DataBound("onDataBound")
          )
          .Height(500)
          .ListWidth("450")
          .ShowWorkHours(false)
          .ShowWorkDays(false)
          .Snap(false)
          .Resizable(true)
          .Editable(false)
    )

Can use please let me know if I have missed something or how can I implement it?

I tried using task template and added a div with class="k-task-draghandle" but I was not able to drag that.

I have also attached the image of my gantt chart for reference.

Thanks,

Keerthana

3 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 10 May 2017, 10:40 AM
Hello Keerthana,

When a task template is used the template content is rendered within a div with class k-task-template. If you add a div with class k-task-draghandle to the template it will also be rendered withing the k-task-template div. In order to be able to use the drag handle it must be added not to the k-task-template div, but to the outermost element that wraps the task: a div with class k-task-wrap. You can do that in the Gantt's dataBound event handler as shown below:
.Events(events => events
    .DataBound("onDataBound")
)

<script>   
    function onDataBound() {
        $(".k-task-wrap").append("<div class='k-task-draghandle'></div>")
    }
</script>


Regards,
Ivan Danchev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Keerthana
Top achievements
Rank 1
answered on 11 May 2017, 05:13 AM

Hi Ivan Danchev,

Thank you. I tried adding it in Gantt's dataBound event, still I'm not able to drag that task drag handler. I can only find that drag handler but not able to use it. This is my onDataBound event :

function onDataBound() {       
            var gantt = this;
            gantt.element.find(".k-task").each(function(e) {
                var dataItem = gantt.dataSource.getByUid($(this).attr("data-uid"));
                var currentDate = new Date();
                var endDate = new Date(dataItem.end.toLocaleDateString());
                if (dataItem.TaskStatus == "OnHold") {
                    this.style.backgroundColor = "#a9ebf7";
                    $(this).find(".k-task-complete").css("backgroundColor", "#14afca");
                    $(this).find(".k-task-summary-complete").css("backgroundColor", "#14afca");
                } else if (dataItem.TaskStatus == "InProgress" || "Awaiting Assignment") {
                    var difference = dateDifferenceHandler(Date.parse(currentDate.toDateString()), Date.parse(endDate.toDateString()));
                    if (difference == 3) {
                        this.style.backgroundColor = "#ffffb3";
                        $(this).find(".k-task-complete").css("backgroundColor", "#ffff1a");
                        $(this).find(".k-task-summary-complete").css("backgroundColor", "#ffff1a");

                    } else if (difference < 3) {
                        this.style.backgroundColor = "#ff9999";
                        $(this).find(".k-task-complete").css("backgroundColor", "#ff1a1a");
                        $(this).find(".k-task-summary-complete").css("backgroundColor", "#ff1a1a");

                    } else if (difference > 3) {
                        this.style.backgroundColor = "#98e698";
                        $(this).find(".k-task-complete").css("backgroundColor", "#32cd32");
                        $(this).find(".k-task-summary-complete").css("backgroundColor", "#32cd32");
                    }

                }
            $(".k-task-wrap").append("<div class='k-task-draghandle'></div>");
        }

 

Can you please let me know If I have to make any changes? 

Thanks,

Keerthana

0
Ivan Danchev
Telerik team
answered on 12 May 2017, 12:30 PM
Hello Keerthana,

If you are not using task templates the drag handle should be displayed by default. If you are using task templates you will need to make sure the proper elements that would display the task's progress bar are included in the template. Check for example how the template is declared in our Task Template demo:
<script id="task-template" type="text/x-kendo-template">
    # if (resources[0]) { #
    <div class="template" style="background-color: #= resources[0].color #;">
        <img class="resource-img" src="../content/web/gantt/resources/#:resources[0].id#.jpg" alt="#: resources[0].id #" />
        <div class="wrapper">
            <strong class="title">#= title # </strong>
            <span class="resource">#= resources[0].name #</span>
        </div>
        <div class="progress" style="width:#= (100 * parseFloat(percentComplete)) #%"> </div>
    </div>
    # } else { #
    <div class="template">
        <div class="wrapper">
            <strong class="title">#= title # </strong>
            <span class="resource">no resource assigned</span>
        </div>
        <div class="progress" style="width:#= (100 * parseFloat(percentComplete)) #%"> </div>
    </div>
    # } #
</script>

Note the div elements with class "progress" which are responsible for displaying a progress bar at the bottom side of the tasks. With such elements included in the template and appending the drag handle to the k-task-wrap as suggested in my previous reply you should be able to see the effect of dragging the handle. Here's a screencast showing how it works when the handle is added  to the Task Template demo.

Regards,
Ivan Danchev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Gantt
Asked by
Keerthana
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Keerthana
Top achievements
Rank 1
Share this question
or