Hello,
I'm trying to adda new task programmatically based on the value of exiting drop down list. The I have is when creating a dependency between newly created tasks. the successorId and the predecessorId are both equal to 0.I checked at the server side, I'm returing the new ID, and at the client side, when checking the content of the dataSource, Ids are up to date with the returned value.
Here is the code. Am missing something?
<script type="text/x-kendo-template" id="toolbarTemplate">
<div>
<input id="types" style="width:250px"/>
<a class="k-button k-button-icontext k-add" href="#" id="AddButton" onclick="addType()" role="option" data-bind="value"><span class="k-icon k-i-add"></span>Add type</a>
</div>
</script>
<div>
@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
.Name("gantt")
.Columns(columns =>
{
columns.Bound(c => c.Id).Title("ID").Width(50);
columns.Bound(c => c.ShortCode).Title("Short code").Editable(false).Width(50);
columns.Bound(c => c.Title).Editable(false).Sortable(true);
columns.Bound(c => c.Start).Title("Start Time").Format("{0:MM/dd/yyyy}").Width(100).Editable(true).Sortable(true);
columns.Bound(c => c.End).Title("End Time").Format("{0:MM/dd/yyyy}").Width(100).Editable(true).Sortable(true);
})
.Views(views =>
{
views.DayView();
views.WeekView(weekView => weekView.Selected(true));
views.MonthView();
}).Tooltip(tooltip => tooltip.Template("#= task.title #"))
.Height(500)
.Date(DateTime.Now)
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.Id);
m.OrderId(f => f.OrderId);
})
.Read("ReadTasks", "Gantt")
.Create("CreateTask", "Gantt")
.Destroy("DestroyTask", "Gantt")
.Update("UpdateTask", "Gantt")
)
.DependenciesDataSource(d => d
.Model(m =>
{
m.Id(f => f.DependencyID);
m.PredecessorId(f => f.PredecessorID);
m.SuccessorId(f => f.SuccessorID);
m.Type(f => f.Type);
})
.Read("ReadDependencies", "Gantt")
.Create("CreateDependency", "Gantt")
.Destroy("DestroyDependency", "Gantt")
)
//.Events(events => events.Edit("edit").Add("add"))
)
</div>
<style>
.k-task-draghandle {
display: none !important;
}
/*.k-gantt .k-gantt-actions:last-child {
visibility: hidden;
}*/
</style>
<script>
function addType() {
var gantt = $("#gantt").data("kendoGantt");
var task = getNewTask();
var taskNew = new kendo.data.GanttTask(task);
gantt.dataSource.add(taskNew);
gantt.dataSource.sync();
}
function getNewTask() {
var combobox = $("#types").data("kendoDropDownList");
var item = combobox.dataItem();
var task = {
id: -1,
orderId: 0,
parentId: null,
title: item.Name,
code: item.code,
start: new Date($.now()),
end: new Date((new Date()).valueOf() + 2 * 1000 * 3600 * 24),
typeId: item.Id,
percentComplete: 0,
type: "Task"
};
return task;
}
$(document).ready(function () {
$($(".k-gantt-actions")[1]).css("visibility", "hidden");
$($(".k-gantt-actions")[0]).html($("#toolbarTemplate").html());
$("#types").kendoDropDownList({
dataTextField: "Name",
dataValueField: "Id",
filter: "contains",
dataSource: {
transport: {
read: {
dataType: "json",
url: "@Url.Action("GetAllTypes", "Type")",
}
}
}
});
$(document).bind("kendo:skinChange", function () {
gantt.refresh();
});
});
//function edit(e) {
// $($(".k-edit-label")[0]).hide();
// $($(".k-edit-field")[0]).hide();
// $($(".k-edit-label")[$(".k-edit-label").size() - 1]).hide();
// $($(".k-edit-field")[$(".k-edit-field").size() - 1]).hide();
//}
//function add(e) {
// //console.log(e.dependency.successorId + " : " + e.dependency.predecessorId);
// //console.log(e);
// try {
// //if(e.dependency.successorId == e.dependency.predecessorId)
// // e.preventDefault();
// //var gantt = $("#gantt").data("kendoGantt");
// //gantt.data
// } catch (e) {
// }
//}
</script>
5 Answers, 1 is accepted
Rank 1
It works fine with the demo code. The problem is coming from the addType function, when it's used. If I use the button (default one), it works fine with the same code behind.
Here the code that works
@using PELGA.Web.Models.Gantt
@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
.Name("gantt")
.Columns(columns =>
{
columns.Bound(c => c.Id).Title("ID").Width(50);
columns.Bound("title").Editable(true).Sortable(true);
columns.Bound("start").Title("Start Time").Format("{0:MM/dd/yyyy}").Width(100).Editable(true).Sortable(true);
columns.Bound("end").Title("End Time").Format("{0:MM/dd/yyyy}").Width(100).Editable(true).Sortable(true);
})
.Views(views =>
{
views.DayView();
views.WeekView(weekView => weekView.Selected(true));
views.MonthView();
})
.Height(700)
.ShowWorkHours(false)
.ShowWorkDays(false)
.Snap(false)
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.Id);
m.ParentId(f => f.ParentId);
m.OrderId(f => f.OrderId);
m.Field(f => f.Expanded).DefaultValue(true);
})
.Read("ReadTasks", "Gantt")
.Create("CreateTask", "Gantt")
.Destroy("DestroyTask", "Gantt")
.Update("UpdateTask", "Gantt")
)
.DependenciesDataSource(d => d
.Model(m =>
{
m.Id(f => f.DependencyID);
m.PredecessorId(f => f.PredecessorID);
m.SuccessorId(f => f.SuccessorID);
m.Type(f => f.Type);
})
.Read("ReadDependencies", "Gantt")
.Create("CreateDependency", "Gantt")
.Destroy("DestroyDependency", "Gantt")
)
)
Thanks for your help.
Rank 1
Hello,
Could someone reply this post?
Regards
Here is the code that worked correctly at my side when I want to add gantt task programmatically. Please review it and let me know if your scenario is somehow different.
Regards,
Plamen
Telerik by Progress
Rank 1
Hi Plamen,
Thanks for your reply and your help.
I found this code before, this is not in razor syntax, is there any specific thing I'm missing when using the gantt with Razor?
Also, as you can see, I'm usinga DropDownList to get/add the selected element. Is there any issue using both of them in the same page!?
Thanks again for your help.
We are not aware of any issue with such razor syntax or DropDownList to get/add the selected element. In such case we could rather recommend providing a runnable sample where the issue can be replicated so we could be more helpful.
Regards,
Plamen
Telerik by Progress