We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Re-Render on schedule event datasource change

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

1 Reply

RM Ruksar Moosa Sait Syncfusion Team November 24, 2022 09:55 AM

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:

A screenshot of a computer

Description automatically generated


Regards,

Ruksar Moosa Sait



Attachment: BlazorYearViewCellCustomizationbasedonResources_9601a5d.zip

Loader.
Live Chat Icon For mobile
Up arrow icon