This is a migrated thread and some comments may be shown as answers.
Add new task using API issue
5 Answers 41 Views
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 31 Jan 2017, 02:17 PM

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

Sort by
0
Mike
Top achievements
Rank 1
answered on 31 Jan 2017, 02:19 PM

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. 

0
Mike
Top achievements
Rank 1
answered on 01 Feb 2017, 05:38 PM

Hello, 

Could someone reply this post?

Regards

0
Plamen
Telerik team
answered on 02 Feb 2017, 10:59 AM
Hello,

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
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
Mike
Top achievements
Rank 1
answered on 02 Feb 2017, 11:58 AM

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.

0
Plamen
Telerik team
answered on 03 Feb 2017, 11:14 AM
Hello,

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
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
Mike
Top achievements
Rank 1
Answers by
Mike
Top achievements
Rank 1
Plamen
Telerik team
Share this question
or