SfDropdownList Virtualization issue

[MS]

Hi,

Using sample from https://blazor.syncfusion.com/documentation/dropdown-list/virtualization

With exception of changing the ID field from string type to long​ breaks virtualization and the dropdown starts flickering as it tries to load all the items until it's done. (see attachment)

I think it's trying to find the item with the current value in the list.

Issue is current value is 0 by default, the list comes from the database and there are no items with ID = 0.

Also the bound value field is not nullable so it has to remain 0 until an item is selected.

Is there an option where DropdownList treats 0 as null and does not try to look it up in the list?

Thanks.

Attachment: SyncfusionDropDownListFlickering_ed10005.zip

[Sureshkumar P]

Hi MiVision,

We suggest you update the value when ID is 0 like the below code to resolve the issue.

Find the code example here:

<SfDropDownList TValue="long" Value="@Value" TItem="Record" Placeholder="Select an item" DataSource="@Records" Query="@LocalDataQuery" PopupHeight="130px" EnableVirtualization="true">

    <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>

</SfDropDownList>

 

@code

{

    public long Value { get; set; }

    public Query LocalDataQuery = new Query().Take(6);

    public class Record

    {

        public long ID { get; set; }

        public string Text { get; set; }

    }

    public List<Record> Records { get; set; }

    protected override void OnInitialized()

    {

        this.Records = Enumerable.Range(0, 150).Select(i => new Record()

            {

                ID = i,

                Text = i==0? null: "Item " + i,

            }).ToList();

    }

}

Regards,

Sureshkumar P

[MS]

Hi,

Perhaps I didn't explain well, the data comes from a databases, there is never an item with ID zero.

And maybe to emulate that,  Enumerable.Range(0, 150) needs to be changed to  Enumerable.Range(1, 150)

So the solution above is not going to work.

Kind regards,

[Sureshkumar P]

Hi MiVision,

We have validated the reported requirement. In our component rendering with non-nullable long as TValue as without initialized any preselected value set as null value to the value property. There is no need to set the external null values to the default value of the component.

Find the sample in the attachment:

And we have already logged the popup flickering issue in our component. and this fix will be included in our upcoming weekly patch release, which is expected to be rolled out on August 16th, 2022.

You can track the status of this issue from the below feedback.

Feedback: https://www.syncfusion.com/feedback/36786

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization

Regards,

Sureshkumar P

Attachment: DDLServer_eea166d2.zip

[MS]

Hi  Sureshkumar,

I think that issue is unrelated, In my case the popup does not flicker.

Using the provided sample, you can see loading circle on the dropdown button flickering as is it's loading all the data.

It seems like it's trying to find the item with Id 0, which does not exist, so it loads all the data, which defeats the purpose of the Virtualization.

Kind regards,

[Deepak Ramakrishnan]

Hi MiVision,

Sorry for the inconvenience caused .

DropdownList component will make request if initially value bounded to it . In your usecase , value didn’t binded but the TValue type is non nullable , Due to that, it assigns default to the component value and makes request , But we can understand your concern that loading all the data even though Virtualization is enabled is an odd behavior . So we will check for feasibility to fix the issue and update you within one business day (August 12 ,2022) . In the mean time we suggest you to use the ‘nullable long’ type to the component , hence value not initially binded to the component via @bind-value  ,Also it will not accept the custom values (which is not present in datasource) instead null will be set
to it .

[Index.razor]

@using Syncfusion.Blazor.Data

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Inputs

@using System.ComponentModel

@using System.Runtime.CompilerServices

@using Syncfusion.Blazor.Popups

 

<PageTitle>Index</PageTitle>

 

<SfDropDownList TValue="long?" Value="@Value" TItem="Record" Placeholder="Select an item" DataSource="@Records" Query="@LocalDataQuery" PopupHeight="130px" EnableVirtualization="true">

    <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>

</SfDropDownList>

 

@code

{

    public long? Value { get; set; }

    public Query LocalDataQuery = new Query().Take(6);

    public class Record

    {

        public long ID { get; set; }

        public string Text { get; set; }

    }

    public List<Record> Records { get; set; }

    protected override void OnInitialized()

    {

        this.Records = Enumerable.Range(1, 150).Select(i => new Record()

            {

                ID = i,

                Text = "Item " + i,

            }).ToList();

    }

}

Sample Link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionDropDownListFlickering-372322203.zip

Thanks,

Deepak R.

[MS]

Hi,

Setting TValue to set to nullable long may work in the scenario above.

But it won't work where Value is bound to a property of another model.

For example:

@using Syncfusion.Blazor.Data

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Inputs

@using System.ComponentModel

@using System.Runtime.CompilerServices

@using Syncfusion.Blazor.Popups

 

<PageTitle>Index</PageTitle>

 

<SfDropDownList TValue="long?" Value="@SomeClassInstance.SelectedID" TItem="Record" Placeholder="Select an item" DataSource="@Records" Query="@LocalDataQuery" PopupHeight="130px" EnableVirtualization="true">

    <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>

</SfDropDownList>

 

@code

{

    public SomeClass SomeClassInstance { get; set; }

    public Query LocalDataQuery = new Query().Take(6);

    public class Record

    {

        public long ID { get; set; }

        public string Text { get; set; }

    }

    public class SomeClass

    {

        public long SelectedID { get; set; } //<- this cannot be nullable

    }

    public List<Record> Records { get; set; }

    protected override void OnInitialized()

    {

        this.Records = Enumerable.Range(1, 150).Select(i => new Record()

            {

                ID = i,

                Text = "Item " + i,

            }).ToList();

    }

}

[Mohanraj Mathaiyan]

Hi MiVision,

We have considered the reported issue as a bug from our end and will be fixed in our August 31^st patch release. You can track the status of the issue by the below feedback link.

Feedback Link : https://www.syncfusion.com/feedback/37068/virtualization-not-working-properly-when-binded-value-not-present-in-the

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

Regards,

Mohanraj M

[Sureshkumar P]

Hi MiVision,

We are facing complexity to resolve this issue. We will include it in the upcoming weekly patch release.

Which is expected to be rolled out on September 7^th,2022.

Regards,

Sureshkumar P

[MS]

Hi,

Appreciate it, thanks for letting me know.

[Sureshkumar P]

MiVision,

Thanks for your update.

Regards,

Sureshkumar P

[Sureshkumar P]

Hi MiVision,

We have fixed your reported issue from our end in the latest 20.2.48 version. So, we suggest you upgrade to our latest version to resolve the current issue. 

Please find the release notes here: https://blazor.syncfusion.com/documentation/release-notes/20.2.48?type=all#dropdownlist

Regards,  

Sureshkumar P

[MS]

Hi  Sureshkumar,

Thanks for letting me know.

Seems to be working as expected.

Kind regards