Binding SfNumericUpDown to LeftSwipe in SfListView

[Matthew Bailey]

Hello,

Here's the background details of my application. I have an order entry application and my directive has been to add a method of ordering items displayed in a list format. For the list I'm using SfListView and I would like to incorporate the Left/Right Swipe Template to display a NumericUpDown to add the selected item and a particular quantity unique to each item in the list.

Currently it appears that the LeftSwipe I have added to my SfListView shows the same value in the SfNumericUpDown no matter which item I swipe left on.

Is there a way to bind the NumericUpDown in a LeftSwipe to particular List item?

[Divya Venkatesan]

Hi Matthew, 

 

Greetings from Syncfusion. 

 

We have prepared a sample based on your requirement to bind NumericUpDown in a LeftSwipe to particular list item as shown in the below code snippets. 

 

Code snippets [Xaml]: 

 

<listView:SfListView AllowSwiping="True" ItemSize="50" ItemsSource="{Binding OrderedItems}" ItemSpacing="0,0,0,2"> 

    <listView:SfListView.LeftSwipeTemplate> 

        <DataTemplate> 

            <numericUpDown:SfNumericUpDown MaximumDecimalDigits="0" Value="{Binding Quantity}"/> 

        </DataTemplate> 

    </listView:SfListView.LeftSwipeTemplate> 

 

    <listView:SfListView.ItemTemplate> 

        <DataTemplate> 

            <StackLayout Spacing="2" BackgroundColor="#F2F2F2" Padding="2,0"> 

                <Label Text="{Binding Name, StringFormat='Item: {0}'}" VerticalOptions="Center" VerticalTextAlignment="Center" /> 

                <Label Text="{Binding Quantity, StringFormat='Quantity: {0}'}" VerticalOptions="Center" VerticalTextAlignment="Center" /> 

            </StackLayout> 

        </DataTemplate> 

    </listView:SfListView.ItemTemplate> 

</listView:SfListView> 

 

Output: 

 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Numericupdown-1765314360.zip  

 

Please let us know if you have any queries. 

 

Regards, 

Divya Venkatesan