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

Need a control like expander that also supports items NOT in a group

6 Answers 590 Views

General Discussion

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

Mike asked on 21 Jan 2019, 04:17 AM

Hi all,

So in our UWP app we are using Expander to show groups of tagged documents (e.g: "White paper", "Tech Spec" etc) but we also have some document that do not have a tag. The requirement is that on loading the groups (titled from the tag) are shown at the top followed by the untagged documents. This way the user can expand/collapse the groups (and select documents) as normal but they can also select a document that is untagged... so it would look something like this:

White Paper
– White Paper 1.pdf
– White Paper 2.pdf
Tech Spec
– Tech Spec 1.doc
– Tech Spec 2.doc
DocumentWithNoGroup1.pdf
DocumentWithNoGroup2.doc

We do not want an "Untagged" group to force the untagged ones in to a group - we need the untagged ones to sit underneath the grouped ones. (Sorry, but this is what the customer wants and the customer is always right!)

I am fairly new to Expander (and all the Telerik controls for that matter) but endless reading and googling has not shown any way to do this. I've also looked at usng RadDataGrid but we do not want the user to do dragging of group names etc. I tried to do it manually using RadDataGrid by adding a Visibliity and/or RowHeight property to the object in my model used for binding but RadDataGrid does not appear to offer any way to hide rows or even just making the height 0. I will also look at ListView (and the normal UWP one) but does anyone know how I can achieve the above?

Cheers,

Mike

6 Answers, 1 is accepted

answered on 22 Jan 2019, 09:33 PM

ExpanderWithExternalItems.zip

Hi Mike,

Thank you for the clear explanation of the scenario. The Expander alone cannot meet the requirements because you either use an Expander for some items or you don't. As you alluded to, you can place the items that do not belong in the Expander underneath the Expanders.

For example, take a look at this code sample. Because the immediate parent of the Expanders and single items is a StackPanel, they all get stacked together.

<Page x:Class="ExpanderWithExternalItems.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:ExpanderWithExternalItems"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:primitives="using:Telerik.UI.Xaml.Controls.Primitives"

mc:Ignorable="d"

RequestedTheme="Light"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid>

<StackPanel Background="WhiteSmoke"

Padding="10"

Spacing="10"

HorizontalAlignment="Center"

VerticalAlignment="Center">

<primitives:RadExpanderControl Content="White Paper" IsExpanded="True">

<primitives:RadExpanderControl.ExpandableContent>

<StackPanel Margin="10,0,0,0">

<TextBlock Text="- White Paper 1.pdf" />

<TextBlock Text="- White Paper 2.pdf" />

</StackPanel>

</primitives:RadExpanderControl.ExpandableContent>

</primitives:RadExpanderControl>

<primitives:RadExpanderControl Content="Tech Spec" IsExpanded="True">

<primitives:RadExpanderControl.ExpandableContent>

<StackPanel Margin="10,0,0,0">

<TextBlock Text="- Tech Spec 1.docx" />

<TextBlock Text="- Tech Spec 2.docx" />

</StackPanel>

</primitives:RadExpanderControl.ExpandableContent>

</primitives:RadExpanderControl>

<TextBlock Text="DocumentWithNoGroup 1.pdf" />

<TextBlock Text="DocumentWithNoGroup 2.pdf" />

</StackPanel>

</Grid>

</Page>

Here's a screenshot of that code at runtime:

Note that the UIElements I chose to display the text are TextBlocks. If you need these items to be clickable, you could change them to Buttons with transparent Border/Background and set Button.Content to the document name.

ItemsControl

Now, if these items are in a collection of some kind, it's a totally different story, You would need a property to denote if they belong to a particular group, then that property can be used with something like an ItemsControl (ListView is probably best) and use a DataTemplateSelector.

With a TemplateSelector, you can have one DataTemplate that uses an Expander for the bound item that shows the group title, and another DataTemplate that lists all the items in a nested ListView

Note that you're going to need to be able to find a way to distinguish "untagged" items into a Group with LINQ in order to get the data to work right. However, this will be visualized like they're not grouped, giving your client the final result they want!

To demonstrate this, here's an example I put together (this what I have in the attached project).

Let's start with the code:

<Page x:Class="ExpanderWithExternalItems.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:ExpanderWithExternalItems"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:primitives="using:Telerik.UI.Xaml.Controls.Primitives"

xmlns:data="using:Telerik.UI.Xaml.Controls.Data"

mc:Ignorable="d"

RequestedTheme="Light"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Page.Resources>

<DataTemplate x:Key="DocumentTemplate">

<StackPanel Orientation="Horizontal"

RequestedTheme="Light">

<TextBlock Text="-" />

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

</StackPanel>

</DataTemplate>

<DataTemplate x:Key="ExpanderTemplate">

<primitives:RadExpanderControl IsExpanded="True" >

<primitives:RadExpanderControl.Content>

<TextBlock Text="{Binding GroupTitle}"

FontWeight="Bold" />

</primitives:RadExpanderControl.Content>

<primitives:RadExpanderControl.ExpandableContent>

<data:RadListView ItemsSource="{Binding Documents}"

ItemTemplate="{StaticResource DocumentTemplate}"

SelectionMode="None"/>

</primitives:RadExpanderControl.ExpandableContent>

</primitives:RadExpanderControl>

</DataTemplate>

<DataTemplate x:Key="ListViewTemplate">

<data:RadListView ItemsSource="{Binding Documents}"

ItemTemplate="{StaticResource DocumentTemplate}"

SelectionMode="None"/>

</DataTemplate>

<!-- TemplateSelector to choose between a single ListView for all the loose items OR a RadExpander for items with a group title -->

<local:MyTemplateSelector x:Key="MyTemplateSelector"

ExpanderTemplate="{StaticResource ExpanderTemplate}"

NormalTemplate="{StaticResource ListViewTemplate}" />

</Page.Resources>

<Page.DataContext>

<local:ViewModel />

</Page.DataContext>

<Grid>

<data:RadListView ItemsSource="{Binding DocumentGroups}"

ItemTemplateSelector="{StaticResource MyTemplateSelector}"

SelectionMode="None"/>

</Grid>

</Page>

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.Linq;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using CommonHelpers.Common;

namespace ExpanderWithExternalItems

{

public sealed partial class MainPage : Page

{

public MainPage()

{

InitializeComponent();

}

public class ViewModel : ViewModelBase

{

public ViewModel()

{

// original data

var docs = new List<MyDocument>

{

new MyDocument { DocumentName = "White Paper 1.pdf", DocumentGroup = "White Paper"},

new MyDocument { DocumentName = "White Paper 2.pdf", DocumentGroup = "White Paper"},

new MyDocument { DocumentName = "Tech Spec 1.doc", DocumentGroup = "Tech Spec"},

new MyDocument { DocumentName = "Tech Spec 2.doc", DocumentGroup = "Tech Spec"},

new MyDocument { DocumentName = "DocumentWithNoGroup1.pdf"},

new MyDocument { DocumentName = "DocumentWithNoGroup2.doc"},

};

// Group by the property that will be the RadExpander title (NOTE: loose items will have a convenient NULL GroupTitle)

DocumentGroups = new ObservableCollection<DocumentGroup>(docs.GroupBy(d => d.DocumentGroup).Select(grouping => new DocumentGroup

{

GroupTitle = grouping.Key,

Documents = new List<MyDocument>(grouping)

}));

}

public ObservableCollection<DocumentGroup> DocumentGroups { get; set; }

}

public class MyTemplateSelector : DataTemplateSelector

{

public DataTemplate NormalTemplate { get; set; }

public DataTemplate ExpanderTemplate { get; set; }

protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)

{

if (item is DocumentGroup docGroup)

{

// In the group title is null, we don't use a RadExpander

if (string.IsNullOrEmpty(docGroup.GroupTitle))

{

return NormalTemplate;

}

else

{

// If there is a valid group title, use the DataTemplate that has the Expander

return ExpanderTemplate;

}

return base.SelectTemplateCore(item, container);

}

// A holder class so you can enumerate the documents in groups

public class DocumentGroup

{

public string GroupTitle { get; set; }

public List<MyDocument> Documents { get; set; }

}

// original entity

public class MyDocument : BindableBase

{

public string DocumentName { get; set; }

// Set this to null or empty if it's a loose item

public string DocumentGroup { get; set; }

}

Here's a visual representation to show what the XAML renders:

Important Note: There are some additional considerations, like visual state and item selection because of multiple, separate, RadListViews. You might want to disable selection and use an in-template button for selection.

I hope this answers your question and points you in the right direction.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

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 Feedback Portal and vote to affect the priority of the items

answered on 23 Jan 2019, 10:21 PM

Hi Lance,

Between this answer and the last one I posted I think is some of the best product support I've ever experienced - I am under very intense deadline pressure so I truly appreciate your very detailed reply.

I have to be honest and admit to being very new to DataTemplate selectors (my background is more WPF where I never used them - not even sure if they were available) but I can see how perfect these are for doing things like rendering content based on different logic cases so this is definately the time to start using them.

I'll give this a go and let you know if I have any issues but thanks so much again for your excellent support :-)

answered on 26 Jan 2019, 11:56 PM

radgridselectedrow.png

Hi Lance,

I ended up going a completely different way with this as I was struggling to get the Expander to work the way we need it to and to get it formatted as per our requirements (see image). In the end I went with a RadDataGrid with different templates for header items (groups), tagged (grouped items) and untagged items and did it the old school way of having a master collection of data (which I will get from our API) and adding/removing items to a collection used for display when a header group is expanded or collapsed.

I've posted the code below (I would have posted a solution but I can only attach images) and it should run fine as is if you create a standard UWP app.

However, I was wondering if you could take a look at it and help me out with last issue I have which is why the row selection looks so awful (again, see the image) - given I have a margin around the entire RadGrid I don't understand why the selected row style seems to go off the control at the left. What I really want is to just have a very light grey background with no border when the user selects an actual item (document), and no selection style at all when opening or closing a group or folder (this is because we will have proper folder icons for closed and open) - but I don't even know where to start achieving these two selection styles so I was hoping you could help me out with this.

Many thanks again,

Mike

XAML

=====

CODE BEHIND

=============

using System;
using System.Collections.Generic;
using System.Linq;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using CommonHelpers.Common;
using Telerik.UI.Xaml.Controls.Grid;
using System.Collections.ObjectModel;

namespace TelerikRadGridBoardFileViewer
{
    public sealed partial class MainPage : Page
    {
        ViewModel vm;

        public MainPage()
        {
            this.InitializeComponent();

            vm = (ViewModel)this.DataContext;
        }

        private async void grdFilesList_OnSelectionChanged(object sender, DataGridSelectionChangedEventArgs e)
        {
            // NOTE: DataGrid is in single selection mode. If you're using multiple selection, you need to iterate over e.AddedItems.
            if (e?.AddedItems?.FirstOrDefault() is Document selectedItem)
            {
                if (selectedItem.IsHeader)
                {
                    //Header clicked so add/remove items depending on whether it is expanded or collapsed.
                    selectedItem.IsExpanded = !selectedItem.IsExpanded;
                    vm.UpdateSubItemsForHeader(selectedItem);
                }
                else
                {
                    //Normal document - select to view
                    await new MessageDialog($"You selected {selectedItem.Title}", "Selection!").ShowAsync();
                }
            }
        }

        private void asbSearchFiles_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
        {
            //Once search is done show results set which we get from the VM method SearchData().

            //TODO: While searching the cancel button needs to be enabled and if clicked search should stop.
            //TODO: If nothing is found show dialog with heading "Search failed" and text "No items contain the search criteria"

            if (string.IsNullOrEmpty(args.QueryText))
                return;

            btnSearchCancel.IsEnabled = true;

            int results = vm.SearchData(args.QueryText);
            btnSearchCancel.IsEnabled = results > 0;
            btnSearchCancel.Content = results > 0 ? "Done" : "Cancel";

        }

        private void btnSearchCancel_Click(object sender, RoutedEventArgs e)
        {
            if (btnSearchCancel.Content.ToString() == "Done")
            {
                btnSearchCancel.Content = "Cancel";
                btnSearchCancel.IsEnabled = false;
                vm.SetDefaultData();
            }
        }

        private void BtnReset_Click(object sender, RoutedEventArgs e)
        {
            vm = (ViewModel)this.DataContext;
        }
    }

    public class ItemIconSelector : DataTemplateSelector
    {
        public DataTemplate HeaderIconTemplate { get; set; }
        public DataTemplate TaggedIconTemplate { get; set; }
        public DataTemplate UntaggedIconTemplate { get; set; }

        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            Document _item = item as Document;
            if (_item.IsHeader)
                return HeaderIconTemplate;
            else if (_item.Tag != null)
                return TaggedIconTemplate;
            else
                return UntaggedIconTemplate;
        }
    }

    public class ViewModel : BindableBase
    {
        private List<Document> AllData { get; set; }

        private ObservableCollection<Document> _displayData;
        public ObservableCollection<Document> DisplayData
        {
            get => _displayData;
            set => SetProperty(ref _displayData, value);
        }

        public bool IsSearchActive { get; set; }

        public ViewModel()
        {
            //This data will come from our API
            AllData = new List<Document>()
            {
                new Document { IsHeader = true, Title = "Policy" },
                new Document { Title = "Board Tenure Policy", Tag = "Policy", LastUpdated = DateTime.Now.AddDays(-10) },
                new Document { Title = "Employee Bonus Policy", Tag = "Policy", LastUpdated = DateTime.Now.AddDays(-20) },
                new Document { IsHeader = true, Title = "Strategy" },
                new Document { Title = "Board Strategy Guidelines", Tag = "Strategy", LastUpdated = DateTime.Now.AddDays(-100) },
                new Document { Title = "Board charter 2019", LastUpdated = DateTime.Now },
                new Document { Title = "Secretariat Policy", LastUpdated = DateTime.Now.AddDays(-17) },
            };

            SetDefaultData();
        }

        public void SetDefaultData()
        {
            //Reset search item flag
            foreach (var file in AllData)
                file.IsSearchItem = false;

            //For the initial data take all items where there is no tag - this should only include headers and untagged items.
            DisplayData = new ObservableCollection<Document>(AllData.Where(x => string.IsNullOrEmpty(x.Tag)));
        }

        public void UpdateSubItemsForHeader(Document doc)
        {
            if (doc.IsHeader)
            {
                List<Document> subItems = null;

                //Find item in existing DisplayData collection so we can add items after it when header is expanded.
                int n = DisplayData.IndexOf(doc);

                //Find the subitems for the supplied header item...
                subItems = AllData.Where(x => x.Tag == doc.Title).ToList();

                //User has expanded a folder
                if (doc.IsExpanded)
                {
                    //Now add or delete the subitem to the displayed data depending on the header state (expanded or not)
                    foreach (Document d in subItems.OrderByDescending(x => x.Title))
                        DisplayData.Insert(n + 1, d);
                }
                else
                {
                    // User has collapsed the folder so remove all sub-items from the display data.
                    foreach (Document d in subItems)
                        DisplayData.Remove(d);
                }
            }
        }

        //Leave queryText null to reset the data to the original file list.
        public int SearchData(string queryText = null)
        {
            //In the actual app this will search the documents but for now just search the title.
            if (!string.IsNullOrEmpty(queryText))
            {
                DisplayData = new ObservableCollection<Document>(AllData.Where(x => !x.IsHeader && x.Title.ToLower().Contains(queryText.ToLower())));

                //This is an awful hack but we need to flag each item in the search results so we can return
                //a uniform margin in the results... need to work out a more elegant way to do this!
                foreach (var file in DisplayData)
                    file.IsSearchItem = true;
            }
            else
                SetDefaultData();

            return DisplayData.Count();
        }
    }

    public class Document : BindableBase
    {
        private string _title;
        private string _tag;

        private bool _isHeader;
        private bool _isExpanded;
        private bool _isSearchResult;

        public int _margin;

        public string Position { get; set; }

        public string Title
        {
            get => _title;
            set => SetProperty(ref _title, value);
        }

        public string Tag
        {
            get => _tag;
            set => SetProperty(ref _tag, value);
        }

        public bool IsHeader
        {
            get => _isHeader;
            set => SetProperty(ref _isHeader, value);
        }

        public bool IsExpanded
        {
            get => _isExpanded;
            set => SetProperty(ref _isExpanded, value);
        }

        public bool IsSearchItem
        {
            get => _isSearchResult;
            set => SetProperty(ref _isSearchResult, value);
        }

        public DateTime LastUpdated { get; set; }

        public string LastUpdatedDisplay
        {
            get => LastUpdated == DateTime.MinValue ? "" : LastUpdated.ToString("dd MMM yyyy");
        }

        public Thickness IndentAmount
        {
            get
            {
                //For searched items or untagged files set margin to 3 else set to 20 (must be a tagged item)
                int indent = IsSearchItem || string.IsNullOrEmpty(Tag) ? 3 : 20;
                return new Thickness(indent, 3, 3, 3);
            }
        }

    }
}

answered on 28 Jan 2019, 03:10 PM

Hello Mike,

Thank you for the thorough description. So that we can keep different topics separated, could you please re-post this in the DataGrid forums? This not only allows us to assign the right engineer to assist (every control has its own specialists), but also will be a resource for anyone in the future who has a similar problem.

Each control has it's own forum topic area, here's the link to the DataGrid forums https://www.telerik.com/forums/ui-for-universal-windows-platform/datagrid

I will use the code below to begin the investigation, and will respond to the new thread when I've finished. Thank you for your understanding in this matter.

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Need a control like expander that also supports items NOT in a group

6 Answers, 1 is accepted