1. Home
  2. Forum
  3. WPF
  4. Problem with visual items in ComboBoxAdv being added/removed while scrolling

Problem with visual items in ComboBoxAdv being added/removed while scrolling

We are using a multiselect ComboBoxAdv with many items, let's say 300+. While scrolling the list it seems like items (their visual representation) are dynamically added and removed. We can tell because we're using a template for the items to show individual icons for every item, and as we scroll up and down in the list the images are reloaded. It also has the side-effect that the width of the dropdown list shrinks and grows as you scroll through it, since the width of the items differ a lot. Is there a way to get around this dynamic behavior and have all the items created just once?

Best regards
Marcus

16 Replies 1 reply marked as answer
VR Vijayalakshmi Roopkumar Syncfusion Team August 21, 2020 11:26 AM UTC

Hi Marcus, 
 
Thank you for your update. 
 
We have checked the reported behavior with ComboBoxAdv according to the reported scenario by adding image and loading above 300 items, but however we could not observe flickering of images that represents the images are reloaded and the dropdown width does not changes, even the text length of Combobox item varies on scrolling the items. Please check this with the following video and sample from following location: 
 
 
 
Please check our video and sample, confirm us our replication procedure is same as yours. If not, please confirm us the following things such as: 
 
  1. What type of image you are loading in your application?
  2. Are you customizing any style in your application?
  3. Screenshot or video that shows the issue.
  4. If possible, modify our sample into issue reproducible.
 
Upon your confirmation on requested details, we can able to provide you better solution on this. 
 
Regards, 
Vijayalakshmi VR 


MJ Marcus johansson August 24, 2020 07:26 AM UTC

Hello,

I mentioned images because it was the output from the loading that revealed that the items in the combobox were being added/removed while scrolling. I've modified the example to show how the width of the dropdown list shrinks and grows. It would be a better user experience if the width remained the same while scrolling.

Sorry for jumping to another topic, but I have two other questions regarding the ComboBoxAdv.

Can you change the aligmnent of the checkbox in a multiselect combobox? We center the text and the image, so it looks weird when the checkbox is at top. With other themes, such as Metro and Blend, the checkbox isn't even aligned to the top but instead scaled vertically, which looks extremely strange.

Also, when having many items, using a select all feature freezes the interface for a long time (a second or more). Is there any way of speeding that up? I've added a "Select all" button to your example. We've tried with adding a separate template for the items in the selection box without images (SelectionBoxTemplate), but that didn't make much of a difference.

Best regards
Marcus




Attachment: WpfApp33_modified_7b70cb0b.zip

VR Vijayalakshmi Roopkumar Syncfusion Team August 25, 2020 01:49 PM UTC

Hi Marcus 
 
Thank you for your update. 
 
Please find the response for your queries 
 
S.NO 
Query 
Response 
1. 
I mentioned images because it was the output from the loading that revealed that the items in the combobox were being added/removed while scrolling. I've modified the example to show how the width of the dropdown list shrinks and grows. It would be a better user experience if the width remained the same while scrolling. 
 
We have checked the reported issue with provided sample and we able to observe the shrinking and growing up behavior with comboboxadv. We have forwarded this query to development team to analyze the exact cause We will check and update you the details by 27th Aug, 2020. 
2. 
Can you change the aligmnent of the checkbox in a multiselect combobox? We center the text and the image, so it looks weird when the checkbox is at top. With other themes, such as Metro and Blend, the checkbox isn't even aligned to the top but instead scaled vertically, which looks extremely strange. 
Could you please share the screenshot of your requirement. Also let you know your currently using visual style, so that we can check and proceed on this 
S 
Also, when having many items, using a select all feature freezes the interface for a long time (a second or more). Is there any way of speeding that up? I've added a "Select all" button to your example. We've tried with adding a separate template for the items in the selection box without images (SelectionBoxTemplate), but that didn't make much of a difference. 
We were able to reproduce the reported issue with ComboBoxAdv and we have forwared the query to development team to analyze the exact cause. We will check and update you the details by 27th Aug, 2020. 
 
 
Please let us know if you have any other concerns. 
 
Regards, 
Vijayalakshmi VR 


MJ Marcus johansson August 26, 2020 06:42 AM UTC

Hi,

Thanks for the quick reply!

I've attached screenshots showing the alignment problem using the default skin and metro. Using the default skin, the checkbox is always at the top. With other skins (atleast the ones we've tested) the checkbox is stretched. Being able to control the vertical alignment would be awesome :)


Best regards,
Marcus

Attachment: comboboxadv_checkbox_alignment_80f9dd68.zip

VR Vijayalakshmi Roopkumar Syncfusion Team August 27, 2020 04:03 PM UTC

Hi Marcus, 
 
Thank you for your update. 
 
Please find the response for the following queries 
 
   
S.NO  
Query  
Response  
1.  
I mentioned images because it was the output from the loading that revealed that the items in the combobox were being added/removed while scrolling. I've modified the example to show how the width of the dropdown list shrinks and grows. It would be a better user experience if the width remained the same while scrolling.  
  
We have confirmed the reported issue is a defect and logged a bug report on this. You can track the status of this bug using the following link:  
 
 
We will update patch timeline by tomorrow. 
2.  
I've attached screenshots showing the alignment problem using the default skin and metro. Using the default skin, the checkbox is always at the top. With other skins (atleast the ones we've tested) the checkbox is stretched. Being able to control the vertical alignment would be awesome :) 
Yes, you can able to handle the vertical alignment of CheckBox by overriding the template of ComboBoxItemAdv and change the vertical alignment of name Part_CheckBox. We have prepared a sample for the same and it can be downloaded from following location: 
 
 
Code: [XAML] 
 
 
 
<!--  customizing checkbox  --> 
<CheckBox 
x:Name="PART_CheckBox" 
Margin="1" 
VerticalAlignment="Center" 
IsHitTestVisible="False" 
Visibility="{Binding Path=AllowMultiSelect, Converter={StaticResource VisiblityConverter}, RelativeSource={RelativeSource AncestorType={x:Type syncfusion:ComboBoxAdv}}}" /> 
 
 
 
Similarly you can try with the Metro style and for other styles. 
 
 
 
 
3 
Also, when having many items, using a select all feature freezes the interface for a long time (a second or more). Is there any way of speeding that up? I've added a "Select all" button to your example. We've tried with adding a separate template for the items in the selection box without images (SelectionBoxTemplate), but that didn't make much of a difference.  
We have confirmed the reported behavior as an enhancement .We have considered in Volume 4, 2020.  
 
 
  
  
Please let us know if you have any other concerns.  
  
Regards,  
Vijayalakshmi VR  


MJ Marcus johansson August 28, 2020 08:04 AM UTC

Thanks for the help!

It worked very well with the xaml for the default theme. But the file (MetroStyle.xaml) in the zip for Metro was actually a html-file. Was this intended?


Best regards,
Marcus

VR Vijayalakshmi Roopkumar Syncfusion Team August 31, 2020 06:33 AM UTC

Hi Marcus, 
 
Thank you for your update. 
 
Query #1: Size of dropdown control varies on scrolling the popup of ComboBoxAdv 
 
As already updated, the timeline for this patch is estimated to be available on 11th September 2020. 
 
Query #2: But the file (MetroStyle.xaml) in the zip for Metro was actually a html-file. Was this intended? 
 
Sorry for an inconvenience caused, please find the correct xaml file below: 
 
 
As default theme, edit the element named Part_CheckBox for the vertical alignment requirement using the above metro xaml file, in your application. 
 
Please let us know if you have any other concerns. 
 
Regards, 
Vijayalakshmi VR 


MJ Marcus johansson August 31, 2020 12:27 PM UTC

Hi!

Sorry to bother you again, but I don't seem to be able to download the zip file in your response. Clicking on the link gives me the following page:

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>816ACEFA22EE569C</RequestId>
<HostId>ngxehQnDNaNbIzaC8SGn2IAknQsvG7dHgXBblppxeBIthbP7wzcmQ7hnhI7aa7F5fubNCltvhXU=</HostId>
</Error>



VR Vijayalakshmi Roopkumar Syncfusion Team September 1, 2020 07:54 AM UTC

Hi Marcus, 
 
Sorry for an inconvenience caused. 
 
The link provided in last updated has been removed from our server mistakenly. Now we have resolved it and kindly make use of the Metro theme file using the following link. 
 
 
Please let us know if you have any other concerns on this. 
 
Regards 
Vijayalakshmi VR 


VR Vijayalakshmi Roopkumar Syncfusion Team September 13, 2020 12:29 PM UTC

Hi Marcus, 
 
Thank you for your patience. 
 
As we are facing some complexity in fixing the reported issue "Size of the dropdown control varies on scrolling the popup of ComboBoxAdv", we need some more time to fix the issue. We will fix and provide you the complete details on 17th Sep, 2020. 
 
Meanwhile can you please let us know whether you are using any SfSkinManager themes?. So that we can check and provide you the fix accordingly. 
 
Regards, 
Vijayalakshmi VR 


MJ Marcus johansson September 14, 2020 06:28 AM UTC

Hi,

No problems with the delay :)  We're using the SfSkinManager theme Metro.

Best regards,
Marcus

VR Vijayalakshmi Roopkumar Syncfusion Team September 15, 2020 06:00 AM UTC

Hi Marcus, 
 
Thank you for your update. 
 
As promised, we will provide the fix details for the reported issue with ComboBoxAdv on 17th Sep, 2020. 
 
We appreciate your patience until then. 
 
Regards, 
Vijayalakshmi VR 


VR Vijayalakshmi Roopkumar Syncfusion Team September 17, 2020 01:50 PM UTC

Hi Marcus,    
   
Thanks for your patience.  
  
The reported issue has been fixed with ComboBoxAdv and included in the patch which can be download from the below links.  
   
Recommended approach - exe will perform automatic configuration.   
   
Please find the patch setup from below location:   
   
Patch link :   Please find the patch assemblies alone from below location:   
 
   
Assemblies Link:    
 
Nuget link:     
 
 
  
 
Assembly Version: 18.1.0.42  
   
Installation Directions:   
This patch should replace the files "Syncfusion.Shared.WPF” under the following folder.   
$system drive:\ Files\Syncfusion\Essential Studio\$Version # \precompiledassemblies\$Version#\[TargetFramework]   
Eg : $system drive:\Program Files\Syncfusion\Essential Studio\18.1.0.42\precompiledassemblies\18.1.0.42\\4.6   
   
To automatically run the Assembly Manager, please check the Run assembly manager checkbox option while installing the patch. If this option is unchecked, the patch will replace the assemblies in precompiled assemblies’ folder only. Then, you must manually copy and paste them to the preferred location or you must run the Syncfusion Assembly Manager application (available from the Syncfusion Dashboard, installed as a shortcut in the Application menu) to re-install assemblies.   
   
   
Disclaimer:   
Please note that we have created this patch for version 18.1.0.42 specifically to resolve the issue reported in this incident. If you have received other patches for the same version for other products, please apply all patches in the order received.  Please let us know, if you are using any other Syncfusion version, we will provide patch in your version.   
   
Regards,   
Vijayalakshmi VR 


Marked as answer
MJ Marcus johansson September 18, 2020 08:06 AM UTC

Hi,

Thanks, we really appreciate the hard work you put in to help us with this issue!

The patch you provided, with the horizontal scrollbar, works. But is it possible to force set the visible width of the drop down list? Now it gets the same width as the "button" (that brings down the list), but it would be really neat if the actual list could be given a higher width than that. The best solution would of course be if the width of the drop down list was always the width of the widest item - no matter what part of the list is currently visible.

I'm sorry for being such a pain :)

Best regards,
Marcus

VR Vijayalakshmi Roopkumar Syncfusion Team September 21, 2020 12:14 PM UTC

Hi Marcus

Thank you for your update.

We have consider the newly reported case and consider to fix it in our source level and provide you the patch by 24th Sep, 2020.

Please let us know if you have any other concerns.

Regards,
Vijayalakshmi VR

VR Vijayalakshmi Roopkumar Syncfusion Team September 24, 2020 03:39 PM UTC

Hi Marcus, 
 
Thank you for your patience. 
 
We have analyzed the reported requirement “the width of the drop down list should always be the width of the widest item” in the ComboBoxAdv and noted that our ComboBoxAdv has virtualization support by default. So, we are unable to retrieve the items that are not in the view and set the width of the widest item when the dropdown is opened. However we can still achieve your reported requirement by setting VirtualizingPanel.IsVirtualizing property as False in the ComboBoxAdv. This change will set the width of the widest item to dropdown when it is opened initially.  
 
We have also analyzed the width behavior when virtualization is enabled and fixed by allowing the popup to increase its width based on the items generated while scrolling but width will not be reduced while scrolling to the items having lesser width in the view. It will reset when the dropdown is closed as the items in the view will be generated when the dropdown is again opened when virtualization is enabled. 
 
Code snippet: 
 
 
<syncfusion:ComboBoxAdv x:Name="comboBoxAdv" AllowMultiSelect="True" VirtualizingPanel.IsVirtualizing="False" VerticalAlignment="Top" Height="32" HorizontalAlignment="Center" Width="200" ItemsSource="{Binding PopulationDetails}"> 
    <syncfusion:ComboBoxAdv.ItemTemplate> 
        <DataTemplate> 
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center"> 
                <Image Source="0205_WebInsertHyperlink_32.png" Height="32"/> 
                <TextBlock Text="{Binding Country}"/> 
                <TextBlock Text="{Binding Continent}"/> 
            </StackPanel> 
        </DataTemplate> 
    </syncfusion:ComboBoxAdv.ItemTemplate> 
</syncfusion:ComboBoxAdv> 
 
 
 
Recommended approach - exe will perform automatic configuration.    
    
Please find the patch setup from below location:    
    
Patch link :   Please find the patch assemblies alone from below location:    
  
  
Nuget link:       
  
   
  
Assembly Version: 18.1.0.42   
    
Installation Directions:    
This patch should replace the files "Syncfusion.Shared.WPF” under the following folder.    
$system drive:\ Files\Syncfusion\Essential Studio\$Version # \precompiledassemblies\$Version#\[TargetFramework]    
Eg : $system drive:\Program Files\Syncfusion\Essential Studio\18.1.0.42\precompiledassemblies\18.1.0.42\\4.6    
    
To automatically run the Assembly Manager, please check the Run assembly manager checkbox option while installing the patch. If this option is unchecked, the patch will replace the assemblies in precompiled assemblies’ folder only. Then, you must manually copy and paste them to the preferred location or you must run the Syncfusion Assembly Manager application (available from the Syncfusion Dashboard, installed as a shortcut in the Application menu) to re-install assemblies.    
    
    
Disclaimer:    
Please note that we have created this patch for version 18.1.0.42 specifically to resolve the issue reported in this incident. If you have received other patches for the same version for other products, please apply all patches in the order received.  Please let us know, if you are using any other Syncfusion version, we will provide patch in your version.    
    
Regards,    
Vijayalakshmi VR  


Loader.
Up arrow icon