Task ID

[Mohammad]

How to get TaskID of selected task?

I have seen that there is no event in Teletik RadGantt control.

[Nencho]

Hello Mohammad,

You can hook a click event of the Tasks in the Timeline view and get the data-uid attribute of the clicked task. Then, you can loop through the tasks collection of the RadGantt using the Client API of the control and find the task with the same uid. Once identified, you can the use the get_id() function on the task and acquire the ID of the task. Please consider the following implementation, which uses the double-click event to get the ID of the task :

<script type="text/javascript">
        function pageLoad() {
            var $ = $telerik.$;
            var gantt = $find("RadGantt1");

            $(".rgtTask").on("dblclick", function (e) {
                e.stopPropagation();
                var $element = $(e.target);
                if (!$element.is(".rgtTask")) {
                    $element = $element.parents(".rgtTask").first();
                }

                var uid = $element.attr("data-uid");
                var tasks = gantt.get_allTasks();
                var task;

                for (var i = 0; i < tasks.length; i++) {
                    if (tasks[i]._uid === uid) {
                        task = tasks[i];
                        break;
                    }
                }
                alert("DoubleClicked on task with ID : " + task.get_id());
            });
        }
    </script>

Regards,
Nencho
Telerik

[Mohammad]

Thanks for solution, I will try.
Can we get it on server side?

[Mohammad]

I used following code but did not worked.

RadGantt:

<telerik:RadGantt runat="server" ID="RadGantt1"
OnDependencyInsert="RadGantt1_DependencyInsert"
OnDependencyDelete="RadGantt1_DependencyDelete"
OnTaskDelete="RadGantt1_TaskDelete"
OnTaskUpdate="RadGantt1_TaskUpdate"
OnTaskInsert="RadGantt1_TaskInsert"
WorkWeekStart="Saturday" WorkWeekEnd="Thursday"
SelectedView="MonthView" Width="99%" Height="475px" AutoGenerateColumns="false">

Javascript function:

function pageLoad() {
            var $ = $telerik.$;
            var gantt = $find("RadGantt1");

            $(".rgtTask").on("dblclick", function (e) {
                e.stopPropagation();
                var $element = $(e.target);
                if (!$element.is(".rgtTask")) {
                    $element = $element.parents(".rgtTask").first();
                }

                var uid = $element.attr("data-uid");
                var tasks = gantt.get_allTasks();
                var task;

                for (var i = 0; i < tasks.length; i++) {
                    if (tasks[i]._uid === uid) {
                        task = tasks[i];
                        break;
                    }
                }
                alert("DoubleClicked on task with ID : " + task.get_id());
            });
        }

Function call before RadGantt1.

<script type="text/javascript">
        pageLoad();
    </script>

Error Message:

[Nencho]

Hello Mohammad,

Please specify what exactly is the problem? Are you encountering any javascript error? As for your question, regarding the server-side implementation - I noticed that you had submitted another identical forum ticket on the matter. I have already replied to the referenced ticket, where you can find attached a sample website, demonstrating both server and client side implementation.

http://www.telerik.com/forums/get-task-id-on-task-select

In addition, I would like to ask you to continue the communication in the other thread, in order to avoid duplication.

Regards,
Nencho
Telerik

[Хосбаяр]

Trying get task id. Telerik version 2014 Q3

Cannot read property 'get_allTasks' of null 

[Bozhidar]

Hello,

You've posted the same question in the following thread:
http://www.telerik.com/forums/client-event-double-click-task

Please continue the discussion only in that thread, to prevent unwanted clutter. I would also ask you to only post your questions in one thread (or open a new one). We monitor all active threads, and multiple posts may only cause confusion and clutter.

Regards,
Bozhidar
Telerik

[Dan]

Nencho,

 This works fine IF the user clicks on one of the timelines... but what if I really want to detect that he selected the row from the task details view?

[Bozhidar]

Hello,

The table row elements inside the treelist section of the Gantt also contain the same data-uid attribute, so you can use the same approach to extract the task.

Regards,
Bozhidar
Telerik

[Dan]

Thank you Bozhidar.

[Dan]

Another question relating to treelist view...

 How do I set the width of the treelist pane at design time? I seem to be having trouble locating the property for this.

 Thanks.

 Dan

 

[Bozhidar]

Hello,

You can use the ListWidth property in the markup to set the width of the TreeList.

Regards,
Bozhidar
Telerik

[Melvin]

Hi,

I'm trying to get the ID of the selected task from the detail but the always return null.

I tried to get the property as you indicate. Using the previous example . But I can not access the property data-iud that found in the TR .
What is the problem in my code ?

$(".radGrid").on("dblclick", function (e) { //rgtTreelist
    e.stopPropagation();
    var $element = $(e.target);
    if (!$element.is(".radGrid")) {
        $element = $element.parents(".rgtTreelistContent").first();
    }

    var uidtl = $element.attr("data-uid");
    var taskstl = gantt.get_allTasks();
});

I tried to get the property as you indicate . Using the previous example . But I can not access the data- yud property found in the TR . What is the problem in my code ?

I tried to get the property as you indicate . Using the previous example . But I can not access the data- yud property found in the TR . What is the problem in my code ?

I tried to get the property as you indicate . Using the previous example . But I can not access the data- yud property found in the TR . What is the problem in my code ?

[Bozhidar]

Hi,

The code is not working because the selectors are not correct. Please use the code from my previous example and it should work:

if (!$element.is(".rgtTask")) {
    $element = $element.parents(".rgtTask").first();
}

var uid = $element.attr("data-uid");

Regards,
Bozhidar
Telerik

[Melvin]

 Hi, 
I made the change in the code, but I get the same result. The property return "null". I not found the way for to get value data-iud that find in property.<TR>.

In the image you can look that I tried to get value of details gantt.

Code

$(".radGrid").on("dblclick", function (e) { //rgtTreelist
    e.stopPropagation();
    var $element = $(e.target);
    if (!$element.is(".rgtTask")) {
        $element = $element.parents(".rgtTask").first();
    }

    var uidtl = $element.attr("data-uid");
    var taskstl = gantt.get_allTasks();
});

[Bozhidar]

Hi,

Please excuse me for the misunderstanding. Since the treelist uses a different rendering, you would need to modify the selectors a bit more. Here's a working sample:

$telerik.$(".rgtTreelistContent tr").on("click", function(e) {
    var $element = $telerik.$(e.target);

    if (!$element.is("tr")) {
        $element = $element.parents("tr").first();
    }

    var taskUid = $element.attr("data-uid");
});

Regards,
Bozhidar
Telerik

[Melvin]

Hi,

Thanks for your help. With your example got the expected result.

[Mike]

Hi,

Has anyone gotten this to work recently. When I use the above code the click event is never raised.

When i adjust code as follows:

function pageLoad()
            {
                var $ = $telerik.$;
                var gantt = $find('<%=rdGntTasks.ClientID%>');

                $("#<%=rdGntTasks.ClientID%>").click(function (e)
                {
                    e.stopPropagation();
                    var $element = $(e.target);
                    if (!$element.is(".rdGntTasks")) {
                        $element = $element.context.parentElement;
                    }

                    var uid = $element.getAttribute("data-uid");
                    var tasks = gantt.get_allTasks();
                    var task;

                    for (var i = 0; i < tasks.length; i++) {
                        if (tasks[i]._uid === uid) {
                            task = tasks[i];
                            break;
                        }
                    }
                    alert("DoubleClicked on task with ID : " + task.get_id());
                });
            }

I can extract the GanttTask ID. However even with this, the event is still only raised when clicking the Task List on the left, but not the graph on the right.

I had to load an old version of jQuery to enable this solution as 'context' was deprecated in 1.8 and removed in 3.0. If anyone can post a working version using a later version of jQuery I would appreciate it.

 

On a side note, i think a 'TaskSelected' Event is pretty basic, and should be supported internally like many of your other controls.

 

Thanks,

Mike

[Bozhidar]

Hi,

The tasks in the treelist and timeline sections of the gantt have different rendering and different class names, so you have to modify your approach for either treelist, or timeline selection. If you want both, you have to combine the code.

The very first example in this thread, sent by Nencho should work for timeline selection. Please use it "as is" and see if it's working on your side. Please also note that in this sample the deprecated context is not used.

Regards,
Bozhidar
Telerik by Progress

[Mike]

Hi,

Thanks for the response. When I try using the posted code, no event is raised. I am using a Master Page, jQuery version 1.12.2, and telerik version 2017.1.228. The following is the code I used:

function pageLoad()
            {
                var $ = $telerik.$;
                var gantt = $find("<%=rdGntTasks.ClientID%>");

                $(".rdGntTasks").on("dblclick", function (e)
                {
                    e.stopPropagation();
                    var $element = $(e.target);
                    if (!$element.is(".rdGntTasks")) {
                        $element = $element.parents(".rdGntTasks").first();
                    }

                    var uid = $element.attr("data-uid");
                    var tasks = gantt.get_allTasks();
                    var task;

                    for (var i = 0; i < tasks.length; i++) {
                        if (tasks[i]._uid === uid) {
                            task = tasks[i];
                            break;
                        }
                    }
                    alert("DoubleClicked on task with ID : " + task.get_id());
                });
            }

 

Any help would be appreciated.

[Mike]

Disregard the above post, I found the mistake I was making. You can delete the above post. Thanks for your help.