Client side events in Gantt

15 posts, 1 answers
  1. Maciej
    Maciej avatar
    14 posts
    Member since:
    Aug 2013

    Posted 15 Sep Link to this post

    Hi

    I'm working with Gantt control but I'm stuck on 2 things. I need to handle events like:

    - Change progress of a task

    - Delete key pressed on (in order to cancel deleting process)

    I'd be grateful for your help because I spent a few hours already on that and didn't find the solution.

     

    Thanks,

    Maciek

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    836 posts

    Posted 16 Sep Link to this post

    Hello Maciek,

    The Gantt exposes server events, which fire when a task is edited (for example when its progress is changed) or deleted. Currently on the client events equivalent to the server-side TaskUpdate and TaskDelete events are not exposed. We would suggest logging a feature request in our Feedback Portal and voting for it.

    Regards,
    Ivan Danchev
    Telerik by Progress
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Maciej
    Maciej avatar
    14 posts
    Member since:
    Aug 2013

    Posted 16 Sep Link to this post

    Thanks for the answer,

    is there any possible workaround for progress changed? I tried to catch dragstart and dragend events of the small triangle but they weren't fired. Any ideas?

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    836 posts

    Posted 19 Sep Link to this post

    Hello Maciek,

    You could try the following workaround that uses jQuery in order to detect the progress handle drag:
    function pageLoad() {
        var $ = $telerik.$;
        var isDragged = false;
     
        $(".rgtTasks").mouseup(function () {
            var wasDragged = isDragged;
            isDragged = false;
            if (wasDragged) {
                //custom code...
            }
        })
     
        $(".rgtDragHanle").mousedown(function () {
            isDragged = false;
        }).mousemove(function () {
            isDragged = true;
        }).mouseup(function () {
            var wasDragged = isDragged;
            isDragged = false;
            if (wasDragged) {
                //custom code...
            }
        });
    }


    Regards,
    Ivan Danchev
    Telerik by Progress
  6. Maciej
    Maciej avatar
    14 posts
    Member since:
    Aug 2013

    Posted 19 Sep Link to this post

    Thanks for that Ivan,

    I'll try it out for sure and let you know if it helped :)

     

  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    836 posts

    Posted 20 Sep Link to this post

    Hi Maciek,

    I hope you can use this workaround in your scenario, since there is no client-side event dedicated to updating the task's progress.

    Regards,
    Ivan Danchev
    Telerik by Progress
  8. Maciej
    Maciej avatar
    14 posts
    Member since:
    Aug 2013

    Posted 21 Sep in reply to Ivan Danchev Link to this post

    Thanks Ivan,

    your code helped me perfectly, I had only to add listener to page in case when mouseup is triggered outside from slider.

    Could you maybe help me with my second question too? I've catched the delete key pressed event and returned false but the deleting process wasn't interrupted.

     

    Regards,

    Maciek

  9. Ivan Danchev
    Admin
    Ivan Danchev avatar
    836 posts

    Posted 23 Sep Link to this post

    Hi Maciek,

    The confirmation window that pops up when you select a task and press the Delete key can be closed by clicking its cancel button with the help of jQuery. This will prevent the deletion confirmation window from appearing, thus preventing the task deletion. For this to work the Gantt's DisplayDeleteConfirmation property must be set to "true".
    $('.RadGantt').keydown(function (event) {
        if (event.keyCode == 46) {
            $(".k-gantt-cancel").click();
        }
    });


    Regards,
    Ivan Danchev
    Telerik by Progress
  10. Maciej
    Maciej avatar
    14 posts
    Member since:
    Aug 2013

    Posted 26 Sep in reply to Ivan Danchev Link to this post

    Thanks Ivan for the response,

    unfortunatelly it's not working. The event gets fired, the keycode is 46 and even $(".k-gantt-cancel") collection length is 1 but still, the windows pops up.

  11. Ivan Danchev
    Admin
    Ivan Danchev avatar
    836 posts

    Posted 27 Sep Link to this post

    Hello Maciek,

    At my end it works correctly in Chrome, Firefox and IE11. I attached a sample project you could run and check the behavior in, on pressing Delete. Telerik dlls are not included in the bin folder in order not to exceed the maximum allowed attachment size.

    Regards,
    Ivan Danchev
    Telerik by Progress
  12. Maciej
    Maciej avatar
    14 posts
    Member since:
    Aug 2013

    Posted 13 Oct in reply to Ivan Danchev Link to this post

    Hi Ivan,

    thanks for your answer, unfortunately last 2 weeks I had to focus on something else and didn't look at your example. Now the link isn't active anymore, could you please upload it again?

  13. Ivan Danchev
    Admin
    Ivan Danchev avatar
    836 posts

    Posted 14 Oct Link to this post

    Hello Maciek,

    Indeed the link has become invalid. I re-attached the .zip file.

    Regards,
    Ivan Danchev
    Telerik by Progress
  14. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    836 posts

    Posted 14 Oct Link to this post

    Hello Maciek,

    It seems we have a temporary issue with the forum attachments so I'll post the content of the aspx, aspx.cs and xml files here:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <head id="Head1" runat="server">
        <title>Telerik ASP.NET Example</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
     
            <div class="container">
                <telerik:RadGantt runat="server" ID="RadGantt1" AutoGenerateColumns="true" Skin="Default"
                    DisplayDeleteConfirmation="true" Height="450px" SelectedView="MonthView" AllowColumnResize="true" />
            </div>
     
            <script>
                function pageLoad() {
                    var $ = $telerik.$;
     
                    $('.RadGantt').keydown(function (event) {
                        if (event.keyCode == 46) {
                            $(".k-gantt-cancel").click();
                        }
                    });
                }
            </script>
        </form>
    </body>
    </html>

    using System;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    using System.Data;
    using System.Configuration;
    using System.Web.Security;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
     
    public partial class Default : System.Web.UI.Page
    {
        private const string ProviderSessionKey = "RadGanttSample";
     
        XmlGanttProvider Provider
        {
            get
            {
                XmlGanttProvider provider = (XmlGanttProvider)Session[ProviderSessionKey];
                if (Session[ProviderSessionKey] == null || !IsPostBack)
                {
                    provider = new XmlGanttProvider(Server.MapPath("~/App_Data/Tasks.xml"), true);
     
                    Session[ProviderSessionKey] = provider;
                }
     
                return provider;
            }
        }
     
        private void Page_Init(object sender, EventArgs e)
        {
            RadGantt1.Provider = Provider;
        }
    }

    In the example the Gantt is bound through an XML provider, so in order to run the example you could create an XML file with name Tasks in App_Data using the file structure from our article.

    Regards,
    Ivan Danchev
    Telerik by Progress
  15. Maciej
    Maciej avatar
    14 posts
    Member since:
    Aug 2013

    Posted 18 Oct in reply to Ivan Danchev Link to this post

    Great, now it's working !

    I think that this line was the key:

    var $ = $telerik.$;

     

    Thank you very much :) !

  16. Ivan Danchev
    Admin
    Ivan Danchev avatar
    836 posts

    Posted 20 Oct Link to this post

    Hi Maciek,

    I am glad it worked out. $telerik.$ is used to access jQuery embedded in the Telerik assembly. More information about this is available here

    Regards,
    Ivan Danchev
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017