Add new task using API issue

6 posts, 0 answers
  1. Mike
    Mike avatar
    79 posts
    Member since:
    Nov 2011

    Posted 31 Jan Link to this post

    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>

  2. Mike
    Mike avatar
    79 posts
    Member since:
    Nov 2011

    Posted 31 Jan in reply to Mike Link to this post

    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. 

  3. Mike
    Mike avatar
    79 posts
    Member since:
    Nov 2011

    Posted 01 Feb Link to this post

    Hello, 

    Could someone reply this post?

    Regards

  4. Plamen
    Admin
    Plamen avatar
    2800 posts

    Posted 02 Feb Link to this post

    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.
  5. Mike
    Mike avatar
    79 posts
    Member since:
    Nov 2011

    Posted 02 Feb in reply to Plamen Link to this post

    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.

  6. Plamen
    Admin
    Plamen avatar
    2800 posts

    Posted 03 Feb Link to this post

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