This is a migrated thread and some comments may be shown as answers.

TextSearch Position highlighted row at top

6 Answers 55 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Scott Waye
Top achievements
Rank 2
Veteran
Iron
Scott Waye asked on 31 Dec 2019, 01:04 PM
When the combo is open and you press a key, it scrolls to show the first item starting with that letter at the bottom of the list in the scrollviewer.  Typically you want to see that item and other items beginning with that letter, but the other items are off the bottom.  Is it possible to scroll the scrollviewer so that the highlighted row is as near the top of the scrollviewer as possible?

6 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 03 Jan 2020, 09:45 AM

Hello Scott ,

I understand your requirement. I can suggest the following. We can introduce a protected method OnScrollIntoVioew(int itemIndex) that you can use by inheriting from RadComboBox. You can see this implemented in the attached project. It uses custom built dlls and is only for proof of concept purposes. If we receive positive feedback from you on it, we will decide on adding this protected method for the official Release or some of the internal builds after it later this month.

Regards,
Petar Mladenov
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Scott Waye
Top achievements
Rank 2
Veteran
Iron
answered on 10 Jan 2020, 06:40 PM

Thats the idea.  Is there a way to make it work with a virtualised ItemsPanelTemplate?  I.e. to Mainpage.xaml add

 
    <UserControl.Resources>
        <Style x:Key="longComboBoxItemsPanelTemplate" TargetType="local:CustomCombo">
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

 

and change the combo to

<local:CustomCombo x:Name="combo" VerticalAlignment="Center" HorizontalAlignment="Center" Style="{StaticResource longComboBoxItemsPanelTemplate}"/>

 

Add some more lines to the data source:

 

for (int i = 0; i < 10; i++)
{
    strings.Add("a item" + i);
}
for (int i = 0; i < 10; i++)
{
    strings.Add("b item" + i);
}
for (int i = 0; i < 10; i++)
{
    strings.Add("c item" + i);
}
for (int i = 0; i < 10; i++)
{
    strings.Add("d item" + i);
}
for (int i = 0; i < 10; i++)
{
    strings.Add("e item" + i);
}
for (int i = 0; i < 10; i++)
{
    strings.Add("f item" + i);
}
for (int i = 0; i < 10; i++)
{
    strings.Add("g item" + i);
}


Run and press 'd' and it jumps to the end

0
Accepted
Petar Mladenov
Telerik team
answered on 14 Jan 2020, 03:07 PM

Hello Scott,

When using the VirtualizingStackPanel the Filtering feature of the RadComBox is not supported. Also, its highly recommended to set it to false because some unwanted 'scrollings' can happen in the drop down. I managed to achieve your scenario with the following code:

 - set IsFilteringEnabled to False, added custom panel as itemsPanel

<local:CustomCombo x:Name="combo" VerticalAlignment="Center" IsFilteringEnabled="False" HorizontalAlignment="Center">
            <local:CustomCombo.ItemsPanel>
                <ItemsPanelTemplate>
                    <local:CustomVirtualizingStack />
                </ItemsPanelTemplate>
            </local:CustomCombo.ItemsPanel>
        </local:CustomCombo>

- in CustomCombo class its is essential to get the stack panel and invoke a bring function

    public class CustomCombo : RadComboBox
    {
        private ScrollViewer scroller;
        private CustomVirtualizingStack stackPanel;
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            this.scroller = GetTemplateChild("PART_ScrollViewer") as ScrollViewer;      
        }

        protected override void OnScrollIntoView(int itemIndex)
        {
            if (this.stackPanel == null)
            {
                this.stackPanel = (this.scroller.Content as ItemsPresenter).ChildrenOfType<CustomVirtualizingStack>().FirstOrDefault();
            }

            if (this.stackPanel != null)
            { 
                this.stackPanel.BringIndex(itemIndex);               
            }
        }
    }

- the idea behind the custom bring function and the inheritance is to allow access to the protected method ScrollToVerticalOffset.
It was also very strange that it accepts a parameter which acts like index, although the method indicates that it uses vertical offset.

public class CustomVirtualizingStack : VirtualizingStackPanel
    {
        public void BringIndex(int index)
        {
            this.ScrollOwner.ScrollToVerticalOffset(index);
        }
    }

Please let me know if the suggested code applies well at your side.

Regards,
Petar Mladenov
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Scott Waye
Top achievements
Rank 2
Veteran
Iron
answered on 14 Jan 2020, 04:08 PM
Thanks, that's very good and works perfectly.
0
Petar Mladenov
Telerik team
answered on 15 Jan 2020, 08:26 AM

Hi Scott,

Glad that the solution works for you. So to summarize, we will need to add the protected method OnScrollIntoView for some of our next internal builds and ServicePack. The official version R1 2020 will be released later today and won't include this method. I hope this plan is suitable for your project.

Regards,
Petar Mladenov
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Petar Mladenov
Telerik team
answered on 17 Jan 2020, 08:15 AM

Hello Scott,

The protected OnScrollIntoView method will be available in the next internal build (next week).

Regards,
Petar Mladenov
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ComboBox
Asked by
Scott Waye
Top achievements
Rank 2
Veteran
Iron
Answers by
Petar Mladenov
Telerik team
Scott Waye
Top achievements
Rank 2
Veteran
Iron
Share this question
or