This is a migrated thread and some comments may be shown as answers.

How to create ActionLink in Title column

5 Answers 142 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
ronald
Top achievements
Rank 1
ronald asked on 05 Oct 2015, 09:39 AM

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);
    })

 

5 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 05 Oct 2015, 10:27 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
ronald
Top achievements
Rank 1
answered on 05 Oct 2015, 11:20 AM
Is it possible on the Task? by using a task template?
0
Bozhidar
Telerik team
answered on 06 Oct 2015, 07:35 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
ronald
Top achievements
Rank 1
answered on 08 Oct 2015, 12:47 PM

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');
                });
  
            }
        }
    });

0
Accepted
Bozhidar
Telerik team
answered on 09 Oct 2015, 07:29 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Gantt
Asked by
ronald
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
ronald
Top achievements
Rank 1
Share this question
or