To use the drag handler in task progress bar

4 posts, 0 answers
  1. Keerthana
    Keerthana avatar
    5 posts
    Member since:
    Apr 2017

    Posted 08 May Link to this post

    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

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1326 posts

    Posted 10 May Link to this post

    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.
  3. Keerthana
    Keerthana avatar
    5 posts
    Member since:
    Apr 2017

    Posted 11 May in reply to Ivan Danchev Link to this post

    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

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1326 posts

    Posted 12 May Link to this post

    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.
Back to Top