How to create a CustomGrouping in the Silverlight SfSchedule ?

5 mins read

CustomGrouping is used to group the schedule appointments based on the resources you select. By using the CustomGrouping, you can add the same appointment for multiple resources simultaneously. This article explains about how to group the appointments based on the resources.

Creating CustomGrouping

Create a WPF application and add the SfSchedule control to it. Add Resources in the ScheduleResourceTypeCollection and create buttons to change the resource type dynamically by using the button click event as in the following code example.

XAML

<Grid Background="GhostWhite">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" ></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Center">
            <Button x:Name="television" Background="Blue" Content="Television" Click="Button_Click_1" Height="35"  Margin="5" Foreground="White"  Width="200" HorizontalAlignment="Center" ></Button>
            <Button x:Name="programs" Background="Blue" Width="200" Click="Button_Click_1" Height="35"  Margin="5" Foreground="White" Content="Programs"  HorizontalAlignment="Center"/>
        </StackPanel>
        <syncfusion:SfSchedule Grid.Column="0" ScheduleType="Week" DayHeaderOrder="OrderByDate"
                 IntervalHeight="30" Background="WhiteSmoke" Appointments="{Binding FilterColl}" Resource="TV" CurrentDateBackground="#63A028"  HeaderBackground="#FF25A0DA"    x:Name="schedule"  Grid.Row="1" >
            <syncfusion:SfSchedule.ScheduleResourceTypeCollection>
                <syncfusion:ResourceType   TypeName="TV" >
                    <syncfusion:Resource ResourceName="TV1" DisplayName="StarSports" />
                    <syncfusion:Resource ResourceName="TV2" DisplayName="ESPN"/>
                    <syncfusion:Resource ResourceName="TV3" DisplayName="TenSports"/>
                </syncfusion:ResourceType>
                <syncfusion:ResourceType TypeName="programs">
                    <syncfusion:Resource ResourceName="FootBall" DisplayName="FootBall"/>
                    <syncfusion:Resource ResourceName="Cricket" DisplayName="Cricket"/>
                    <syncfusion:Resource ResourceName="News" DisplayName="News"/>
                </syncfusion:ResourceType>
           </syncfusion:SfSchedule.ScheduleResourceTypeCollection>
        </syncfusion:SfSchedule>
    </Grid>

In the above code, two types of resources are used.

StarSports
ESPN
TenSports

Programs

FootBall
Cricket
News

Note: In the above code example, the value of the DayHeaderOrder property is OrderByDate that is used to display multiple resources in each day. You can also set the OrderByResouce value for the same property where each Resource displays the schedule appointments in all the week days.

Create appointment collections and group the appointments by using the GetFilterCollection method as in the following code example.

public partial class MainPage : UserControl
    {
        private ObservableCollection<DateTime> datecoll = new ObservableCollection<DateTime>();
        private ObservableCollection<DateTime> dateselected = new ObservableCollection<DateTime>();
        public ScheduleAppointmentCollection FilterColl { get; set; }
        Random random;
        public MainPage()
        {
            InitializeComponent();
            random = new Random();
            for (int i = -20; i < 20; i += 2)
            {
                for (int j = -7; j < 7; j++)
                {
                    datecoll.Add(DateTime.Now.Date.AddDays(j).AddHours(i));
                }
            }
            this.FilterColl = GetFilterCollection();
            this.DataContext = this;
        }
        private ScheduleAppointmentCollection GetFilterCollection()
        {
            string[] football = new string[] { "USA vs IRN ", "RUS vs ARG", "POR vs SWI", "BEL vs ARG", "USA vs RUS", "IRN vs POR", "CRO vs MEX", "JPN vs ITA", "COL vs URU" };
            string[] cricket = new string[] { "IND vs PAk", "AUS vs SA", "SRI vs WI", "SA vs IND", "ZIM vs PAK", "SRI vs AUS" };
            string[] news = new string[] { "Cricket news", "Football news", "Hockey news", "Tennis news", "news of Athletics", "Golf news", "Kabaddi news", "VolleyBall news" };
            string[] pgms = new string[] { "FootBall", "Cricket", "News" };
            ScheduleAppointmentCollection app = new ScheduleAppointmentCollection();
            for (int dc = 0; dc < datecoll.Count - 1; dc++)
            {
                DateTime date = datecoll[dc];
                dateselected.Add(date);
                for (int sd = 0; sd < dateselected.Count - 1; sd++)
                {
                    if (date == dateselected[sd])
                    {
                        date = date.AddDays(1);
                    }
                }
                ScheduleAppointment app1 = new ScheduleAppointment() { StartTime = date };
               app1.ResourceCollection.Add(new Resource() { ResourceName = "TV" + random.Next(1, 4), TypeName = "TV" });
                app1.ResourceCollection.Add(new Resource() { ResourceName = pgms[random.Next(0, 3)], TypeName = "programs" });
                if (app1.ResourceCollection[1].ResourceName.Equals("FootBall"))
                {
                    app1.Subject = football[random.Next(0, football.Length)];
                    app1.EndTime = date.AddHours(1);
                }
                else if (app1.ResourceCollection[1].ResourceName.Equals("Cricket"))
                {
                    app1.Subject = cricket[random.Next(0, cricket.Length)];
                    app1.EndTime = date.AddHours(1);
                }
                else
                {
                    app1.Subject = news[random.Next(0, news.Length)];
                    app1.EndTime = date.AddHours(1);
                }
                app1.AppointmentBackground = new SolidColorBrush(Colors.Gray);
                app.Add(app1);
            }
           return app;
        }
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
           string str = (sender as Button).Content.ToString();
            if (str.Equals("Television"))
            {
                programs.IsEnabled = true;
                this.schedule.Resource = "TV";
                television.IsEnabled = false;
            }
            else
            {
                television.IsEnabled = true;
                this.schedule.Resource = "programs";
                programs.IsEnabled = false;
            }
        }
    }

NOTE: In the above code example, in GetFilterCollection method both the resources, TV and Program are added in a same appointment by using the ResourceCollection property. When the resource of the schedule is changed to any other type, the same appointment is used to display.

When the resource type is Programs, then the appointments are filtered based on the resource name as in the above code example.

Note: For an example, when the resource name is FootBall, then the appointments are related to football.

The default resource type is Television where each resource has the appointments of all the three programs such as football, cricket and news. When you change the resource type as Programs, then appointments are filtered and each resource has the appointments related to the same resource name.

The following screenshots display the schedule appointments based on the resource type.

Figure 1: Appointments based on resource type of Television in week view

Figure 2: Filtered Appointments in the resource type of Programs in week view

Sample Link

CustomGrouping_SL.zip

Did you find this information helpful?

Yes

Comments (0)

How to create a CustomGrouping in the Silverlight SfSchedule ?

Access denied