How to select Task In Gantt Tree list JS

[Igor]

Hello,

I need to select Tree list row by javascript.
So far I found this code:

function selectTask(tsk){

         var gantt = $find("<%= RadGantt1.ClientID%>");

         gantt._widget.select("tr:eq(" + tsk.get_id() + ")");

     }

 

But this does not work well. It works only in some cases, sometimes it selects the wrong row or nothing at all.
Can you help me?
Thank you.

[Peter Milchev]

Hello Igor,

One easy way to select a task is to programmatically click it:

tsk.get_element().click();

If you would like to use the .select method of the underlying Kendo UI Gantt, you can use this approach:

• https://www.w3schools.com/cssref/css_selectors.asp;
• https://www.w3schools.com/cssref/sel_attribute_value.asp;

gantt._widget.select("tr[data-uid="+tsk._uid+"]")

Regards,
Peter Milchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

[Fit2Page]

Would it be possible to select a task once the page has loaded? I want to create a kind of Task shortcut.

Since the data-uid are changing with every pageload I cannot do it with JS.

 

Marc

[Peter Milchev]

Hi Marc, you can save the ID of the task you want to select in a hidden field. When the page loads on the client-side, you can find the task that has the same ID as the one in the hidden field.

 

<asp:HiddenField runat="server" ID="HiddenField1" />
<script>
    function OnClientLoad(sender, args) {
        var hf = $get("<%= HiddenField1.ClientID %>");
        var id = hf.value;
        if (id) {
            var kendoGantt = sender.get_kendoWidget();
            var tasks = sender.get_allTasks();
            for (var i = 0; i < tasks.length; i++) {
                var task = tasks[i];
                if (task.get_id() == id) {
                    sender.get_kendoWidget().select("[data-uid=" + task._uid + "]")
                    break;
                }
            }
        }
    }
    function OnClientTaskSelectionChanged(sender, args) {
        var hf = $get("<%= HiddenField1.ClientID %>");
        hf.value = args.get_sender().dataItem(args.get_selectedElement()).id;
    }
</script>

Optionally, you can persist the selection by setting the ID in the onClientTaskSelectionChanged event as demonstrated in the snippet above.

[Fit2Page]

Hi Peter,

 

I am afraid this is not going to work because I want to jump into the Gantt chart with a selected Task from an external link. I only have the Task ID from the database as a parameter in the URL querystring.

Marc

[Rumen]

Why don't you obtain the Task ID from the URL querystring with a client script as shown in the examples provided at StackOverflow discussion: How can I get query string values in JavaScript?.This way you will be able to supply it as a task._uid in the line below from Peter's solution:

sender.get_kendoWidget().select("[data-uid=" + querystringTaskID + "]")

[Fit2Page]

Hi Rumen,

 

That is because I come in with a querystring xxxx.aspx?taskid=5

And the data-uid in the source and your scripts is something like gdde08e6-53d8-4ec3-b673-22215c294a4a

I have no correlation...so how can this be done?

 

Marc

[Peter Milchev]

Hi Marc,

There is a difference between id and uid. 

What we actually tried to explain is how to use the id to find the task object. Once you get the task object, you will be able to get the uid.

For example, check the for loop over all tasks, and see how the task is found by the get_id() and then the ._uid property is used for the selector:

            var tasks = sender.get_allTasks();
            for (var i = 0; i < tasks.length; i++) {
                var task = tasks[i];
// here "id" is the task ID you would get from the query stringif (task.get_id() == id) {
                    sender.get_kendoWidget().select("[data-uid=" + task._uid + "]")
                    break;
                }
            }

Also, if you are using the query string to pass the ID, you can skip all server-side logic and just get the query string inside the OnClientLoad and use it. Here are some links that could help you with getting the query params:

• https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript 
• https://css-tricks.com/snippets/javascript/get-url-variables/ 
• https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript/901144#12151322 

 

[Fit2Page]

Wow, this is really cool, it works.

Sorry for my misunderstanding & thanks for your patience!

 

Marc

[Igor]

Thank you.