Hi ,
We were using telerik controls for our application. we have tab panel with panel bar both bind data dynamically. it working well with old version. we wanted to upgrade with new version due to some chart issues. but it affecting this code. Please find the code attached. it have two tab controls with panel bars. top one will work fine. but our requirement is bit different all the items/objects under panel bar are not same. Please check the attached code and do the needful so that we can decide on upgrading to new version .
<UserControl.Resources>
<DataTemplate x:Key="PanelBarItemTemplate">
<StackPanel>
<TextBlock Text="{Binding Title}"/>
<TextBlock Text="{Binding DateCreated}"/>
<TextBlock Text="{Binding Price}"/>
</StackPanel>
</DataTemplate>
<telerik:HierarchicalDataTemplate x:Key="PanelBarHeaderTemplate"
ItemsSource="{Binding RelatedItems}"
ItemTemplate="{StaticResource PanelBarItemTemplate}" >
<TextBlock Text="{Binding Title}" />
</telerik:HierarchicalDataTemplate>
<DataTemplate x:Key="ItemTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Title}"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="ContentTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel>
<TextBlock Text="{Binding Title}"/>
<TextBlock Text="{Binding DateCreated}"/>
<TextBlock Text="{Binding Price}"/>
<telerik:RadPanelBar x:Name="radPanelBar" Width="200"
HorizontalAlignment="Center" VerticalAlignment="Top"
ItemsSource="{Binding RelatedItems}"
ItemTemplate="{StaticResource PanelBarHeaderTemplate}" >
</telerik:RadPanelBar>
</StackPanel>
</Grid>
</DataTemplate>
<DataTemplate x:Key="PanelBarItemTemplate1">
<StackPanel>
<TextBlock Text="{Binding Price}"/>
</StackPanel>
</DataTemplate>
<telerik:HierarchicalDataTemplate x:Key="PanelBarHeaderTemplate1"
ItemsSource="{Binding SurveyP}"
ItemTemplate="{StaticResource PanelBarItemTemplate1}" >
<TextBlock Text="{Binding Name}" />
</telerik:HierarchicalDataTemplate>
<DataTemplate x:Key="ItemTemplate1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding SurveyP.Name}"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="ContentTemplate1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel>
<TextBlock Text="{Binding SurveyP.Name}"/>
<telerik:RadPanelBar x:Name="radPanelBar1" Width="200"
HorizontalAlignment="Center" VerticalAlignment="Top"
ItemsSource="{Binding SurveyP}"
Loaded="radPanelBar_Loaded" Expanded="radPanelBar1_Expanded">
<telerik:RadPanelBarItem Header="Mp">
<TextBlock Text="Name"/>
<TextBlock Text="{Binding SurveyP.mp.Name}"/>
</telerik:RadPanelBarItem>
<telerik:RadPanelBarItem Header="Equipment">
<TextBlock Text="Price"/>
<TextBlock Text="{Binding SurveyP.equipment.Price}"/>
</telerik:RadPanelBarItem>
</telerik:RadPanelBar>
</StackPanel>
</Grid>
</DataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot"
Background="White">
<StackPanel>
<telerik:RadTabControl x:Name="myTabControl"
ScrollMode="Viewport"
BorderThickness="0"
Background="Transparent"
telerik:StyleManager.Theme="Windows7" ItemTemplate="{StaticResource ItemTemplate}"
ContentTemplate="{StaticResource ContentTemplate}" ></telerik:RadTabControl >
<telerik:RadTabControl x:Name="myTabControl1"
ScrollMode="Viewport"
BorderThickness="0"
Background="Transparent"
telerik:StyleManager.Theme="Windows7" ItemTemplate="{StaticResource ItemTemplate1}"
ContentTemplate="{StaticResource ContentTemplate1}" SelectedIndex="1" SelectionChanged="tab_SelectionChanged" ></telerik:RadTabControl >
<!--<telerik:RadTabControl x:Name="myTabControl1"
ScrollMode="Viewport"
BorderThickness="0"
Background="Transparent"
telerik:StyleManager.Theme="Windows7">
<telerik:RadTabItem Header="Item 1" >
<telerik:RadPanelBar x:Name="radPanelBar" Width="200"
HorizontalAlignment="Center" VerticalAlignment="Top"
ItemTemplate="{StaticResource PanelBarHeaderTemplate}">
</telerik:RadPanelBar>
</telerik:RadTabItem>
<telerik:RadTabItem Header="Item 2" >
<telerik:RadPanelBar x:Name="radPanelBar1" Width="200"
HorizontalAlignment="Center" VerticalAlignment="Top"
ItemTemplate="{StaticResource PanelBarHeaderTemplate}">
</telerik:RadPanelBar>
</telerik:RadTabItem>
<telerik:RadTabItem Header="Item 3" >
<telerik:RadPanelBar x:Name="radPanelBar2" Width="200"
HorizontalAlignment="Center" VerticalAlignment="Top"
ItemTemplate="{StaticResource PanelBarHeaderTemplate}">
</telerik:RadPanelBar>
</telerik:RadTabItem>
</telerik:RadTabControl>-->
</StackPanel>
</Grid>
</UserControl>
public partial class MainPage : UserControl
{
IList<object> RelatedItems = new ObservableCollection<object>();
public IList<ReportLocation> ReportLocations = new ObservableCollection<ReportLocation>();
public MainPage()
{
InitializeComponent();
RelatedItems = MyViewModel.GenerateItems(); ;
//myTabControl.ItemsSource = GenerateItems();
myTabControl.ItemsSource = MyViewModel.GenerateItems();
MyViewModel mv = new MyViewModel();
ReportLocations = Report.GetReportLocations();
myTabControl1.ItemsSource = Report.GetReportLocations();
//radPanelBar.ItemsSource = MyViewModel.GenerateItems();
//radPanelBar1.ItemsSource = MyViewModel.GenerateItems();
//radPanelBar2.ItemsSource = MyViewModel.GenerateItems();
}
private ObservableCollection<DataItem> GenerateItems()
{
ObservableCollection<DataItem> result = new ObservableCollection<DataItem>();
for (int i = 0; i < 5; i++)
{
result.Add(new DataItem()
{
Header = String.Format("Item {0}", i),
Content = String.Format("Content of Item {0}", i)
});
}
return result;
}
private void tab_SelectionChanged(object sender, RoutedEventArgs e)
{
}
private void radPanelBar_Loaded(object sender, RoutedEventArgs e)
{
//((RadPanelBar)sender).ItemsSource = MyViewModel.GenerateItems();
}
private void radPanelBar1_Expanded(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
}
}
public class MP
{
public string Title { get { return "MP"; } }
public string Name{ get; set; }
}
public class Equipment
{
public string Title { get { return "Equipment"; } }
public int Price{ get; set; }
}
public class Survey
{
public MP m = new MP();
public Equipment e = new Equipment();
public string Name { get; set; }
public IList<object> Pro = new ObservableCollection<object>();
public IList<object> ProList
{
get { return Pro; }
set { Pro = value; }
}
public Equipment equipment
{
get { return e; }
set { e = value; }
}
public MP mp
{
get { return m; }
set { m = value; }
}
}
public class ReportLocation
{
public Survey s = new Survey();
public string Name { get; set; }
public Survey SurveyP
{
get { return s; }
set {s=value;}
}
}
public class Report
{
public IList<ReportLocation> ReportLocations = new ObservableCollection<ReportLocation>();
//ReportLocations rl = new ReportLocations();
public static IList<ReportLocation> GetReportLocations()
{
IList<ReportLocation> rl = new ObservableCollection<ReportLocation>();
MP m1 = new MP();
m1.Name = "Giri";
Equipment e1 = new Equipment();
e1.Price = 12;
Survey s1 = new Survey();
s1.mp = m1;
s1.equipment = e1;
s1.Pro.Add(m1);
s1.Pro.Add(e1);
s1.Name = "Report1";
ReportLocation rl1 = new ReportLocation();
rl1.Name = "Rl1";
rl1.s = s1;
rl.Add(rl1);
MP m2 = new MP();
m2.Name = "Netra";
Equipment e2 = new Equipment();
e2.Price = 11;
Survey s2 = new Survey();
s2.mp = m2;
s2.equipment = e2;
s2.Name = "Report2";
s2.Pro.Add(m2);
s2.Pro.Add(e2);
ReportLocation rl2 = new ReportLocation();
rl2.Name = "Rl2";
rl2.s = s2;
rl.Add(rl2);
MP m3 = new MP();
m3.Name = "Suresh";
Equipment e3 = new Equipment();
e3.Price = 10;
Survey s3 = new Survey();
s3.mp = m3;
s3.equipment = e3;
s3.Name = "Report3";
s3.Pro.Add(m3);
s3.Pro.Add(e3);
ReportLocation rl3 = new ReportLocation();
rl3.Name = "Rl3";
rl3.s = s3;
rl.Add(rl3);
return rl;
}
}
public class MyViewModel
{
public MyViewModel()
{
this.RelatedItems = new ObservableCollection<object>();
}
public string Title { get; set; }
public DateTime DateCreated { get; set; }
public double Price { get; set; }
public IList<object> RelatedItems { get; set; }
public static IList<object> GenerateItems()
{
var result = new ObservableCollection<object>();
foreach (var num in Enumerable.Range(1, 5))
{
var item = new MyViewModel();
item.DateCreated = DateTime.Today.AddDays(-num % 15);
item.Price = num * 100 + Convert.ToDouble(num) / 100;
item.Title = String.Format("Item {0}", num);
for (int i = 0; i < 5; i++)
{
var child = new MyViewModel();
child.DateCreated = DateTime.Today.AddDays(-num % 5 - i);
child.Price = num * 100 + Convert.ToDouble(num + i) / 100;
child.Title = String.Format("Item {0}.{1}", num, i);
for (int j = 0; j < 2; j++)
{
var child1 = new MyViewModel();
child1.DateCreated = DateTime.Today.AddDays(-num % 5 - j);
child1.Price = num * 100 + Convert.ToDouble(num + i + j) / 100;
child1.Title = String.Format("Item {0}.{1}", num, i + j);
child.RelatedItems.Add(child1);
}
item.RelatedItems.Add(child);
}
result.Add(item);
}
return result;
}
}
2 Answers, 1 is accepted
Rank 1
I appreciate if you can provide some solution to the above problem. it is urgent for us.
Thanks in advance.
Regards
Giri.
I am not sure whether I understand your needs correctly. What is the correct Hierarchical order and how do you wish data be organized? I modified your project to use telerik:HierarchicalDataTemplates instead of DataTemplates when needed, ObservableCollections instead of IList<> and ItemTemplateSelectors. Please examine it and let me know if they helped you or not.
All the best,
Petar Mladenov
the Telerik team