Re-Render on schedule event datasource change

[Fikri Emre]

Hello,

I am trying to display a yearly calendar with the schedule components year view. I color the cells of each calendar day by its event data on the initial rendering of the schedule. I am changing the event datasources with some checkboxes and trying to show the user newly colored schedule however even if the event datasource changes, the year view doesnt re-render itself. How can I force the schedule to render itself so it can fire the OnRenderCell event again ?

I am attaching some sample code and pictures here so you can have a better understanding of what I am trying to do.

HTML Code of schedule component and the checkboxes:

<SfSchedule @ref="ScheduleObj" TValue="AppointmentData" @bind-SelectedDate="@CurrentDate" Height="100%" Width="100%">


                    <ScheduleResources>
                        <ScheduleResource TItem="ResourceData" TValue="int[]" DataSource="@ResourceList" Field="ResourceId" Title="Owner" Name="Owners" TextField="OwnerText" IdField="Id" ColorField="Color" AllowMultiple="true"></ScheduleResource>
                    </ScheduleResources>
                    <ScheduleEvents TValue="AppointmentData" OnPopupOpen="@OnPopupOpen" OnRenderCell="@OnRenderCell"> </ScheduleEvents>
                    <ScheduleEventSettings DataSource="@DataSourceEvent">
                    </ScheduleEventSettings>
                    <ScheduleViews>
                        <ScheduleView Option="View.Year" FirstDayOfWeek="1" ShowWeekNumber=true></ScheduleView>
                        <ScheduleView Option="View.Month" ShowWeekNumber=true></ScheduleView>
                    </ScheduleViews>
                </SfSchedule>
                <table id='property' class='property-panel-table' style="width: 100%;">
                <tbody>
                    <tr style="height: 50px">
                        <td style="width: 100%">
                                <SfCheckBox TChecked="bool" @bind-Checked="@chcTumu" Label="Tümü" ValueChange="@OnChange"></SfCheckBox>
                            </td>
                    </tr>
                    <tr style="height: 50px">
                        <td style="width: 100%">
                                <SfCheckBox TChecked="bool" @bind-Checked="@chcCalismaVar" Label="Çalışma Var" ValueChange="@OnChange"></SfCheckBox>
                        </td>
                    </tr>
                    <tr style="height: 50px">
                        <td style="width: 100%">
                                <SfCheckBox TChecked="bool"  @bind-Checked="@chcResmiTatil" Label="Resmi Tatil" ValueChange="@OnChange"></SfCheckBox>
                        </td>
                    </tr>
                </tbody>
            </table>

Checkboxes OnChange event code :

public async Task OnChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
        {
            List<int> selectedResource = new List<int>();
            List<AppointmentData> filteredData = new List<AppointmentData>();
            if (chcTumu) { selectedResource.Add(0); }
            if (chcCalismaVar) { selectedResource.Add(1); }
            if (chcResmiTatil) { selectedResource.Add(2); }
            foreach (int resource in selectedResource)
            {
                List<AppointmentData> data = DataSourceEvent.Where(x => ResourceList[resource].Id == x.ResourceId).ToList();
                filteredData = filteredData.Concat(data).ToList();
            }


            DataSourceEvent = filteredData;
        }

OnRenderCell event code : 

public void OnRenderCell(RenderCellEventArgs args)
        {
            switch (DataSourceEvent.Where(t => t.StartTime == args.Date).Select(t => t.ResourceId).LastOrDefault())
            {
                case 1:
                    args.CssClasses = new List<string> { "calismaVar" };
                    break;
                case 2:
                    args.CssClasses = new List<string>() { "calismaYok" };
                    break;
                case 3:
                    args.CssClasses = new List<string>() { "resmiTatil" };
                    break;
                case 4:
                    args.CssClasses = new List<string>() { "tatil" };
                    break;
                case 5:
                    args.CssClasses = new List<string>() { "yarimGun" };
                    break;
                case 6:
                    args.CssClasses = new List<string>() { "yuklemeGunu" };
                    break;
                case 7:
                    args.CssClasses = new List<string>() { "bakim" };
                    break;
                default:
                    break;
            }
        }

Attachment: img_e268cb38.zip

[Ruksar Moosa Sait]

Hi Fikri,

By default, it is not possible to trigger the render cell event of the Schedule again after the data source is updated. Hence, you can achieve the requirement through the CellHeaderTemplate like the below code.

[Index.razor]

<ScheduleTemplates>

            <CellHeaderTemplate>

                @{

                    DateTime currentDate = (context as TemplateContext).Date;

                    string name = string.Empty;

                    switch (DataSourceEvent.Where(t => t.StartTime == currentDate).Select(t => t.ResourceId).LastOrDefault())

                    {

                        case 1:

                            name = "calismaVar";

                            break;

                        case 2:

                            name = "calismaYok";

                            break;

                        case 3:

                            name = "resmiTatil";

                            break;

                        default:

                            break;

                    }

                    <span class="@("e-day " + name)">@currentDate.Day.ToString(CultureInfo.CurrentCulture)</span>

                }

            </CellHeaderTemplate>

</ScheduleTemplates>

public List<AppointmentData> FinalDataSource = new List<AppointmentData>();

 

protected override void OnInitialized()

    {

        FinalDataSource = DataSourceEvent;

        base.OnInitialized();

    }

    public async Task OnChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)

    {

        List<int> selectedResource = new List<int>();

        List<AppointmentData> filteredData = new List<AppointmentData>();

        if (chcTumu) { selectedResource.Add(0); }

        if (chcCalismaVar) { selectedResource.Add(1); }

        if (chcResmiTatil) { selectedResource.Add(2); }

        foreach (int resource in selectedResource)

        {

            List<AppointmentData> data = FinalDataSource.Where(x => ResourceList[resource].Id == x.ResourceId).ToList();

            filteredData = filteredData.Concat(data).ToList();

        }

        DataSourceEvent = filteredData;

    }

Output:

Regards,

Ruksar Moosa Sait

Attachment: BlazorYearViewCellCustomizationbasedonResources_9601a5d.zip

[Fikri Emre]

Hello

Thank you for your quick response. I wasn't able to run your sample solution due to .net version problem. I copied it onto my own project. I couldn't produce the same results as you did with this code. CellHeaderTemplate doesn't fire when I change the datasource using the checkboxes. CellHeaderTemplate seems to only fire in the month view and not the Year view. I am thinking maybe the year view doesnt fire off any render related events on the datasource change.

[Ruksar Moosa Sait]

Fikri, We have checked on your query and let you know that the CelllHeaderTemplate triggers in year view. Provide us the below additional details to further proceed with your query.

• .Net version of your project.
• Issue reproducing sample.

[Fikri Emre]

Hi,

The project is running on .NET 6.0

Syncfusion items are on version 20.2.0.46

Added the sample to the attachment

Attachment: SchedularSample_82b602a0.rar

[Fikri Emre]

Hello,

I found the problem. I was using an older version of syncfusion and one of the never patches added this fix : 

• #FB34192 - Provided cell template, day header template and month header template support for Year view.

After I updated the version, your solution worked so I am marking it as the answer.

Thanks for the help

[Ruksar Moosa Sait]

Fikir, We are happy our solution works for you.