How to create ActionLink in Title column

6 posts, 1 answers
  1. ronald
    ronald avatar
    9 posts
    Member since:
    Mar 2011

    Posted 05 Oct 2015 Link to this post

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

     

  2. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 05 Oct 2015 Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. ronald
    ronald avatar
    9 posts
    Member since:
    Mar 2011

    Posted 05 Oct 2015 Link to this post

    Is it possible on the Task? by using a task template?
  5. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 06 Oct 2015 Link to this post

    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
  6. ronald
    ronald avatar
    9 posts
    Member since:
    Mar 2011

    Posted 08 Oct 2015 in reply to Bozhidar Link to this post

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

  7. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 09 Oct 2015 Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready