TileView layout help

[spj11]

We would like to have a TileView where the layout has to be something like in the attached document. Is this possible?

[Tina Stancheva]

Hi Surya,

I can't find the attachment. Can you attach it again? Thanks in advance.

All the best,
Tina Stancheva
the Telerik team

[spj11]

I converted the doc to png and attached again.

[spj11]

Any help?

[Tina Stancheva]

Hello Surya,

Yes I believe you can use the RadTileView control to implement your requirements.

The first layout can be implemented by maximizing one RadTileViewItem - thus the item will be stretched to fit all available area, while the other items will be automatically minimized. And you can control the Height and Width of the minimized items through the RadTileView.MinimizedRowHeight and MinimizedColumnWidth properties.

You can implement the second layout by setting the  MaxHeight of the maximized RadTileViewItems to equals the ActualHeight/Height of the RadTileView.

The third layout can be implemented by leaving all RadTileViewItems in restored state. Then you can set the ColumnWidth property to define a hard-coded value as their Width and set the RowHeight property to * in order to allow the items to take all available space.

You can examine this demo as it demonstrates how to control the size of the RadTileViewItems.

I hope this information will help you, but If you encounter any issues while implementing your scenario, please let us know so that we can assist you with resolving them.

All the best,
Tina Stancheva
the Telerik team

[spj11]

Appreciate your response. Now, the three layouts that I kind of spelled out are part of the same experience, and hence was wondering if this would be possible.

For example, based on user selection, bar chart in T1 might have lot of the data (lets say n bars) and hence will need to expand as much as possible, even if it means having a height beyond the minimized tiles.

In same way, based on user selection, bar chart in T1 might have lot less data (couple of bars) and this time we would like the expanded tile to not take the whole height that the minimized tiles are dictating, but just take enough to render those couple of bars.

Does this make sense?

[spj11]

Any help?

[Zarko]

Hi Surya,
I'd like to ask you a couple more questions:
- what exactly do you mean with "expand as much as possible"? Do you want it to be higher than the viewport, because if you put it a scrollviewer the tileView can as high as you want ?
- do you want the minimized items to always have the same height ?
I've attached a sample project which shows one way to change the size of the Maximized item (there are 4 TileItems - two norma (green), one large (blue) and one small (coral)) so could you please examine it and see if this is what you're looking for?
We're looking forward to hearing from you.

All the best,
Zarko
the Telerik team

[spj11]

The attached example was helpful, but I am wondering if this can be done dynamically. Like for example, I dont know ahead of time which is the small chart and the large chart or a normal chart. User is filtering some data and all tiles are displaying charts. Based on the filter selections, the tile which had a large chart could now have very few data items and hence I would want the height to be a smaller number and vice versa.

[Zarko]

Hi Surya,
If you want to dynamically calculate the sizes you'll have to change the code a little bit so that it takes into account the current state of the maximized item.
I've updated the sample project and now you can select each tileViewItem's type runtime so could you please examine it and if you have more questions feel free to ask.

Kind regards,
Zarko
the Telerik team

[spj11]

So I was able to use your example to some extent and dynamically expand height. It seemed to work in most cases, but now I am running into two diff issues specifically with chart rendering and was wondering if this had to do  dynamic height. Attached are the two screenshots:

Issue 1: At some point radchart stops putting labels on the x-axis except for the last few bars
Issue 2: At some point radchart stops putting out numbers as labels on the x-axis and I know we don't have numbers as datapoint

 

[spj11]

Here is what you can do to repro the bug (I have modified your program to repro is successfully but I am unable to upload it):Let me know if you need any more info.

MainViewModel.cs:

private List<DataPoint> chartData;

public MainViewModel()
{
            this.items = new ObservableCollection<MyItem>();
            this.items.Add(new MyItem() {Header = "Normal item"});
            this.items.Add(new MyItem() {Header = "LARGE chart item"});
            this.items.Add(new MyItem() {Header = "Normal item"});
            this.items.Add(new MyItem() {Header = "Normal item"});

            int dataPoints = 1500;//switch to 1300 to not repro the bug
            chartData = new List<DataPoint>(dataPoints);
            for (int i = 0; i < dataPoints; i++ )
            {
                chartData.Add(new DataPoint { Name = "item " + i.ToString(), Count = i + 1});
            }
        }

        public ObservableCollection<MyItem> Items
        {
            get { return this.items; }
        }

        public List<DataPoint> Data
        {
            get { return chartData; }
        }

MainPage.xaml (Update one of the tileview items) :

<telerik:RadTileViewItem x:Name="item2"
                             Header="Item 2"
                             Tag="{Binding ElementName=secondItem,
                                           Path=SelectedIndex}">
                    <telerik:RadChart Grid.Row="0"
                                  BorderThickness="0" VerticalAlignment="Top"
                                ItemsSource="{Binding Path=Data}"
                                >
                        <telerik:RadChart.SamplingSettings>
                            <telerik:SamplingSettings SamplingThreshold="0" />
                        </telerik:RadChart.SamplingSettings>
                        <telerik:RadChart.SeriesMappings>
                            <telerik:SeriesMapping>
                                <telerik:SeriesMapping.SeriesDefinition>
                                    <telerik:HorizontalBarSeriesDefinition ShowItemLabels="False"
                                                          ShowItemToolTips="True"
                                                          ItemToolTipFormat="#XCAT : #Y">
                                    </telerik:HorizontalBarSeriesDefinition>

                                </telerik:SeriesMapping.SeriesDefinition>
                                <telerik:SeriesMapping.ItemMappings>
                                    <telerik:ItemMapping DataPointMember="XCategory" FieldName="Name"></telerik:ItemMapping>
                                    <telerik:ItemMapping DataPointMember="YValue" FieldName="Count"></telerik:ItemMapping>
                                </telerik:SeriesMapping.ItemMappings>
                            </telerik:SeriesMapping>
                        </telerik:RadChart.SeriesMappings>
                        <telerik:RadChart.DefaultView>
                            <telerik:ChartDefaultView>
                                <telerik:ChartDefaultView.ChartArea >
                                    <telerik:ChartArea EnableAnimations="False">
                                        <telerik:ChartArea.AxisY>
                                            <telerik:AxisY DefaultLabelFormat="{Binding YFormat}">
                                            </telerik:AxisY>
                                        </telerik:ChartArea.AxisY>
                                    </telerik:ChartArea>
                                </telerik:ChartDefaultView.ChartArea>
                                <telerik:ChartDefaultView.ChartLegend>
                                    <telerik:ChartLegend Visibility="Collapsed" />
                                </telerik:ChartDefaultView.ChartLegend>
                            </telerik:ChartDefaultView>
                        </telerik:RadChart.DefaultView>
                    </telerik:RadChart>
                </telerik:RadTileViewItem>

MainPage.xaml.cs (Update the method OnMaximizedItemChanged):

private void OnMaximizedItemChanged(RadTileViewItem container)
  {
   switch ((int)container.Tag)
   {
    case 0:
     this.ClearTileViewValues();
     container.Height = 400;
     break;
    case 1:
     this.ClearTileViewValues();
     container.ClearValue(FrameworkElement.HeightProperty);
     break;
    case 2:
                    this.myTileView.MinimizedRowHeight = new GridLength(this.scrolViewer.ViewportHeight / (this.myTileView.Items.Count - 1));

                    if(container.Content.GetType().Equals(typeof(RadChart)))
                    {
                        int totalCount = (this.DataContext as MainViewModel).Data.Count;

                        this.myTileView.Height = 1200 + 10*totalCount;
                    }
                    else
                    {
                        this.myTileView.Height = 2000;   
                    }
          
     this.scrolViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Auto;
     break;
   }
  }

Add a class Datapoint.cs

public

 

 

class DataPoint

{

 

 

public string Name { get; set; }

 

 

 

public double Count { get; set; }

}

[spj11]

Also disable sampling in my earlier example and make item 2 as large and you will see the other bug where it now has numbers on the labels (starting from 0) as opposed to the real labels.

[Nikolay]

Hi Surya,

The issue with the chart labels is caused by a limitation of the number of categories to be plotted, which is 1400. Generally in cases when you would need more categories another type of chart would likely be more suitable, for example a Line/Spline one. In case it is necessary to use horizontal bars, we would suggest that you change the name property to a double/int, instead of string and bind it to XValue, instead of XCategory.

Another alternative for such a scenario would be to use our DataBar control, which is specifically designed to display such data.

Hope this helps.

Greetings,
Nikolay
the Telerik team

[spj11]

Is the 1400 limit documented? Why is that the labels are shown only for the last two (1398, 1399), this seems more like a bug. 
Also what about the other issue where the charts start showing numbers as opposed to real labels. Is that a bug?

[Petar Marchev]

Hello Surya,

We do not consider these to be bugs in the control. These are a result of the 1400 categories limitation. However, we will look into this and see if it is possible to remove this limitation.

I will have to agree with Nikolay - consider using a GridView and DataBars, as in the previously provided example. This will undoubtedly improve performance and lead to a better perception of the data. Another option you have is to use the RadChartView control, which does not have such a limitation. Keep in mind that RadChart and RadChartView are different controls and they do not have an equivalent for each feature.

I was not able to achieve the output that you describe as the second issue. If you need further assistance I will ask that you open a new support ticket and let us know more about your current scenario. 

All the best,
Petar Marchev
the Telerik team