Load DataSource when the DropDown icon is triggered

[Alexandre Vaz]

Hi,

I have a form with some comboBox and I want to load the DataSource at run time when necessary.

The user clicks on the DropDownIcon, then opens the DropDownView with some ActivityIndicator and, when the DataSource is finished, it stops the Activity Indicator and shows the list.

After that, when the user scrolls down the list and shows the LOAD MORE button, I want to trigger this event to get more items on the server and not just open hidden items.

Is there any solution for that?

Thanks!

[Suganya Sethuraman]

Hi Alexandre,

Greetings from Syncfusion.

We have analyzed your requirement. We have achieved your requirement by using the DropDownFooterView of SfComboBox as the following code snippet,

Code snippet: 

        <combobox:SfComboBox 

            x:Name="PropiedadesCualFue" 

            BorderColor="Green" 

            ComboBoxMode="Suggest" 

            DataSource="{Binding Clientes, Mode=TwoWay}" 

            DisplayMemberPath="ClienteNombre" 

            DropDownFooterViewHeight="{Binding DropDownFooterViewHeight, Mode=TwoWay}" 

            DropDownItemHeight="30" 

            IsDropDownOpen="{Binding IsDropDownOpen, Mode=TwoWay}" 

            SelectedValue="{Binding SelectedValue, Mode=TwoWay}" 

            SelectedValuePath="ClienteID" 

            ShowSuggestionsOnFocus="True" 

            SuggestionMode="Contains" 

            Watermark="Search property" 

            WatermarkColor="Green"> 

            <combobox:SfComboBox.DropDownFooterView> 

                <Grid 

                    BackgroundColor="#f0f0f0" 

                    HeightRequest="60" 

                    VerticalOptions="StartAndExpand"> 

                    <busyindicator:SfBusyIndicator 

                        x:Name="busyindicator" 

                        AnimationType="SlicedCircle" 

                        IsBusy="{Binding IsBusy, Mode=TwoWay}" 

                        TextColor="Maroon" 

                        VerticalOptions="Start" 

                        ViewBoxHeight="40" 

                        ViewBoxWidth="40" /> 

                    <Button 

                        HeightRequest="50" 

                        Clicked="Button_Clicked" 

                        IsVisible="{Binding IsVisible, Mode=TwoWay}" 

                        Text="Load More" /> 

                </Grid> 

            </combobox:SfComboBox.DropDownFooterView> 

        </combobox:SfComboBox> 

Please have the sample for your reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/JSONList_Combo-2127798248

Please check the sample if it meets your requirements and let us know if you have any concerns.

Regards,
Suganya Sethuraman. 

[Alexandre Vaz]

So, the sample you sent I can't see anything, just a blank page.

What I achieved with this was DropDownFooterView, but the "Load More" button is always visible when it should only appear at the bottom of the list, not at the bottom of DropDown.

The ComboBox has the LoadMoreText and MaximumSuggestion properties, but where is the LoadMore event? What happens when I click this button? It doesn't make sense when I have MaximumSuggestion as 20, but I still have a list of 10,000 items.

And DropDown only opens if DataSource already has an item, otherwise, it does nothing, so the DropDownOpen event is actually DropDownOpened, it only hits when it is already open.

Any suggestions for my problem?

Best regards!

[Suganya Sethuraman]

Hi Alexandre,

Sorry for the inconvenience.

Query 1: “The user clicks on the DropDownIcon, then opens the DropDownView with some ActivityIndicator and, when the DataSource is finished, it stops the Activity Indicator and shows the list”

We were able to reproduce the issue “DropDownOpened event is not called when DataSource is null in Android and iOS” and we confirm this as a bug and logged a defect report. You can keep track of the bug from the feedback portal below.

Link: https://www.syncfusion.com/feedback/19452

The provided feedback link is private, and you need to login to view this feedback.

The fix for the reported issue will be available on 18^th November, 2020.

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.

Query 2: “when the user scrolls down the list and shows the LOAD MORE button, I want to trigger this event to get more items on the server and not just open hidden items”

Currently, we don’t have direct support for this. So, we have considered this as a feature and logged this as a feature request, and you can track the status of this feature implement through below link,

Feedback link: https://www.syncfusion.com/feedback/8652/need-a-new-event-for-loadmore-button-click

Please cast your vote to make it count. We will prioritize the features every release based on the demands and we do not have an immediate plan to implement this feature since we committed with already planned work. So, this feature will be available in any of our upcoming releases.

If you have any more specifications/suggestions to the feature request, you can add it as a comment in the portal.

 

Regards,
Suganya Sethuraman. 

[Suganya Sethuraman]

Hi Alexandre,

Sorry for the inconvenience.

Query 1: “The user clicks on the DropDownIcon, then opens the DropDownView with some ActivityIndicator and, when the DataSource is finished, it stops the Activity Indicator and shows the list”

We have prepared the sample using the View of DropDownButtonSettings. We have used image as drop-down view. We have achieved your requirement using TapGestureRecognizer of Image as below code snippet,

 

<combobox:SfComboBox 

            x:Name="comboBox" 

            DisplayMemberPath="Name" 

            DropDownFooterViewHeight="60" 

            HeightRequest="40" 

            NoResultsFoundText="No Results Found"> 

    <combobox:SfComboBox.DropDownButtonSettings> 

        <combobox:DropDownButtonSettings> 

            <combobox:DropDownButtonSettings.View> 

                <Image HeightRequest="25" Source="down.png"> 

                    <Image.GestureRecognizers> 

                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" /> 

                    </Image.GestureRecognizers> 

                </Image> 

            </combobox:DropDownButtonSettings.View> 

        </combobox:DropDownButtonSettings> 

    </combobox:SfComboBox.DropDownButtonSettings> 

    <combobox:SfComboBox.DropDownFooterView> 

        <Grid 

                    BackgroundColor="#f0f0f0" 

                    HeightRequest="60" 

                    VerticalOptions="StartAndExpand"> 

            <busyindicator:SfBusyIndicator 

                        x:Name="busyindicator" 

                        AnimationType="SlicedCircle" 

                        TextColor="Maroon" 

                        VerticalOptions="Start" 

                        ViewBoxHeight="40" 

                        ViewBoxWidth="40" /> 

        </Grid> 

    </combobox:SfComboBox.DropDownFooterView> 

</combobox:SfComboBox> 

Please have a sample for your reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBoxBusy248466497

Please let us know if you have any concerns.

Regards,
Suganya Sethuraman.