Hello,
I'm using the webdropdown object to display a list of items. Below is the configuration of my WebDropDown :
<ig:WebDropDown EnableClosingDropDownOnSelect="false" EnableClosingDropDownOnBlur="false" ID="wddSchema" runat="server" Width="620px" DropDownContainerHeight="620px" DropDownContainerWidth="620px" EnableAnimations="False" AutoSelectOnMatch="false" EnableCustomValues="false" EnableCustomValueSelection="false" ValueField="IdClassification" TextField="Rubrique" EnableAutoCompleteFirstMatch="false" KeepFocusOnSelection="true" EnableViewState="true" Height="647px" Font-Size="11px"> <AutoPostBackFlags SelectionChanged="On" ValueChanged="Off" /> <Button Visible="false" /> <DropDownItemBinding TextField="Rubrique" ValueField="IdClassification"></DropDownItemBinding> <ClientEvents Initialize="openDropDown"/> <ClientEvents /> </ig:WebDropDown>
When I select an item, a postback is generated, and the WebDropDown is reloaded. I need the WebDropDown to scrollback to the selected item after clicking on it. As of now, if I select an item in the bottom of that control, on reload it will display the top of the webdropdown.
I've tried some javascript and maybe find a specifc option on the control but I can't seem to make it work.
Using v14.2
Thank you.
Hello Technical,
Thank you for using our community.
As I understand, you would like to see the selected item when the WebDropDown container is opened. Please let me know, if I understand the issue correctly.
The issue with the reloading page that was mentioned is an expected behavior as you are using postback events. If you set those to false, the page won't reload. Please let me know how do you want to use those event and provide me more details about your scenario, so I can be of a better support.
As attached file you will find a simple sample using the configuration that you sent us. I have updated it. Please take a look at it and feel free to modify it if necessary so that we can be on the same page regarding this issue.
I'll be waiting for your answer.
Regards,
Aneta Gicheva,
Infragistics
Hello Aneta,
I see that you have changed the automatic postback option for the selection changed event. I actually need it to work on the backend.
After the postback is done, is there a way to call scrolltop on the webdropdown? Like use it to target the <div> containing the itemss after the initialize event of the control?
Our control doesn’t support the functionality that you required but after some investigation I found a work around. What you can do to achieve this functionality is to handle DropDownOpened event:
<ClientEvents DropDownOpened="WebDropDown1_DropDownOpened" />
And add the following code in it:
function WebDropDown1_DropDownOpened(sender, eventArgs) {
var selectedItem = sender.get_selectedItem(); // get selected item
if (selectedItem != null) {
var itemElement = selectedItem.get_element(); // get item HTML element
itemElement.scrollIntoView(true); // scroll to element
}
I modified the code sample in order to show you the implementation. You could test it on your side and let me know how this suggestion works for you.
Wow thank you very much ! That is exactly the behavior I was trying to recreate. I now feel a bit stupid for not being able to do this myself as it's pretty straightfoward..
Again thank you for your help, I'm very happy to have this little feature on my webdropdown :)
Have a good day !