Grouping Header format

3 posts, 1 answers
  1. Julian
    Julian avatar
    17 posts
    Member since:
    Aug 2015

    Posted 12 Jul Link to this post

    Hey guys, 

    I am currently implementing a grouping in my Listview. The data is getting grouped by a Datetimevalue.

    I can sort the Listview by using this Datetime but then I get the long Datetimevalue inside the header I tryed using stringformat and a valueconverter but without any effect.

    Is there a way to modify the output in the groupingheader?

    Best regards

    Julian

  2. Answer
    Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    362 posts

    Posted 14 Jul Link to this post

    Hello Julian,

    You can create a custom GroupHeaderTemplate with a Label to display the text.

    <telerikDataControls:RadListView.GroupHeaderTemplate>
        <DataTemplate>
            <Grid>
                <Label Text="{Binding }" />
            </Grid>
        </DataTemplate>
    </telerikDataControls:RadListView.GroupHeaderTemplate>


    Now that you have you have access to the Label UIElement that renders the text, you can alter the bound text any way you see fit. One option is to use a value converter to get the exact string format you want.


    Demo

    I've written a demo for you, find it attached. Here's a high level look at the relevant parts of the demo:

    We convert the value to a string when it's bound to the header text, so you'll need to parse it back into a DateTime object, then return the newly formatted string. 

    Here's a converter using the "g" DateTime string format:

    class GroupHeaderDisplayFormatConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            // the bound header text is a string
            var headerText = value as string;
     
            // get the valid DateTime object (dont use this in production, instead use a TryParse)
            var parsedDateTime = DateTime.Parse(headerText);
     
            // Return the formatted string using your preferred DataTime string format
            return parsedDateTime.ToString("g");
        }
     
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }


    Now, in your XAML, use the converter on Label's binding:

    <ContentPage.Resources>
        <ResourceDictionary>
            <converters:GroupHeaderDisplayFormatConverter x:Key="DisplayFormatConverter"/>
        </ResourceDictionary>
    </ContentPage.Resources>
     
    ...

    <telerikDataControls:RadListView.GroupHeaderTemplate>
        <DataTemplate>
            <Grid BackgroundColor="#C1C1C1">
                <Label Text="{Binding Converter={StaticResource DisplayFormatConverter}}"  />
            </Grid>
        </DataTemplate>
    </telerikDataControls:RadListView.GroupHeaderTemplate>


    Here's a screenshot of the result at run-time:





    Wrapping Up

    If this is what you were looking for, you can let me know by clicking the ticket's "Mark as resolved" button. If you need further assistance, please let me know.


    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
  3. Julian
    Julian avatar
    17 posts
    Member since:
    Aug 2015

    Posted 25 Jul in reply to Lance | Tech Support Engineer, Sr. Link to this post

    Thanks for your support!

    This was exactly what I was looking for!

    Best regards

    Julian

Back to Top