Bold Parent tasks | Blazor | Gantt Chart

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.

//…

@if ((context as TaskData).HasChildRecords)

{

<span class="e-label"><b>@((context as TaskData).TaskName)</b></span>

</div>

}

else

{

//…

}

</LeftLabelTemplate>

</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>

Sample – https://www.syncfusion.com/downloads/support/directtrac/general/ze/GanttEF_(2)-949217636

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.

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/GanttEF_(2)1829749306

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>

//…

</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.

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/GanttEF_(2)-28115997

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.

<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>

//…

</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>

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.

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/TestSample-303433710

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.

https://www.syncfusion.com/support/directtrac/incidents

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.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GanttEF-1096564477

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.

https://www.syncfusion.com/feedback/23954/haschildrecords-is-not-properly-updated-in-event-arguments

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.