Alternating row color - what methods to override?

4 posts, 0 answers
  1. lyndon
    lyndon avatar
    9 posts
    Member since:
    May 2014

    Posted 02 Jul 2018 Link to this post

    I'm looking to set the color of an alternating row but I'm having a hard time finding a property or method to latch on to.

    I'm unable to find a method to override to find the rowID of the current cell, which will allow me to then determine if the row is even or odd, and set the color. The Xamarin forms Listview has the SetupContent method to override, but the Telerik listview does not expose this method. What method should be used instead?

    Also, please feel free to give a recommendation if another method is preferred for your product. 

  2.
  3. Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1168 posts

    Posted 02 Jul 2018 Link to this post

    Hi Lyndon,

    The RadListView doesn't have an alternate row style property (like a DataGrid does), see the RadListView Styling article for available item styling options.

    However, you can still accomplish this by taking one of two commonly used approaches:

    - Use the RadListView ItemTemplateSelector 
    - ValueConverter for BackgroundColor

    Since you have an ID property to determine if the data item is even/odd, you can use this value to return the appropriate DataTemplate or Color.

    Examples

    TemplateSelector

    public class CustomItemTemplateSelector : DataTemplateSelector
    {
        public DataTemplate RowTemplate { get; set; }
        public DataTemplate AlternateRowTemplate { get; set; }
     
        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            var myItem = item as MyDataItem;
     
            if (myItem.rowID % 2 == 0)
            {
                return RowTemplate;
            }
     
            return AlternateRowTemplate;
        }
    }

    <telerikDataControls:RadListView.ItemTemplateSelector>
        <local:CustomItemTemplateSelector>
            <local:CustomItemTemplateSelector.RowTemplate>
                <DataTemplate>
                    <telerikListView:ListViewTemplateCell>
                        <Grid BackgroundColor="LightGray">
                        </Grid>
                    </telerikListView:ListViewTemplateCell>
                </DataTemplate>
            </local:CustomItemTemplateSelector.RowTemplate>
            <local:CustomItemTemplateSelector.AlternateRowTemplate>
                <DataTemplate>
                    <telerikListView:ListViewTemplateCell>
                        <Grid BackgroundColor="Gray">
                        </Grid>
                    </telerikListView:ListViewTemplateCell>
                </DataTemplate>
            </local:CustomItemTemplateSelector.AlternateRowTemplate>
        </local:CustomItemTemplateSelector>
    </telerikDataControls:RadListView.ItemTemplateSelector>


    ValueConverter

    class RowBackgroundColorConverter : IValueConverter
    {
        public Convert(object value...)
        {
            var rowID = value as int;
            return rowID % 2 == 0 ? Color.LightGray : Color.Gray;
        }
    }

    <ResourceDictionary>
        <converters:RowBackgroundColorConverter x:Key="RowBackgroundColorConverter" />
    </ResourceDictionary>

    <telerikDataControls:RadListView.ItemTemplate>
        <DataTemplate>
             <telerikListView:ListViewTemplateCell>
                 <Grid BackgroundColor="{Binding rowID, Converter={StaticResource RowBackgroundColorConverter}">
                 </Grid>
             </telerikListView:ListViewTemplateCell>
         </DataTemplate>
    </telerikDataControls:RadListView.ItemTemplate>


    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
  5. lyndon
    lyndon avatar
    9 posts
    Member since:
    May 2014

    Posted 02 Jul 2018 in reply to Lance | Manager Technical Support Link to this post

    Thanks Lance. Is there a way to consolidate the process of finding the rowID via a value converter? This is my preferred method, since I dont yet have a way of finding the rowID for Teleriks listview (I can do it for a regular listview) My itemtemplates are fairly "verbose", which is why Id like this route vs templateSelectors (which will duplicate some of my itemtemplate code.

     

    What i've got so far is this...

     
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var eventArgs = value as Telerik.XamarinForms.DataControls.ListView.ListViewTemplateCell;
        var index = eventArgs.GetIndex<>() //This doesn't work as its internal, but something like this to get the index of the object would be great
        if(index % 2 == 0) return Color.White;
        else return Color.Gray;
    }
  7. Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1168 posts

    Posted 02 Jul 2018 Link to this post

    Hi Lyndon,

    I recommend putting an ID on the data model itself. A short (aka int16) property takes up little memory, then you can just do the following to assign the index

    For example:

    public class Product : MyDataItem
    {
            public short MyItemIndex { get; set; }
    ...
    }


    for (int i = 0; i < MyItemsSource.Count -1; i++)
    {
        MyItemsSource[i].MyItemIndexProperty = i;
    }

    Then in your converter you can use MyItemIndexProperty.

    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
Back to Top