Group Headers in UI for Silverlight

This is a migrated thread and some comments may be shown as answers.

Group Headers

7 Answers 42 Views

ScheduleView

This is a migrated thread and some comments may be shown as answers.

Tim asked on 02 Jan 2013, 06:59 PM

I'm trying to emulate the functionality from http://demos.telerik.com/silverlight/#ScheduleView/FirstLook to include headers under each day for resource items.

My xaml page has the following RadListBox in it which changes based on a RadComboBox that is not included here. Whenever that RadComboBox changes, the items in this RadListBox changes also.

<StackPanel Name="ResourcePanel" Orientation="Vertical">

<TextBlock VerticalAlignment="Center" Text="Doctors:" Margin="3,3,3,3" telerik:StyleManager.Theme="Office_Silver"/>

<telerik:RadListBox Name="ResList" Width="200" Height="200" ItemsSource="{Binding ResourceItemList, Mode=TwoWay}" >

<telerik:RadListBox.ItemTemplate>

<DataTemplate x:Name="ResourceTemplate">

<StackPanel Orientation="Horizontal">

<CheckBox ClickMode="Press" IsChecked="{Binding IsSelected, Mode=TwoWay}" telerik:StyleManager.Theme="Office_Silver">

<CheckBox.Content>

<TextBlock Text="{Binding Name}"></TextBlock>

</CheckBox.Content>

</CheckBox>

</StackPanel>

</DataTemplate>

</telerik:RadListBox.ItemTemplate>

</telerik:RadListBox>

</StackPanel>

My ViewModel has the following:

private ObservableCollection<ResourceItem> _ResourceItemList;

public ObservableCollection<ResourceItem> ResourceItemList

{

get

{

return _ResourceItemList;

}

set

{

if (_ResourceItemList != value)

{

_ResourceItemList = value;

OnPropertyChanged("ResourceItemList");

}

public MainPageViewModel(ILifestyleLiftServiceAgent serviceAgent)

{

this.ResourceItemList = new ObservableCollection<ResourceItem>();

// default resource list at first

ResourceItemList.Add(new ResourceItem("First String", string.Empty, false));

ResourceItemList.Add(new ResourceItem("Second String", string.Empty, false));

ResourceItemList.Add(new ResourceItem("Third String", string.Empty, false));

}

This ResourceItemList is what gets re-populated whenever the RadComboBox changes. This is working fine. However, I am not sure of how to have the items in the RadListBox be the headers similar to the First Look example in the link above. My goal is to have them as groups and when you check/uncheck an item in the RadListBox it will show/hide the group.

How should I go about getting this to work with these items being dynamic?

Thanks,

Tim

7 Answers, 1 is accepted

answered on 03 Jan 2013, 03:06 PM

Here's a bit more info of how I have it set up:

My RadScheduleView:

<telerik:RadScheduleView telerik:StyleManager.Theme="Office_Silver"

x:Name="radScheduleView"

ResourceTypesSource="{Binding ResourceTypes}"

....

>

<telerik:RadScheduleView.GroupDescriptionsSource>

<telerik:GroupDescriptionCollection>

<telerik:DateGroupDescription />

<telerik:ResourceGroupDescription ResourceType="myResourceType" ShowNullGroup="True" />

</telerik:GroupDescriptionCollection>

</telerik:RadScheduleView.GroupDescriptionsSource>

</telerik:RadScheduleView>

ResourceTypes which is bound to ResourceTypeSource is set in the MainPageViewModel.cs:

private ObservableCollection<ResourceType> resourceTypes;

public ObservableCollection<ResourceType> ResourceTypes

{

get

{

return resourceTypes;

}

set

{

resourceTypes = value;

}

When the RadComboBox selection is changed the following runs:





// the radlistbox is populated and the GetMyResources_Completed is called

void GetMyResources_Completed()

{

// Update resource types for scheduleview

UpdateResourceTypes();

// load Appointments after the resource list was updated

ServiceAgent.GetMyAppointments(CurrentVisibleDateRange as IDateSpan, SelectedSiteId, appointments, ResourceItemList, AppointmentTypeList);

}

void UpdateResourceTypes()

{

ObservableCollection<ResourceType> restype = new ObservableCollection<ResourceType>();

ResourceType docType = new ResourceType("myResourceType");

foreach (ResourceItem ri in ResourceItemList)

{

docType.Resources.Add(new Resource(ri.Name));

}

restype.Add(docType);

ResourceTypes = restype;

if (CurrentVisibleDateRange == null)

{

DateSpan dsDate = new DateSpan();

dsDate.Start = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day);

dsDate.End = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day + 1);

CurrentVisibleDateRange = dsDate;

}

Currently, it is not grouping the myResourceType even though I have the GroupDescriptionCollection set to it. I'm assuming it's how/when the resource is being created in the code behind.

How can I dynamically populate this resource and have it group for the appointments in codebehind?

Thanks,

Tim

answered on 03 Jan 2013, 05:04 PM

I've been able to default the headers the first time the schedule is loaded but it does not update when my ResourceTypes ObservableCollection is modified:

public MainPageViewModel(ILifestyleLiftServiceAgent serviceAgent)

{

this.appointments = new ObservableCollection<LSLAppointment>();

this._specialSlots= new ObservableCollection<Slot>();

this._Centers = new ObservableCollection<CenterItem>();

this.ResourceItemList = new ObservableCollection<ResourceItem>();

this.AppointmentTypeList = new ObservableCollection<AppointmentItemType>();

// default resource list at first

ResourceItemList.Add(new ResourceItem("Resource 1", string.Empty, false));

ResourceItemList.Add(new ResourceItem("Resource 2", string.Empty, false));

ResourceItemList.Add(new ResourceItem("Resource 3", string.Empty, false));

UpdateResourceTypes();

....

}

Obviously, MainPageViewModel is only called on the inital load of the page. So how can I get ResourceTypes to update the Groups dynamically after my RadCombo box changes?

Thanks,

Tim

answered on 07 Jan 2013, 02:27 PM

Yana,

I have tried the example there and when I add the following to UpdateResourceTypes I get an error:

void UpdateResourceTypes()

{

ObservableCollection<ResourceType> restype = new ObservableCollection<ResourceType>();

ResourceType docType = new ResourceType("myResourceType");

restype.Add(docType);

foreach (ResourceItem ri in ResourceItemList)

{

docType.Resources.Add(new Resource(ri.Name));

}

ResourceTypes.Remove(docType);

ResourceTypes.Add(docType);

}

There error that I receive is The invocation of the constructor on type 'xxx' that matches the specified binding constraints threw an exception.

The page doesn't error out but the groups don't update if I do the following:

ResourceTypes = restype;

Is there a simple solution that would show this? I am using the MVVM model if that makes a difference. I'm not sure if I am using a wrong type for ResourceTypes or if its some other issue.

Tim

Accepted

answered on 08 Jan 2013, 09:40 AM

ScheduleViewUpdateResources.zip

Hello Tim,

I cannot tell from the provided code snippet what is wrong in your case. I have attached a simple project based on the article to demonstrate how exactly the described approach works - it uses MVVM as well.

Hope this helps.

Regards,
Yana
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

answered on 08 Jan 2013, 03:32 PM

Yana,

The solution you attached has helped me to update the resources when I click a button. What I would like to do is call it when the RadComboBox selection has changed.

<telerik:RadComboBox Name="locComboBox"

Width="200"

Height="20"

SelectedIndex="0"

SelectedValue="{Binding SelectedSiteId, Mode=TwoWay}" />

In my codebehind:

private string _SelectedSiteId;

public string SelectedSiteId

{

get

{

return this._SelectedSiteId;

}

set

{

if (_SelectedSiteId != value)

{

_SelectedSiteId = value;

OnPropertyChanged("SeletectSiteId");

AddResourceCommand.Execute(null);

}

However this does not work. I am only able to get the resources to update on the button click itself and I don't want to make the user click a button every time they change the location. The AddResourceCommand.Execute(null) fires but doesn't do anything to the resources.

Thanks,

Tim