Skip to content

Latest commit

 

History

History
260 lines (214 loc) · 8.56 KB

refresh-data.md

File metadata and controls

260 lines (214 loc) · 8.56 KB
title page_title description slug tags published position
Refresh Data
Scheduler Refresh Data
Refresh Scheduler Data using Observable Data or creating a new Collection reference.
scheduler-refresh-data
telerik,blazor,scheduler,observable,data,new,collection
true
40

Scheduler - Refresh Data

@template

In this article:

Rebind Method

You can refresh the Scheduler data by using the Rebind method exposed to the reference of the TelerikScheduler.

caption Use the Rebind method to refresh the Scheduler data.

````CSHTML @* Add/remove an appointment or change the data collection to see how the Scheduler reacts to that change. *@

Add appointment

Remove appointment

Change data

<TelerikScheduler @ref="SchedulerRef" Data="@Appointments" @bind-Date="@StartDate" @bind-View="@CurrView" Height="600px" Width="800px">

@code { TelerikScheduler SchedulerRef { get; set; } public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);

public SchedulerView CurrView { get; set; } = SchedulerView.Week;

public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important

void AddAppointment()
{
    Appointments.Add(
        new SchedulerAppointment
        {
            Title = "Hairdresser",
            Description = "I need to get my hair cut.",
            Start = new DateTime(2019, 11, 28, 10, 0, 0),
            End = new DateTime(2019, 11, 28, 11, 0, 0)
        });
    SchedulerRef.Rebind();
}

void RemoveAppointment()
{
    if (Appointments.Count > 0)
    {
        Appointments.RemoveAt(Appointments.IndexOf(Appointments.Last()));
        Appointments = new List<SchedulerAppointment>(Appointments);
    }
}

void ChangeData()
{
    Appointments = new List<SchedulerAppointment>()
    {
        new SchedulerAppointment
        {
            Title = "Hairdresser",
            Description = "I need to get my hair cut.",
            Start = new DateTime(2019, 11, 25, 9, 30, 0),
            End = new DateTime(2019, 11, 25, 10, 30, 0)
        },

        new SchedulerAppointment
        {
            Title = "Lunch with Alice",
            Description = "Spend some time with a friend",
            Start = new DateTime(2019, 11, 28, 12, 0, 0),
            End = new DateTime(2019, 11, 28, 13, 0, 0)
        }
    };
    SchedulerRef.Rebind();
}

List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
{
        new SchedulerAppointment
        {
            Title = "Vet visit",
            Description = "The cat needs vaccinations and her teeth checked.",
            Start = new DateTime(2019, 11, 26, 11, 30, 0),
            End = new DateTime(2019, 11, 26, 12, 0, 0)
        },

        new SchedulerAppointment
        {
            Title = "Planning meeting",
            Description = "Kick off the new project.",
            Start = new DateTime(2019, 11, 25, 9, 30, 0),
            End = new DateTime(2019, 11, 25, 12, 45, 0)
        },

        new SchedulerAppointment
        {
            Title = "Trip to Hawaii",
            Description = "An unforgettable holiday!",
            IsAllDay = true,
            Start = new DateTime(2019, 11, 27),
            End = new DateTime(2019, 12, 07)
        }
};

public class SchedulerAppointment
{
    public string Title { get; set; }
    public string Description { get; set; }
    public DateTime Start { get; set; }
    public DateTime End { get; set; }
    public bool IsAllDay { get; set; }
}

}


## Observable Data

>note Refresh the Scheduler data by creating a [New collection reference](#new-collection-reference).

@[template](/_contentTemplates/common/observable-data.md#observable-data)

## New Collection Reference

@[template](/_contentTemplates/common/observable-data.md#refresh-data)

>caption Create new collection reference to refresh the Scheduler data.

````CSHTML
@* Add/remove an appointment or change the data collection to see how the Scheduler reacts to that change. *@

<TelerikButton OnClick="@AddAppointment">Add appointment</TelerikButton>

<TelerikButton OnClick="@RemoveAppointment">Remove appointment</TelerikButton>

<TelerikButton OnClick="@ChangeData">Change data</TelerikButton>

<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" @bind-View="@CurrView" Height="600px" Width="800px">
    <SchedulerViews>
        <SchedulerDayView StartTime="@DayStart" />
        <SchedulerWeekView StartTime="@DayStart" />
        <SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
    </SchedulerViews>
</TelerikScheduler>

@code {
    public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);

    public SchedulerView CurrView { get; set; } = SchedulerView.Week;

    public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important

    void AddAppointment()
    {
        Appointments.Add(
            new SchedulerAppointment
            {
                Title = "Hairdresser",
                Description = "I need to get my hair cut.",
                Start = new DateTime(2019, 11, 28, 10, 0, 0),
                End = new DateTime(2019, 11, 28, 11, 0, 0)
            });
        Appointments = new List<SchedulerAppointment>(Appointments);
    }

    void RemoveAppointment()
    {
        if (Appointments.Count > 0)
        {
            Appointments.RemoveAt(Appointments.IndexOf(Appointments.Last()));
            Appointments = new List<SchedulerAppointment>(Appointments);
        }
    }

    void ChangeData()
    {
        Appointments = new List<SchedulerAppointment>()
        {
            new SchedulerAppointment
            {
                Title = "Hairdresser",
                Description = "I need to get my hair cut.",
                Start = new DateTime(2019, 11, 25, 9, 30, 0),
                End = new DateTime(2019, 11, 25, 10, 30, 0)
            },

            new SchedulerAppointment
            {
                Title = "Lunch with Alice",
                Description = "Spend some time with a friend",
                Start = new DateTime(2019, 11, 28, 12, 0, 0),
                End = new DateTime(2019, 11, 28, 13, 0, 0)
            }
        };
        Appointments = new List<SchedulerAppointment>(Appointments);
    }

    List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
    {
            new SchedulerAppointment
            {
                Title = "Vet visit",
                Description = "The cat needs vaccinations and her teeth checked.",
                Start = new DateTime(2019, 11, 26, 11, 30, 0),
                End = new DateTime(2019, 11, 26, 12, 0, 0)
            },

            new SchedulerAppointment
            {
                Title = "Planning meeting",
                Description = "Kick off the new project.",
                Start = new DateTime(2019, 11, 25, 9, 30, 0),
                End = new DateTime(2019, 11, 25, 12, 45, 0)
            },

            new SchedulerAppointment
            {
                Title = "Trip to Hawaii",
                Description = "An unforgettable holiday!",
                IsAllDay = true,
                Start = new DateTime(2019, 11, 27),
                End = new DateTime(2019, 12, 07)
            }
    };

    public class SchedulerAppointment
    {
        public string Title { get; set; }
        public string Description { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
        public bool IsAllDay { get; set; }
    }
}

See Also