RadNumericInput inside a listview does not trigger selecteditem if user clicks on the +/- buttons

[Vivian]

Hi Support,

I have a UWP application with a a listview and inside the listview, I have a viewcell, then a grid with 3 columns. The 1st column is a RadNumericInput, 2nd is a string, 3rd is a comboBox. When I click on the + or - button in the RadNumericInput for a row, the value of the NumericInput updates correctly but the row I am working on is NOT selected in the listview as selectedItem. However if I click on the value box of NumericInput, the row is set as the selecteditem in the listview. Is there a way to add code to trigger the listview to select the row when the +/- button is clicked?

I tried the comboBox and the row is selected properly when I select a value inside the comboBox.

Please advise.

Vivian

 

[Didi]

Hi Vivian,

Thank you for the provided details.

The behavior is expected. It comes from the fact that two different actions are expected on tap/click gesture over the NumericInput - increase/decrease value and at the same time the selection of the ListView to be fired. The same behavior occurs with the Xamarin.Forms ListView control. 

When I open the ComboBox dropdown and select an item from the drop down, there isn't a selection style applied to the current ListView item. Same behavior with the numeric control. You click on the buttons to increase/decrease the numeric value. So I am not sure what can I suggest here to visually indicate the selected item when pressing on the buttons.

You can try to use the Numeric Increase/Decrease Command and change the Background color of the Grid inside the ListView. 

Here is an example with Increase/Decrease commands and an example how the cell background color can be changed using a converter. Inside the increase/ decrease command execute method you can change the IsSelected value, so the converter will change the color if the cell. Still I am not sure whether this approach will help you achieve the exact requirement. 

Regards,
Didi
Progress Telerik

[Vivian]

Hi Didi, 

Thank you for the response but I am trying to set another value (hidden) in the listview when the numericinput value is changed so I need to know exactly which row in the listview is being selected and set the value in code.

I have an event in ValueChanged right now and when the numeric input value is changed by using +/- buttons, the event is fired.

  public void OnValueChanged(object sender, ValueChangedEventArgs v)
        {
            var quantity = (RadNumericInput)sender;

            var grid = (Grid)quantity.Parent;
            var viewCell = (ViewCell)grid.Parent;
            var listView = (ListView)viewCell.Parent;
            var selectedItem = new Item();
            selectedItem = (Item)listView.SelectedItem;

          }

With this code, selectedItem is null when I use the buttons to increase/decrease the value. However, if I click on the value box, selected item is returning fine. I tried to do binding to achieve what I need but that does not seem to work within the listview. Can you provide me with an example if this is the way I should be going? Thanks in advance.

Vivian

[Didi]

Hi Vivian

Could you please send me the page's definition, so I can check the exact setup you have.
From this code  

 var listView = (ListView)viewCell.Parent;

it seems the Xamarin.Forms ListView is used. Is it correct? 

As I explained in my answer, the behavior when tapping on the buttons is expected, the ListView item is not selected, in the Telerik ListView and in the Xamarin.Forms ListView. both ListViews have same behavior. It comes from the fact that two different actions are expected on tap/click gesture over the NumericInput - increase/decrease value and at the same time the selection of the ListView to be fired. And tapping on numeric buttons is with high priority.
Yes, the item is selected when tapping near the numeric input field. 

[Vivian]

Hi Didi,

Here is the listview definition:

<ListView x:Name="listViewAvailItems" Margin="10,0,10,0" Style="{StaticResource listviewStyle}" BackgroundColor="Black" ItemsSource="{Binding AvailableItems}" HeightRequest="140" SelectedItem="{Binding AvailItemSelected}" ItemTapped="OnLVItemTapped">
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <ViewCell>
                                            <Grid Margin="2,2,2,0" BackgroundColor="{StaticResource DarkGreyBackgroundColor}" x:Name="AvailItemsGrid">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="70"/>
                                                    <ColumnDefinition Width="120"/>
                                                    <ColumnDefinition Width="*"/>
                                                </Grid.ColumnDefinitions>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="32"/>
                                                </Grid.RowDefinitions>
                                                <telerikInput:RadNumericInput x:Name="numericBtnText" Grid.Column="0" ValueChanged="OnValueChanged" ControlTemplate="{StaticResource CustomRadNumericInput_ControlTemplate}" Value="{Binding ItemQuantity}" Minimum="0" Maximum="15" IsReadOnly="True"/>
                                                 <Label Grid.Column="1" Text="{Binding ItemName}" Margin="5,0,0,0" FontSize="12" TextColor="white" BackgroundColor="Transparent" WidthRequest="40" VerticalOptions="Center" VerticalTextAlignment="Center"/>
                                                <telerikInput:RadComboBox ItemsSource="{Binding ItemVariations}" DropDownBackgroundColor="White"
                                                              Grid.Column="2" 
                                                              DisplayMemberPath="ItemVariationName"
                                                              IsClearButtonVisible="False"
                                                              TextColor="{StaticResource SilverTextColor}"                        
                                                              SearchTextPath="ItemVariationName"
                                                              SearchMode="Contains"
                                                              FontSize="12"
                                                              SelectionMode="Single"
                                                              HorizontalOptions="FillAndExpand"
                                                              SelectedItem="{Binding VariationSelected, Mode=TwoWay}"
                                                              SelectionChanged="OnVariationSelectionChanged"
                                                              HighlightTextColor="DarkOrange"
                                                              IsDropDownClosedOnSelection="True"
                                                              IsEditable="False">
                                                    <telerikInput:RadComboBox.SelectedItemTemplate>
                                                        <DataTemplate>
                                                            <StackLayout BackgroundColor="White">
                                                                <Label Text="{Binding ItemVariationName}" Style="{StaticResource labelStyle}" Margin="5,5,0,5" TextColor="Black" />
                                                            </StackLayout>
                                                        </DataTemplate>
                                                    </telerikInput:RadComboBox.SelectedItemTemplate>
                                                </telerikInput:RadComboBox>
                                            </Grid>
                                        </ViewCell>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>

This is the control template for the numericinput:

<ControlTemplate x:Key="CustomRadNumericInput_ControlTemplate">
                <Grid ColumnSpacing="2" HeightRequest="32" MinimumHeightRequest="33">
                    <Grid.Resources>
                        <ResourceDictionary>
                            <Style TargetType="numericInput:NumericInputButton" Class="DefaultNumericInputButtonStyle">
                                <Setter Property="BorderRadius">
                                    <Setter.Value>
                                        <OnPlatform x:TypeArguments="x:Int32">
                                            <On Platform="iOS" Value="10"/>
                                            <On Platform="UWP" Value="0"/>
                                        </OnPlatform>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="BorderColor" Value="Orange"/>
                                <Setter Property="TextColor" Value="White"/>
                                <Setter Property="BackgroundColor" Value="Orange"/>
                                <Setter Property="BorderThickness" Value="2"/>
                                <Setter Property="VerticalContentAlignment" Value="Center"/>
                                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                                <Setter Property="Padding" Value="0,0,0,0"/>
                            </Style>
                            <Style TargetType="numericInput:NumericInputEntry" Class="DefaultNumericInputEntryStyle">
                                <Setter Property="HorizontalTextAlignment" Value="Start"/>
                                <Setter Property="VerticalTextAlignment" Value="Center"/>
                                <Setter Property="Padding" Value="10,0,0,0"/>
                                <Setter Property="Keyboard" Value="Numeric"/>
                                <Setter Property="TextColor" Value="Orange"/>
                                <Setter Property="BorderStyle">
                                    <Setter.Value>
                                        <telerikInput:BorderStyle BorderColor="Transparent">
                                            <telerikInput:BorderStyle.BorderThickness>
                                                <OnPlatform x:TypeArguments="Thickness" Default="0">
                                                    <On Platform="Android" Value="0,0,0,0"/>
                                                    <On Platform="iOS" Value="0"/>
                                                    <On Platform="UWP" Value="0"/>
                                                </OnPlatform>
                                            </telerikInput:BorderStyle.BorderThickness>
                                        </telerikInput:BorderStyle>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </ResourceDictionary>
                    </Grid.Resources>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="20"/>
                        <ColumnDefinition Width="30"/>
                        <ColumnDefinition Width="20"/>
                    </Grid.ColumnDefinitions>
                    <numericInput:NumericInputButton Text="{TemplateBinding DecreaseButtonText}"
                              Command="{TemplateBinding DecreaseCommand}"
                              StyleClass="DefaultNumericInputButtonStyle"
                              common:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                              AutomationId="NumericDecreaseButton">
                        <AutomationProperties.HelpText>
                            <OnPlatform x:TypeArguments="x:String">
                                <On Platform="UWP" Value="NumericDecreaseButton"/>
                                <On Platform="iOS" Value="NumericDecreaseButton"/>
                            </OnPlatform>
                        </AutomationProperties.HelpText>
                    </numericInput:NumericInputButton>

                    <numericInput:NumericInputEntry Grid.Column="1"
                             x:Name="PART_Entry"
                             StyleClass="DefaultNumericInputEntryStyle"
                             Text="{TemplateBinding Value, Mode=OneWay}"
                             InputTransparent="{TemplateBinding IsReadOnly}"
                             common:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                             AutomationId="NumericEntry"/>

                    <numericInput:NumericInputButton Grid.Column="2"
                              Text="{TemplateBinding IncreaseButtonText}"
                              Command="{TemplateBinding IncreaseCommand}"
                              StyleClass="DefaultNumericInputButtonStyle"
                              common:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                              AutomationId="NumericIncreaseButton">
                        <AutomationProperties.HelpText>
                            <OnPlatform x:TypeArguments="x:String">
                                <On Platform="iOS" Value="NumericIncreaseButton"/>
                                <On Platform="UWP" Value="NumericIncreaseButton"/>
                            </OnPlatform>
                        </AutomationProperties.HelpText>
                    </numericInput:NumericInputButton>
                </Grid>
            </ControlTemplate>

Look forward to your response. Thanks in advance.

Vivian

 

[Didi]

Thank you for the provided code. 

I couldn't find a solution for this ListView behavior. I have searched on internet for possible solutions but I couldn't find any. The behavior here is that the click event on the button is with high priority than the ListView tap event. If you replace the NumericInput with Button, same behavior occurs. Also if you add Entry control, same behavior, the focused event is with high priority than the ListView ItemTap.