1. Home
  2. Forum
  3. Blazor
  4. SfGantt - Open tasks and anchestors by ID

SfGantt - Open tasks and anchestors by ID

Hi there,

How can we open a specific task by only knowing it's ID, e.g. Task ID 4048?

Let's assume that the IDs of our task obviously do not match the row numbers of the gantt-grid, so we cannot use row-indizes...
Please keep in mind, that we use ParentID in our CustomAdaptor.razor SQL-Server CRUD solution so far!

Challange:
We tell our blazor app the desired task ID, using either a parameter in the URL (https://localhost:44384/projects/4048), or alternatively by clicking a button, if that is easier...

  • first thing we have to to is to open the Blazor page
  • then the Gantt-diagram must be drawn initially 

So far so easy ;-)  but finally after the gantt is fully drawn...

  • row 4048 must be high-lighted (blue)
  • all it's anchestors up to the root (3025, 3024) must be opened 
  • all other parent-tasks (3015, 3042, 4049 and 3029) must stay closed, so that the diagram remains clear if there are lots of child-tasks. 
Possibly we can use CollapseAllParentTasks="true" and MyGantt.Refresh();, and afterwards we call a routine to open the desired child task?



Any idea? 

Cheers,
Volker

12 Replies 1 reply marked as answer
PP Pooja Priya Krishna Moorthy Syncfusion Team July 15, 2020 12:18 PM UTC

Hi Volker, 
By using ExpandByID method, we can expand the particular row . In load time, we have collapsed all the records by setting property CollapseAllParentTasks as true. In the provided sample, based on the task id value entered in an input text box, we have filtered the parent records. And by using ExpandByID method, we have expanded the records. And by using SelectRow method, we have highlighted the record. Please find the below code example. 
[Index.razor] 
  
<SfTextBox @ref="Input" Placeholder='Type Task ID' Width="400px" ValueChange="ValueChange"></SfTextBox> 
  
    <SfGantt ID="GanttContainer" @ref="Gantt" CollapseAllParentTasks="true" 
//… 
</SfGantt> 
  
@code{ 
//… 
public void ValueChange(ChangedEventArgs args) 
    { 
        var data = this.Gantt.DataSource.ToList(); 
        var selectedData = data.Where(y => y.TaskId == int.Parse(args.Value)).ToList(); 
        var index = data.IndexOf(selectedData[0]); 
        this.Gantt.ExpandByID(selectedData[0].ParentId); 
        var parentData = data.Where(y => y.TaskId == selectedData[0].ParentId).ToList(); 
        if(parentData.Count > 0) 
        { 
            this.expandParent(parentData); 
        } 
        this.Gantt.ExpandByID(selectedData[0].ParentId); 
        this.Gantt.SelectRow(index); 
    } 
    public void expandParent(List<TaskData> data) 
    { 
        this.Gantt.ExpandByID(data[0].ParentId); 
        var parentData = this.Gantt.DataSource.ToList().Where(y => y.TaskId == data[0].ParentId).ToList(); 
        if (parentData.Count > 0) 
        { 
            this.expandParent(parentData); 
        } 
    } 
} 
  
We have prepared sample for your reference. Please find the below sample link. 
 
Regards, 
Pooja K. 


Marked as answer
VO Volker March 10, 2021 10:18 AM UTC

Hi Pooja,

your work-around to get the correct line (index number by id on Blazor Server) to highlight the selected task doesn't work when using a CustomAdapter/component like:



Have a look: https://www.syncfusion.com/forums/158665/sfgantt-query-sorting-in-sfdatamanager

Any idea?

Cheers,
Volker

PP Pooja Priya Krishna Moorthy Syncfusion Team March 11, 2021 03:20 PM UTC

Hi Volker, 
Currently we are validating this. We will update you further details in one business day(March 12, 2021). 
Until then we appreciate your patience. 

Regards, 
Pooja K. 


MS Monisha Sivanthilingam Syncfusion Team March 15, 2021 02:45 AM UTC

Hi Volker, 
  
We were able to replicate the issue you reported. We will look further into to identify the cause of the issue and provide you with further details on Monday(15-03-2021). 
  
We appreciate your patience until then. 
  
Regards, 
Monisha. 


MS Monisha Sivanthilingam Syncfusion Team March 17, 2021 09:14 AM UTC

Hi Volker, 
 
We checked with the sample we shared to you in the previous update. We noticed that in that sample in the Startup.CS file we had set the services.AddSyncfusionBlazor(true). We set this when we load the custom scripts instead of the nuget resources. However, we have stopped the generation of custom scripts from version v18.3.35. Hence, we removed the true parameter and the sample rendered properly. The following code snippets demonstrate the solution. 
 
Startup.cs 
public void ConfigureServices(IServiceCollection services) 
       { 
            services.AddSyncfusionBlazor(); 
            services.AddRazorPages(); 
            services.AddServerSideBlazor(); 
            services.AddSingleton<WeatherForecastService>(); 
        } 
 
We have also prepared a sample for your reference. 
 
Please ensure that you have the same configurations in your sample. 
 
Please contact us if the issue persists. 
 
Regards, 
Monisha. 


VO Volker November 30, 2021 06:14 PM UTC

Hi Monisha,

your solution does not work anymore be cause since v19.1.54 ExpandByID is gone.

Have a look at the attached example.
Press "populate", then "select task 105".

How can we expand all the parent tasks of child task (in this example it's just one) when selecting the task, so that it gets visible?

Any ideas how to expand/collapse a specific parent task nowadays?

Cheers,
Volker 

Attachment: GanttTest_27515a1.zip

MS Monisha Sivanthilingam Syncfusion Team December 2, 2021 05:59 AM UTC

Hi Volker, 
 
We would like to tell you that we have deprecated the ExpandByID method. Currently, we do not have any support to expand records by their primary key. However, we have already logged a feature report for it. You can track its status from the below feedback link. 
 
 
We will implement and include this feature in the upcoming 2021 Volume 4 release scheduled for the end of December 2021. 
 
We appreciate your patience until then. 
 
Regards, 
Monisha. 


VO Volker December 2, 2021 10:52 AM UTC

Hi Monisha,

Thats great to hear, we really need this feature again.


Populate a Gantt, close all its parents, select child-task by an external call (e.g. button outside the gantt).
Then the child must be selected, all it's parent must be expanded, all other parents must stay collapsed, and the selected child task must be scrolled into viewport ( autofocus).


In previous versions, autofocus was an option, now it's debricated and gone. 

It is still featured on your website, but since v19.xx the Gantt-component doesn't react like that any more. Why?

https://www.syncfusion.com/aspnet-core-ui-controls/gantt-chart

Cheers,
Volker


MS Monisha Sivanthilingam Syncfusion Team December 3, 2021 01:49 PM UTC

Hi Volker, 
  
Please find the response for your queries below. 
  
Sl.No. 
Query 
Syncfusion Comments 
  
1 
Populate a Gantt, close all its parents, select child-task by an external call (e.g. button outside the gantt). 
Then the child must be selected, all it's parent must be expanded, all other parents must stay collapsed, 
  
We will consider this when implementing this support. 
2 
In previous versions, autofocus was an option, now it's debricated and gone.  
  
It is still featured on your website, but since v19.xx the Gantt-component doesn't react like that anymore. Why? 
  
We do not have built-in support to Auto Scroll to tasks in latest versions. 
  
However, we can also achieve this requirement by a work-around. We will provide you with further details within one business day(December 4, 2021). 
  
Regards, 
Monisha. 


MS Monisha Sivanthilingam Syncfusion Team December 4, 2021 05:43 AM UTC

Hi Volker, 
 
Thank you for your patience. 
 
We have achieve the auto scroll to tasks support by a work-around. We have made use of the RowSelected event and moved the position of the horizonal scroll bar to the selected task’s start date. We have achieved this by calculating the difference between the project start date and the start date of the selected task. Then, we have made use of the difference to adjust the position of the horizontal scroll bar. The below code snippets demonstrate the solution. 
 
Index.razor 
 
public async Task RowSelected(RowSelectEventArgs<TaskData> args) 
{ 
  System.DateTime projectstartdate = ProjectStart; 
  System.DateTime taskstartdate = args.Data.StartDate; 
  System.TimeSpan diff = taskstartdate.Subtract(projectstartdate); 
  var days = diff.Days; 
  var ele = await JSRuntime.InvokeAsync<int>("getTargetElement", days); 
} 
 
 
exampleJsInterop.js 
 
window.getTargetElement = (days) => { 
  var chartElement = document.getElementsByClassName("e-chart-scroll-container")[0]; 
  var scrollLeft = 33 * days; 
  chartElement.scrollLeft = scrollLeft; 
  return scrollLeft; 
}; 
 
 
 
Please contact us if you require any further assistance. 
 
Regards, 
Monisha. 


VO Volker December 6, 2021 02:39 PM UTC

Hi Monisha,

I don't want to be rude, but your website says "auto focus tasks" as a key-feature of the current version.


Have a look here:
The GIF shows exactly how it should behave:

https://www.syncfusion.com/aspnet-core-ui-controls/gantt-chart

ASP.NET Core Gantt Chart Auto focus tasks.


Again to the history: up to the version V18.xx this worked wonderfully, since V19.xx the function was deleted, now "auto focus" is switched on permanently as standard for the GANNT.

But in fact this basic feature does not work since V19.x and now we are all supposed to implement this javascript work-around, in Blazor Server?


Please confirm that you are serious about this.


Cheers,
Volker




AK Alagumeena Kalaiselvan Syncfusion Team December 7, 2021 03:26 PM UTC

Hi Volker, 
  
We are considering the reported problem as breaking issue and we will include the fix in 2021 Volume 4 release which is expected to be rolled out at mid of December 2021. 
  
Regards 
Alagumeena.K 


Loader.
Up arrow icon