BaselineTemplate

[Roberto Becchetti]

Goodmorning,

I want to use BaselineTemplate to customize background color of baseline bar by the variabile value.
Below simple example:

                    <BaselineTemplate>

                        @{

                            var task = context as GanttTaskData;

                            var baselineColor = task.IsExpanded ? "rgba(134, 183, 254, 0.2)" : "rgba(134, 183, 254, 1)";

                        }

                        <div class="e-baseline-bar"

                             style="height:10px;

                            background-color:@baselineColor;

                            border:1px solid @baselineColor;

                            border-radius:2px;

                            margin-top:-15px;

                            width:100%;">

                        </div>

                    </BaselineTemplate>

My problem is that using  BaselineTemplate the width of the bar is not correct and I'm not be able to calculate the correct width in function of BaselineStartDate and BaselineEndData. 
Thanks.

Roberto

[Sridharan Jayabalan]

Hi Roberto,

 

Greetings from Syncfusion.

 

For your query, we understand that you are trying to customize the baseline color based on a variable value, but you are encountering a problem with manually calculating the baseline width for the BaselineStartDate and BaselineEndDate. We would like to inform you that this can be achieved by using the CSS below to set the baseline width of the TaskBar, instead of calculating the width manually. This approach will automatically align the BaselineStart and BaselineEnd dates width.

 

We recommend applying the custom styles to the .e-baseline-container element. Please refer to the code snippet below for your reference:

 

Code-Snippet:

 <style>

    .e-baseline-container{

        position:relative

    }

</style>

 

If you are still facing issues after applying the recommended solution, please share a detailed explanation of the problem so that we can assist you further.

 

 

Regards,

Sridharan

[Roberto Becchetti]

Using "position:relative" and  "width:100%"  the lenght of the baseline is correct:

                    <BaselineTemplate>

                        @{

                            var task = context as GanttTaskData;

                            var baselineColor = task.IsExpanded ? "rgba(134, 183, 254, 0.2)" : "rgba(134, 183, 254, 1)";

                        }

                        <div class="e-baseline-bar"

                             style="height:10px;

                            background-color:@baselineColor;

                            border:1px solid @baselineColor;

                            border-radius:2px;

                            margin-top:-15px;

                            position:relative;

                            width:100%"

                            >

                        </div>

                    </BaselineTemplate>

Thanks a lot.

Roberto

[Deepika Sekar]

Hi Roberto,

Thanks for the update! Please get back to us if you need any other assistance.

Regards,

Deepika S