1. Home
  2. Forum
  3. Blazor
  4. Bold Parent tasks

Bold Parent tasks

Hi there,

1) is it possible to display superordinate tasks (tasks with children) in bold by default? 



2) Is it possible to show all rows of a diagram without inline-scrollbars (e.g "AutoHeight 100%")?

Cheers,
Volker


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

Hi Volker, 
Please find the below response. 
S.No 
Query  
Syncfusion Comments 
 
1 
 
 
is it possible to display superordinate tasks (tasks with children) in bold by default?  
 
 
Yes it is possible to render text in bold for parent tasks using QueryCellInfo event in grid side and LeftLabelTemplate in chart side. Please find the below code example.  
 
 
<SfGantt DataSource="@TaskCollection" Height="auto" > 
//… 
<GanttLabelSettings> 
<LeftLabelTemplate> 
      @if ((context as TaskData).HasChildRecords) 
        { 
           <div class="e-left-label-inner-div" style="height:22px;margin-top:7px;"> 
               <span class="e-label"><b>@((context as TaskData).TaskName)</b></span> 
            </div> 
        } 
       else 
        { 
       //… 
       }          
</LeftLabelTemplate> 
<GanttEvents TValue="TaskData" QueryCellInfo="QueryCellInfo"></GanttEvents> 
</SfGantt> 
@code{ 
    public void QueryCellInfo(QueryCellInfoEventArgs<TaskData> args) 
    { 
        if (args.Data.HasChildRecords) 
        { 
            string style = (args.Cell.GetAttribute("style")).ToString(); 
            style += "font-weight: bold"; 
            args.Cell.SetAttribute("style", style); 
        } 
    } 
} 
 
 
 
2 
 
 
Is it possible to show all rows of a diagram without inline-scrollbars (e.g "AutoHeight 100%")? 
 
 
Yes, it is possible to show all rows by setting auto to the Height property. Please find the below code example. 
 
<SfGantt DataSource="@TaskCollection" Height="auto" > 
//… 
</SfGantt> 
 
 
 
Regards, 
Pooja K 


VO Volker June 15, 2020 04:27 PM UTC

Hi Pooja,

thank you very much.

Unfortunatelly I must use ParentID and not Child.
Please be so kind and provide an example for bold parent tasks using ParentID.

Cheers,
Volker

PP Pooja Priya Krishna Moorthy Syncfusion Team June 16, 2020 01:34 PM UTC

Hi Volker, 
Most Welcome. It’s our pleasure to provide you another sample of your requirement. 
We are maintaining HasChildRecords property for both self-referential and hierarchical data binding. We can use this property to make a text as bold as shared in the previous update. For your convenient, we have prepared a sample using self-referential data source. Please find the sample from below link. 

Regards, 
Pooja K 



Marked as answer
VO Volker June 17, 2020 08:19 AM UTC

Hi Pooja

thank you very much for your help.

I tested your solution in my diagrams and found out that it adds a significant delay on drawing the diagram that doesn't occure without your solution.
The reason seems to be in this event handler (<GanttEvents TValue="TaskData" QueryCellInfo="QueryCellInfo"></GanttEvents> ).

Anyway, possibly you consider this basic requirement for clarity in huge diagrams as a future option and add this feature to your SfGantt like ShowParentTasksBold="true", cause your work-around is lot of code for a simple "<b>...</b>"-tag.

Cheers,
Volker

PP Pooja Priya Krishna Moorthy Syncfusion Team June 18, 2020 04:07 PM UTC

Hi Volker, 
Since this requirement is unique, we don’t have any plan to consider it as a property. But we are suggesting you an alternate solution by using CSS instead of event. Please find the below code example. 
 
<style> 
    tr[aria-expanded] { 
        font-weight: bolder; 
    } 
</style> 
 
Please get back to us if you require further assistance on this. 
 
Regards, 
Pooja K 


VO Volker June 21, 2020 09:44 AM UTC

Hi Pooja,

nice solution. If parent-tasks are marked with unique CSS classes by Syncfusion, that will do the trick.

Thank you!

Cheers,
Volker

PP Pooja Priya Krishna Moorthy Syncfusion Team June 22, 2020 05:36 AM UTC

Hi Volker, 
Thanks for the update. Also we will consider your suggestion. 
Please get back to us if you have any other queries. 

Regards, 
Pooja K.  


VO Volker June 24, 2020 10:59 AM UTC

Hi Pooja,

three difficulties have arisen:



(1) Height="auto"

I tried your solution:

2 
 
 
Is it possible to show all rows of a diagram without inline-scrollbars (e.g "AutoHeight 100%")? 
 
 
Yes, it is possible to show all rows by setting auto to the Height property. Please find the below code example. 
 
Height="auto" > 
//… 
 

If the gantt is empty, there is only a very narrow dialog, with a tiny scrollbar, it's nearly impossible to enter data.
"Auto" seems to work only, if there are already some tasks.



Is that intended?




(2) Dynamic Markers

Right now I only can hard code EventMarkers like so:


I tried to dynamically add a marker, but does not work.
Please send me an example how to reach this goal:
public SfGantt<GanttDisplayModel> MyGantt;
protected override async System.Threading.Tasks.Task OnInitializedAsync()
{
    var mymarker = new GanttEventMarker();
    mymarker.CssClass = "e-custom-event-marker";
    mymarker.Label = "Test";
    mymarker.Day = "6/9/2020";
 
    MyGantt.EventMarkers.Add(mymarker);
}




(3) Refresh Gantt

When the underlying table on SQL-Server is updated (lets say a third person updates a progress-percentage or a taskname), how can we refresh the rendered Gantt without reloading the complete page?

I tried MyGantt.Refresh(); fired using a button's onClick-event, but the Gantt does not show the changes in tasks.
Of cause the changes are visible in SSMS, and in browser after pressing F5.



Any idea? 
Thank you so much again!

Cheers,
Volker

PP Pooja Priya Krishna Moorthy Syncfusion Team June 24, 2020 04:21 PM UTC

Hi Volker, 
Please find the below response. 
S.No 
Query 
Syncfusion Comments 
 
1 
 
 
If the gantt is empty, there is only a very narrow dialog, with a tiny scrollbar, it's nearly impossible to enter data.
"Auto" seems to work only, if there are already some tasks. 
 
We render dialog based on Gantt height. We can resolve this by work-around solution using OnActionComplete event with requesType openAddDialog. 
 
[Inject] 
IJSRuntime JsRuntime { get; set; } 
public async void OnActionComplete(ActionCompleteArgs<TaskData> args) 
{ 
    if (args.RequestType == "openAddDialog") 
    { 
        await JsRuntime.InvokeAsync<ActionCompleteArgs<TaskData>>("ChangeHeight.dialogHeight", args); 
    } 
} 
[_host.cshtml] 
<body>   
    //… 
    <script src="~/changeHeight.js"></script>   
</body>   
[changeHeight.js] 
window.ChangeHeight = { 
    dialogHeight: function(args) 
    { 
        var obj = document.getElementById(args.element.id).ej2_instances[0]; 
        document.getElementById(args.element.id).style.maxHeight = "430px"; 
    } 
}; 
 
 
 
2 
 
 
Dynamic Markers 
 
We can dynamically assign the event markers as like below code example. 
 
<button @onclick = "AddMarker" > Add Marker</button> 
@code{ 
public SfGantt<TaskData> gantt; 
public void AddMarker() 
{ 
#pragma warning disable BL0005 
    List<GanttEventMarker> markers = new List<GanttEventMarker>() { 
        new GanttEventMarker() { 
           CssClass = "e-custom-event-marker", 
           Label = "Test", 
           Day = "6/16/2020" 
        } 
        }; 
    this.gantt.EventMarkers = markers; 
} 
} 
 
Please find the below code example. 
 
3 
 
 
When the underlying table on SQL-Server is updated (lets say a third person updates a progress-percentage or a taskname), how can we refresh the rendered Gantt without reloading the complete page? 
 
The edited value gets updated properly, if we remove the word and enter a new name. 
We are able to reproduce this while editing the task name column, without removing the entire word. In this case, we cannot update the value on refreshing also. Is this the scenario you are facing this updating problem. If not, please share us the video for replication of this issue. 
We will check and update you further details in one business day. Until then we appreciate your patience. 
 
 
Regards, 
Pooja K. 


VO Volker June 26, 2020 07:32 AM UTC

Hi Pooja,

thank you so much for query 1 and 2!!!


ad 3)

Which GanttEvent gets fired, when the inbuilt Gantt-editor ("Task Information") is closed after pressing "Save" (BatchUpdate)?
Possibly I can catch this event in SfGantt in GanttEvents and implement some refreshings of the Blazor-page and that will do the trick in this case:






Bonus question 1:

Is it possible to rearrange the order of the input fields and tabs (ID, progress, start/end date, baseline dates and duration)?

In my business-case ID needn't be visible in the popup-editor, I just want it to be visible in the TreeGrid side, and duration should be in the first row.
Hence all elements would be visible without the need for scrolling:

1st row: progress, duration
2nd row: start date, end date
3rd row: baseline start, baseline end

btw. why is there a floating format for the integer ID?





Bonus question 2:

Is it possible to implement a custom dialog-editor rather than your build-in one when double-clicking?
In that case things would be more flexible.

I've already designed a basic implementation (mytaskeditor.razor with taskId as a parameter), where I can modify the progress, works so far pressing a button outside of the Gantt-component and I was able to refresh the gantt on closing my dialog, too.

But I don't know how to wire my custom dialog to the "cell-select doublelclick"-event or the "context menu/edit"-event etc of a row of the SfGantt component directly.



Any idea?

Cheers,
Volker

PP Pooja Priya Krishna Moorthy Syncfusion Team June 26, 2020 12:24 PM UTC

Hi Volker, 
Please find the below response. 
S.No 
Query 
Syncfusion Comments 

1 
Which Gantt events gets fired, when the Gantt-editor ("Task Information") is closed after pressing "Save" (BatchUpdate)? 
 
OnActionBegin event gets triggered with requestType beforeSave, while pressing the save button and before dialog is closed. 
OnActionComplete event gets triggered with requestType save, after dialog is closed. 


2 
 
Is it possible to rearrange the order of the input fields and tabs (ID, progress, start/end date, baseline dates and duration)? 
Yes, it is possible to rearrange/hide the input fields using GanttEditDialogFields property. Please find the below code example. 
<GanttEditDialogFields> 
    <GanttEditDialogField Type="DialogFieldType.General" HeaderText="General" 
                Fields="@(new string[] { "TaskId","Progress","Duration","StartDate","EndDate","BaselineStartDate","BaselineEndDate","TaskName" })"></GanttEditDialogField> 
      </GanttEditDialogFields> 
It displays in the order given in the Fields property. 


3 
Hence all elements would be visible without the need for scrolling 
 
We can achieve this overriding the CSS as like below code example. 
 
 
<style> 
    .e-gantt .e-gantt-dialog .e-edit-form-row { 
        height: 310px; 
    } 
    .e-gantt .e-gantt-dialog .e-item 
     { 
        height: 310px; 
    } 
</style> 
 
[Inject] 
IJSRuntime JsRuntime { get; set; } 
public async void OnActionComplete(ActionCompleteArgs<TaskData> args) 
{ 
    if (args.RequestType == "openAddDialog") 
    { 
        await JsRuntime.InvokeAsync<ActionCompleteArgs<TaskData>>("ChangeHeight.dialogHeight", args); 
    } 
} 
 
[_host.cshtml] 
<body>   
    //… 
    <script src="~/custom.js"></script>   
</body>   
 
[custom.js] 
window.ChangeHeight = { 
    dialogHeight: function(args) 
    { 
        var obj = document.getElementById(args.element.id).ej2_instances[0]; 
        document.getElementById(args.element.id).style.maxHeight = "480px"; 
    } 
}; 



4 
btw. why is there a floating format for the integer ID? 
 
We contact the concerned team about this, and it was just a notation, not a decimal value. We can also prevent this by using Format property in Edit params  as like below code example. 

<GanttColumns> 
            <GanttColumn Field="TaskId" Edit="@(new { @params = new { format ="###"} })" ></GanttColumn> 
//… 
 </GanttColumns> 



5 
 
Is it possible to implement a custom dialog-editor rather than your build-in one when double-clicking?
In that case things would be more flexible.

I've already designed a basic implementation (mytaskeditor.razor with taskId as a parameter), where I can modify the progress, works so far pressing a button outside of the Gantt-component and I was able to refresh the gantt on closing my dialog, too. 
Yes, it is possible to render custom dialog, by cancelling the default dialog. This can be one by using OnActionBegin event. 


public void OnActionBegin(ActionBeginArgs<TaskData> args) 
    { 
        if(args.RequestType == "beforeOpenEditDialog") 
        { 
            args.Cancel = true; 
            //code to render custom dialog 
        } 
    } 
 

Please find the below code example. 

Regards, 
Pooja K. 


VO Volker July 1, 2020 02:51 PM UTC

Hello Pooja,

I tried your solution, does not work in my case.


Let's try to reconstruct the problem:

If this is my DB model (using EF Core reverse engineering)...



... and if these are my display model and my Read-method (based on your example)...



...and then I want to show a label on the left-side of each task like you did showing the name of the task ... 



... well, then the task name @task.TaskNameDe never will show up as a label, although it is visible in the grid on the left side.
Interestingly, if (just for testing) I add @task.Duration as a second output, this part of the label will be displayed.

This is the output:



Any idea? 

Cheers,
Volker

PP Pooja Priya Krishna Moorthy Syncfusion Team July 3, 2020 02:47 PM UTC

Hi Volker, 
We have created a new incident under your account. Please use your direct trac account for further follow up. 
 
Regards, 
Pooja K. 


VO Volker July 13, 2020 06:48 AM UTC

Hi Pooja,

one last thing, it says your solution using GetAttribute/SetAttribute is deprecated...



Any idea?

Cheers,
Volker


LG Logeswari Gopalakrishnan Syncfusion Team July 13, 2020 12:57 PM UTC

Hi Volker, 
We have analyzed this and GetAttribute/SetAttribute are deprecated. Instead of this we can use AddClass method to customize the default styles of the Gantt Chart control. We can add class dynamically to the columns using the AddClass method of the QueryCellInfo  event. Please find the below code snippet. 
[Index.razor] 
 
<style> 
    .parent-bold { 
        font-weight: bold; 
    } 
</style> 
 
public void QueryCellInfo(QueryCellInfoEventArgs<TaskData> args) 
    { 
        if (args.Data.HasChildRecords) 
        { 
            args.Cell.AddClass(new string[] { "parent-bold" }); 
        } 
    } 
 
We have modified sample. Please find the below sample link. 
Please let us know, if you need further details on this. 
Regards, 
Logeswari G 


VO Volker July 14, 2020 12:24 PM UTC

Hi Logeswari

thank you again very much for your help. Works like a charm.

Cheers,
Volker

PP Pooja Priya Krishna Moorthy Syncfusion Team July 15, 2020 05:33 AM UTC

Hi Volker, 
Most welcome. 
We are happy to hear that you have achieved your requirement.  
Please get back to us if you have further queries. 

Regards, 
Pooja K. 


VO Volker April 1, 2021 04:57 PM UTC

Hi Logeswari,

your solution does not work anymore since v19.1.54 cause .HasChildRecords() is gone:

[Index.razor] 
 
 
 
public void QueryCellInfo(QueryCellInfoEventArgs args) 
    { 
        if (args.Data.HasChildRecords) 
        { 
            args.Cell.AddClass(new string[] { "parent-bold" }); 
        } 
    } 


Any ideas?

Cheers,
Volker 



PP Pooja Priya Krishna Moorthy Syncfusion Team April 3, 2021 07:38 AM UTC

Hi Volker, 
We are sorry for the inconvenience caused.  
As we moved our Gantt component to native approach(i.e. minimal usage of Java script in the area of data operation, event handling in background), some of the methods and properties have been missed those will be resolve by upcoming releases. 
We logged a bug report for the reported error. The status can be tracked from below feedback link. 
We will include this in our upcoming weekly release which is expected to be rolled out on April 14, 2021. 
Until then we appreciate your patience. 

Regards, 
Pooja K.

Loader.
Up arrow icon