How to create ActionLink in Title column

[ronald]

I have this little test with the Gantt Control. The chart always contains 4 levels. How can I make the last level to be a ActionLink?

@(Html.Kendo()
    .Gantt<TaskViewModel,
    DependencyViewModel>((IEnumerable<TaskViewModel>)ViewBag.Tasks,
                        (IEnumerable<DependencyViewModel>)ViewBag.Dependencies)
    .Name("gantt")
    .Columns(columns =>
    {
        columns.Bound(c => c.TaskID).Title("ID").Width(50);
        columns.Bound(Html.GetResourceString("Gantt.Title")+"title").Editable(false).Sortable(true);
        columns.Bound(Html.GetResourceString("Gantt.Start") + "start").Title(Html.GetResourceString("Gantt.StartTime") + "Start Time").Format(Html.GetResourceString("Gantt.DateFormat") + "{0:MM/dd/yyyy}").Width(100).Editable(false).Sortable(true);
        columns.Bound(Html.GetResourceString("Gantt.End") + "end").Title(Html.GetResourceString("Gantt.EndTime") + "End Time").Format(Html.GetResourceString("Gantt.DateFormat") + "{0:MM/dd/yyyy}").Width(100).Editable(false).Sortable(true);
    })

 

[Bozhidar]

Hi,

At the moment the Gantt widget doesn't support templates or action links in the TreeList section of the control. So unfortunately this functionality is not available out of the box.

We have this logged in our uservoice, so you can vote for it here:
http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/8507707-add-setting-templates-to-the-cells-inside-the-tree


Regards,
Bozhidar
Telerik

[ronald]

Is it possible on the Task? by using a task template?

[Bozhidar]

Hello,

Yes. In the latest release of KendoUI we introduced Task Templates, which can be used to alter the look and feel of the task in the timeline portion of the widget. You can see them in our new online demo:
http://demos.telerik.com/aspnet-mvc/gantt/task-template

Regards,
Bozhidar
Telerik

[ronald]

The Html Looks like this now. But when I want to trigger the javascipt click event from the template nothing happens. When I use a normal button outside the Gantt Chart all works fine. How to capture the click event from the templated button:

@(Html.Kendo()
    .Gantt<ING.GIM.Portal.Web.Models.Gantt.TaskViewModel,
    DependencyViewModel>((IEnumerable<ING.GIM.Portal.Web.Models.Gantt.TaskViewModel>)ViewBag.Tasks,
                        (IEnumerable<DependencyViewModel>)ViewBag.Dependencies)
    .Name("gantt")
    .Columns(columns =>
    {
        columns.Bound(c => c.TaskID).Title("ID").Width(50);
        columns.Bound("title").Editable(false).Sortable(false);
        columns.Bound("start").Title(Html.GetResourceString("Gantt.StartTime") + "Start Time").Format(Html.GetResourceString("Gantt.DateFormat") + "{0:dd-MM-yyyy}").Width(100).Editable(false).Sortable(false);
        columns.Bound("end").Title(Html.GetResourceString("Gantt.EndTime") + "End Time").Format(Html.GetResourceString("Gantt.DateFormat") + "{0:dd-MM-yyyy}").Width(100).Editable(false).Sortable(false);
        // columns.Bound(c=>c.Details).Title("details").Editable(false).Sortable(false);
    }
    )
    .Toolbar(tb =>
    {
        tb.Add().Name("pdf");
    })
    .Pdf(pdf => pdf
        .FileName(Html.GetResourceString("Gantt.ExportFileName") + "Gantt Export test.pdf")
        .ProxyURL(Url.Action("Index", "Planning"))
    )
    .Views(views =>
    {
        views.WeekView(weekView => weekView.Selected(true));
        views.MonthView();
    })
    .TaskTemplateId("task-template")
    .Height(600)
    .ShowWorkHours(false)
    .ShowWorkDays(false)
    .Snap(false)
    .Resizable(true)
    .Editable(false)
  .ColumnResizeHandleWidth(6)
.DataSource(d => d
.Model(m =>
{
    m.Id(f => f.TaskID);
    m.ParentId(f => f.ParentID);
    m.OrderId(f => f.OrderId);
    m.Field(f => f.Expanded).DefaultValue(true);
})
//.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);
})
//.Create("CreateDependency", "Gantt")
//.Destroy("DestroyDependency", "Gantt")
//.Update("UpdateDependency", "Gantt")
)
)

<script id="task-template" type="text/x-kendo-template">
    <div class="template">
        <label class="getData" style="text-decoration: underline;cursor:default;" data-id="#= id #">#= title # </label>
    </div>
</script>

<div class="modal fade" id="task-gantt-container" tabindex="-1"
     role="dialog" aria-labelledby="editor-title">
    <div class="modal-dialog modal-lg" role="document" style="background-color: gainsboro;">
        <div class="modal-content" id="task-gantt-content-container"></div>
    </div>
</div>

<script type="text/javascript">
    $(".getData").click(function () {
        var gantt = $("#gantt").data("kendoGantt");
        var selection = gantt.select();
        alert("blabla");
        if (selection.length)
        {
            var dataItem = gantt.dataItem(selection);
            if (dataItem.id > 999)
            {
                var url = "/Task/Details/?guid=";
                var id = dataItem.id;
               $.get(url + id + '|' + '@ViewBag.ProjectId' , function (data)
                {
                    $('#task-gantt-content-container').html(data);
                    $('#task-gantt-container').modal('show');
                });

            }
        }
    });

[Bozhidar]

Hi,

The issue here is tha the task elements are not present on the page when you bind the event, so the $(".getData") selector returns nothing. To fix this you can move the binding logic inside the DataBound event of the gantt:

@(Html.Kendo().Gantt<Kendo.Mvc.Examples.Models.Gantt.TaskViewModel, Kendo.Mvc.Examples.Models.Gantt.DependencyViewModel>()
    .Name("gantt")
    ...
    .Events(e =>
    {
        e.DataBound("bindEvents");
    })
)

<script type="text/javascript">
    function bindEvents() {
        $(".getData").click(function () {
            var gantt = $("#gantt").data("kendoGantt");
            var selection = gantt.select();
            alert("blabla");
            if (selection.length) {
                var dataItem = gantt.dataItem(selection);
                if (dataItem.id > 999) {
                    var url = "/Task/Details/?guid=";
                    var id = dataItem.id;
                    $.get(url + id + '|' + '@ViewBag.ProjectId', function (data) {
                        $('#task-gantt-content-container').html(data);
                        $('#task-gantt-container').modal('show');
                    });

                }
            }
        });
    }
</script>

Regards,
Bozhidar
Telerik