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
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
Rank 1
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
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