Tile View NormalHeight property?

19 posts, 1 answers
  1. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 28 Jun 2011 Link to this post

    I am using your TileView as a dashboard, however dashboards rarely have equally sized panels when in the normal position. Would it be impossible to add the property "Normalheight" (as oppsoed to MinimizedHeight) which would apply to the tile size when in the normal state?
    Something like in the attached
  2. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 28 Jun 2011 Link to this post

    Or this as I understand row spans arent possible (see attached).

    I also understand this would make re-ordering hard, but it could re-order per column and just push down if needed?
  3. DevCraft banner
  4. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 29 Jun 2011 Link to this post

    Hello Murray,
    The RadTileView supports this features from the Q2 2011 Beta so could you please read this blog post and if you have more questions feel free to ask.

    Kind regards,
    Zarko
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 29 Jun 2011 Link to this post

    It's like magic! I ask and "poof!" it appears!

    Thank you so much for the hard work and quick response!

    So as a wish list, would it be possible to let users resize the tiles (drag handles) in the normal state view?
  6. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 29 Jun 2011 Link to this post

    Hello Murray,
    I'm sorry but I'm not sure if I understand what you're asking, so could you please try to explain it with some more details? I've also created a sample project that looks like the two images you send us so could you examine it and see if this is what you're looking for?

    Kind regards,
    Zarko
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 29 Jun 2011 Link to this post

    Thank you for the sample and response. i have attached a mockup video of what I mean with user resizing,

    http://muzman.net/telerik/Telerik%20Resize%20Example.zip
  8. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 29 Jun 2011 Link to this post

    An alternative (though less intuitive) would be to wrap the tiles in split containers?
  9. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 30 Jun 2011 Link to this post

    Hello Murray,
    Unfortunately at the moment the RadTileView doesn't support this behavior. You can track and vote for this feature here. You can try to set some GridSplitters and change the size of the RadTileViewItems with them.
    If you have more questions feel free to ask.

    Regards,
    Zarko
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 30 Jun 2011 Link to this post

    That's what I thought. Thanks Zarko!
  11. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 18 Jul 2011 Link to this post

    I am trying to have 5x tiles and I want the first tile to be the full height, with the other 4x tiles filing up the space to the right (see attached image)

    Here is my code:
    <telerik:RadTileView Margin="0"
            ColumnsCount="3"
            ColumnWidth="Auto"     
            RowHeight="Auto"
            PreservePositionWhenMaximized="True"
            IsItemsSizeInPercentages="True">
                <telerik:RadTileViewItem Header="RadTileViewItem1" RestoredWidth="33" RestoredHeight="100"/>
                <telerik:RadTileViewItem Header="RadTileViewItem2" RestoredHeight="50" RestoredWidth="33"/>
                <telerik:RadTileViewItem Header="RadTileViewItem3" RestoredHeight="50" RestoredWidth="33"/>
                <telerik:RadTileViewItem Header="RadTileViewItem4" RestoredHeight="50" RestoredWidth="33"/>
                <telerik:RadTileViewItem Header="RadTileViewItem5" RestoredHeight="50" RestoredWidth="33"/>
            </telerik:RadTileView>

    What am I doing wrong?

    Also, the following code in your sample crashes my app:
    telerik:TileViewPanel.IsSizeBoundToPosition="True"
                                 telerik:TileViewPanel.IsRowsShrinkEnabled="True"
                                 telerik:TileViewPanel.IsColumnsShrinkEnabled="True"

  12. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010
  13. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 19 Jul 2011 Link to this post

    Hello Murray,
    From the sample project I can see that you've downloaded the latest dlls and I guess that you don't have problems with
    telerik:TileViewPanel.IsColumnsShrinkEnabled="True"
    telerik:TileViewPanel.IsRowsShrinkEnabled="True"
    telerik:TileViewPanel.IsSizeBoundToPosition="True">
    any more?
    Unfortunately there's no straight forward way to achieve this layout without some hacks - the problem is that the RadTileView can't have different number of tiles in the different rows. As a workaround you can create an "invisible" item (with RestoredHeight = 0.1) like this:
    <telerik:RadTileViewItem Header="RadTileViewItem1"
                                 RestoredHeight="100"
                                 RestoredWidth="33" />
    <telerik:RadTileViewItem Header="RadTileViewItem2"
                                 RestoredHeight="50"
                                 RestoredWidth="33" />
    <telerik:RadTileViewItem Header="RadTileViewItem3"
                                 RestoredHeight="50"
                                 RestoredWidth="33" />
    <telerik:RadTileViewItem Header="HidenItem"
                                 RestoredHeight="0.1"
                                 RestoredWidth="33" />
    <telerik:RadTileViewItem Header="RadTileViewItem4"
                                 RestoredHeight="50"
                                 RestoredWidth="33" />
    <telerik:RadTileViewItem Header="RadTileViewItem5"
                                 RestoredHeight="50"
                                 RestoredWidth="33" />
    If you have more questions please feel free to ask.

    Best wishes,
    Zarko
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  14. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 19 Jul 2011 Link to this post

    Thank you Zarko! That worked fine for now. Any thoughts on variable size with a rowspan or column span option?
  15. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 19 Jul 2011 Link to this post

    One more problem. How do I hide the "hiden" tiles when in the small state?
  16. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 20 Jul 2011 Link to this post

    Hello Murray,
    We've considered the RowsSpan/ColumnsSpan option but if we try to implement it now it will be a breaking change and we really don't want to do that, so we'll stick with this workaround for now.
    Could you explain us what exactly do you mean by "the "hiden" tiles when in the small state"? If you want to hide an item in the RadTileView you can set the Visibility propery of the RadTileViewItem to Collapsed.
    If you need further assistance feel free to ask.

    All the best,
    Zarko
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  17. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 20 Jul 2011 Link to this post

    The method you gave me gives the restored height to 0.1 which effectively hides the tile from view and corrects the layout (restored.png). However when I maximize one of the tiles, the "hidden" tile shows in its small state.(small.png)

    I need a way to collapse the tile when it is in the small state.

    See attachments
  18. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 20 Jul 2011 Link to this post

    I tried this behavior which works to collapse the tile, but I cant find a trigger to make the tile visible again once it is collapsed.
    <telerik:RadTileViewItem x:Name="Hide" Header="HidenItem"
                                 RestoredHeight="20"
                                 RestoredWidth="33" Background="Red">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="TileStateChanged" SourceName="radTileView" SourceObject="{Binding ElementName=radTileView}">
                            <i:Interaction.Behaviors>
                                <ei:ConditionBehavior>
                                    <ei:ConditionalExpression>
                                        <ei:ComparisonCondition LeftOperand="{Binding TileState, ElementName=Hide}" RightOperand="Minimized"/>
                                    </ei:ConditionalExpression>
                                </ei:ConditionBehavior>
                            </i:Interaction.Behaviors>
                            <ei:ChangePropertyAction PropertyName="Visibility">
                                <ei:ChangePropertyAction.Value>
                                    <Visibility>Collapsed</Visibility>
                                </ei:ChangePropertyAction.Value>
                            </ei:ChangePropertyAction>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </telerik:RadTileViewItem>

  19. Answer
    Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 22 Jul 2011 Link to this post

    Hi Murray,
    The problem with your approach is that the TileStateChanged event is not fired for collapsed items. There are two ways to hide the item when minimized:
    - You can set its MinimizeHeight to 1
    - You can handle the PreviewTileStateChange and do something like this there:
    private void myTileView_PreviewTileStateChanged(object sender, PreviewTileStateChangedEventArgs e)
    {
    var container = e.OriginalSource as RadTileViewItem;
    if (container != null)
    {
    int indexOfHidenItem = 3;
    var hiddenContainers = this.myTileView.ItemContainerGenerator.ContainerFromIndex(indexOfHidenItem) as RadTileViewItem;
    if(container.TileState == TileViewItemState.Maximized)
    {
    hiddenContainers.Visibility = System.Windows.Visibility.Collapsed;
    }
    if (container.TileState == TileViewItemState.Restored)
    {
    hiddenContainers.Visibility = System.Windows.Visibility.Visible;
    }
    }
    }
    I can advise you to use the MinimizedHeight.
    If you have further questions feel free to ask.


    Greetings,
    Zarko
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  20. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 22 Jul 2011 Link to this post

    Perfect! I tried the minimizedheight as 0 which didnt work, but 1 works fine!

    thanks again Zarko!
Back to Top
DevCraft banner