Is it posible to add click event on the specific date from the Gantt chart

[Ana-li]

Hi,

Is it possible to create an event when certain date from the Gantt chart is double clicked?

For example, when I click on 29.11.2023 column, a window to show up with some data, let say activities performed on that day?

Please send us an Example if it is possible.

Regards,

[Vignesh Sivalingam]

Hi Ana-li,

Greetings from Syncfusion.

Yes it possible to achieve your requirement of using ondblclick external event. Using OnCellEdit event, we have get the corresponding cell Details and show it in alert window.  For more information, please refer to the code snippet and sample provided below.

Code snippet:

Index.razor:

 

<SfGantt @ref=gantt ondblclick="@OnClick">

    <GanttEvents TValue="TaskData" OnCellEdit="OnCellEditHandler"></GanttEvents>

</SfGantt>

 

@code {

private async Task OnClick()

{

     await JSRuntime.InvokeVoidAsync("call", ClickedValue);

 

}

private void OnCellEditHandler(Syncfusion.Blazor.Grids.CellEditArgs<TaskData> args)

{

     args.Cancel = true;

     ClickedValue = args.ColumnName == "TaskName" ? args.Data.TaskName : args.ColumnName == "StartDate" ? args.Data.StartDate.ToString() : ClickedValue;

}

}

<script>

    function call(item) {

        alert(item);

    }

</script>

Sample: Sample

Regards,

Vignesh Sivalingam

[Ana-li]

Hi,

Thank you for your answer. We view your sample, but that is not what we need. What we want is,  to be able to create on click event on the dates that are in the time table, where the arrows are in the picture below, not in the columns that are on the left in the Ghantt (Start date, End date ...)

Regards,

[Vignesh Sivalingam]

Hi Ana-li,

Yes, it possible to achieve your requirement of using ondbleclick external event. Using FormatterTemplate, we have get the corresponding cell Details and show it in alert window.  For more information, please refer to the code snippet and sample provided below.

Code snippet:

Index.razor:

 

<SfGantt @ref=gantt>

   <GanttTimelineSettings TimelineUnitSize=50>

    <GanttTopTierSettings>

       <FormatterTemplate >

           @{

               @if(context.Tier=="top"){

                    ClickedValue = this.TopTierFormatter((context.Date));

                    <div ondblclick="@OnClick">

                        @this.TopTierFormatter((context.Date))

                    </div>

                       

                }

           }

       </FormatterTemplate>

    </GanttTopTierSettings>

    <GanttBottomTierSettings Unit="TimelineViewMode.Month">

        <FormatterTemplate>

            @{

                @if (context.Tier == "bottom")

                {

                    ClickedValue = this.BottomTierFormatter((context.Date));

                    <div ondblclick="@OnClick">

                        @this.BottomTierFormatter((context.Date))

                    </div>

 

                }

            }

        </FormatterTemplate>

    </GanttBottomTierSettings>

</SfGantt>

 

@code {

private async Task OnClick()

{

     await JSRuntime.InvokeVoidAsync("call", ClickedValue);

 

}

public string TopTierFormatter(DateTime? date)

{

     DateTime dateTime = (DateTime)(date);

     var month = dateTime.Month;

     if (month >= 0 && month <= 2)

     {

         return "Q1";

     }

     ……

}

public string BottomTierFormatter(DateTime? date)

{

     DateTime dateTime = (DateTime)(date);

     var month = dateTime.Month;

     switch (month)

     {

         case 1:

             return "Jan";

         ………

     }

}

}

<script>

    function call(item) {

        alert(item);

    }

</script>

Sample: Sample

Regards,

Vignesh Sivalingam

[Shereen Shajahan]

Hi Ana-li,

Please get back to us for assistance in the future.

Regards,

Shereen