Item Template in SFPicker

[Ruud]

I have a list of objects and I want to show two property values in 1 column of an SFPicker control. I understand DisplayMemberPath, but that only allows for 1 object property value to be displayed. Is that a correct assumption?

I'm now trying to use an Item Template in the same way I use it in a listview, but for the picker I cannot get it to work.

Please see the code below. If I remove the item template and add the DisplayMemberPath to the column it works fine.

[Indumathi Ravichandran]

Hi Ruud,

Regarding your inquiry, we would like to clarify that our current implementation of the picker's ItemsSource is displayed based on the DisplayMemberPath property. As a result, we can only display the items source based on a single property. However, we would like to bring to your attention that our system does offer support for multiple column items.

To address your specific requirement, we recommend utilizing this support for achieving the desired outcome. For detailed guidance on how to implement this feature, please refer to our User Guide available at the following link.

UG link:

https://help.syncfusion.com/maui/picker/populating-items#multi-column-items

I kindly request that you explore the multi-columns support provided and revert to us with feedback on its effectiveness in meeting your requirement.

Should you have any further questions or need additional assistance, please do not hesitate to reach out. We are always happy to assist you.

Regards,

Indumathi R

[Ruud]

Hello and thank you for your detailed reply.

Is it possible to have the two columns act as one? Meaning that if scrolling, both columns scroll and keep the object properties allligned?

I can't find how to do that in the documentation.

Ruud

[Indumathi Ravichandran]

Hi Ruud,

As per the last update, while the current functionality of displaying the Picker's ItemsSource based on the DisplayMemberPath property , your specific requirement of presenting two property values within a single column can be realized through the utilization of converters.

We have prepared a prototype sample to demonstrate this functionality, which you can access via the attached link. Additionally, below is a snippet of the code illustrating the implementation:

Code snippet:

<Grid>

    <Grid.Resources>

        <local:DataTModelConverter x:Key="converter"/>

        <DataTemplate x:Key="customView">

            <StackLayout BackgroundColor="Yellow">

                <Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="Red" Text="{Binding Data, Converter={StaticResource converter}}"/>

            </StackLayout>

        </DataTemplate>

    </Grid.Resources>

    <picker:SfPicker x:Name="Picker" ItemTemplate="{StaticResource customView}">

        <picker:SfPicker.Columns>

            <picker:PickerColumn ItemsSource="{Binding MyCars}" DisplayMemberPath="Name"/>

        </picker:SfPicker.Columns>

    </picker:SfPicker>

</Grid>

 

 

public class CarData {

    public List<Car> MyCars;

    public CarData()

    {

        MyCars = new List<Car>();

        MyCars.Add(new Car { Name = "Car", Brand = "Toyota", Color = Colors.Red });

        MyCars.Add(new Car { Name = "Car1", Brand = "Honda", Color = Colors.Red });

        MyCars.Add(new Car { Name = "Car2", Brand = "BMW", Color = Colors.Red });

        MyCars.Add(new Car { Name = "Car3", Brand = "Audi", Color = Colors.Red });

        MyCars.Add(new Car { Name = "Car4", Brand = "Ferrari", Color = Colors.Red });

        MyCars.Add(new Car { Name = "Car5", Brand = "Ford", Color = Colors.Red });

        MyCars.Add(new Car { Name = "Car6", Brand = "Kia", Color = Colors.Red });

        MyCars.Add(new Car { Name = "Car7", Brand = "Nissan", Color = Colors.Red });

        MyCars.Add(new Car { Name = "Car8", Brand = "Audi", Color = Colors.Red });

 

    }

 

}

 

public class DataTModelConverter : IValueConverter

{

    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)

    {

        CarData carData=new CarData();

        if ( value != null)

        {

            for (int i = 0; i < carData.MyCars.Count; i++)

            {

                Car car = carData.MyCars[i];

                if (car!=null&&car.Name!=null&&car.Name==value)

                {

                    return carData.MyCars != null ? carData.MyCars[i].Name + carData.MyCars[i].Brand : null;

                }

            }

        }

        return null;

    }

 

    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)

    {

        throw new NotImplementedException();

    }

}

Scrrenshot:

We hope that this helps you. Please let us know if you need further assistance.

Regards,

Indumathi R

Attachment: PickerTemplate_d0ab354c.zip

[Jonas Follesø]

I am trying to apply the same technique. No matter what I do, the items are not rendered when using the ItemTemplate. If I only use DisplayMememberPath it displays correctly.

In the data template, other components, such as labels with static content, are rendered. And the number of items rendered matches the number of items in the data source.

I have tried binding expressions such as Text="{Binding .}", Text="{Binding Data}", and I have also added a value converter to debug the binding process. The value passed into the value converter is always NULL.

Also, why does not ItemTemplate work as one would expect, i.e. you bind against a list of objects, and inside the template you can bind against any property on the objects in the list you have bound aga

[Jonas Follesø]

I am trying to apply the same technique. No matter what I do, the items are not rendered when using the ItemTemplate. If I only use DisplayMememberPath it displays correctly.

In the data template, other components, such as labels with static content, are rendered. And the number of items rendered matches the number of items in the data source.

I have tried binding expressions such as Text="{Binding .}", Text="{Binding Data}", and I have also added a value converter to debug the binding process. The value passed into the value converter is always NULL.

Also, why does not ItemTemplate work as one would expect, i.e. you bind against a list of objects, and inside the template you can bind against any property on the objects in the list you have bound aga

[Tamilarasan Gunasekaran]

Hi Jonas,

Based on our review, we would like to inform you that it is possible to retrieve a value in the converter based on another value. For example, you can retrieve Code values based on Name values. To prevent the value converter from receiving null values, we recommend using the DisplayMemberPath property to ensure items are rendered correctly, as per the last update.

If you continue to experience any issues, please share your sample or code snippets. This will help us investigate the problem further and provide an appropriate solution.

Regards,
Tamilarasan G.