Combobox not setting text properly with virtualization on when limiting 100 and value is over that

Question

I have a combo box that upon initial load will load 1200 records. I have a query that takes the first 100 so it doesn't load all the records once you click on the combo box. I have virtualization on so that you can scroll to see additional records. I have a filtering function and value changed to verify that it is in the list.There is a datasource that pulls in name and custaccount. The name which I display and the CustAccount as the value. When I first load the page, If the value is under 100, it will properly display the name. If it is over 100, it will not display the name but display the value.. I'm not sure why it does this. I want it to display the name always but i need the value as CustAccount.Also If is select a value that is over 100 , my value changed event gets fired which passes is the value the first time which is fine. but the second time it passes in the name argument and then fails my lookup.. Not sure why value changed gets fired twice.Here is my code and video attached thanks. Query customerQuery { get; set; } = new Query().Take(100);

Name	Account Number

@((context2 as FDICustomer).Name)

@((context2 as FDICustomer).CustAccount)

private void onCustValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs args) { if (args.Value != "" && args.Value != null) { var findCustomer = Customers.Find(x => x.CustAccount == args.Value); if (findCustomer != null) { ChemOrderTable.CustName = findCustomer.Name; } else { ChemOrderTable.CustName = null; ChemOrderTable.CustAccount = null; comboboxCustomer.Value = null; } } } public async Task onFilteringCustAccount(Syncfusion.Blazor.DropDowns.FilteringEventArgs args) { args.PreventDefaultAction = true; var pre = new WhereFilter(); var predicate = new List (); predicate.Add(new WhereFilter() { Condition = "or", Field = "CustAccount", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true }); predicate.Add(new WhereFilter() { Condition = "or", Field = "Name", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true }); pre = WhereFilter.Or(predicate); var query = new Query(); query = args.Text == "" ? new Query().Take(25) : new Query().Where(pre).Take(25); await this.comboboxCustomer.Filter(Customers, query); } public class FDICustomer { public string CustAccount { get; set; } public string Name { get; set; } Attachment: ComboBoxIssue_a01c2846.zip

Sevvandhi Nagulan · Accepted Answer

Hi Chris, 


We considered the reported issue (“Value property not set to the component when enabling virtual scrolling”) as a bug at our end. We will fix the reported issue and include volume 4 release which is expected to be roll out on December 22, 2020. We appreciate your patience until then.   

    
You can track the status of the reported issue from the below feedback link.   


Feedback: https://www.syncfusion.com/feedback/20220/ 


Until then we suggest to use the previously suggested workaround solution. 
    

Regards, 
Sevvandhi N

Sevvandhi Nagulan · Answer

Hi Chris, 


Greetings from Syncfusion support. 


Query 1:    If it is over 100, it will not display the name but display the value.. I'm not sure why it does this. I want it to display the name always but i need the value as CustAccount. 



We would like to inform you that, in the code provided you have loaded the 100 data initially. If you provide the 101th value in the @bind-Value attribute, it will consider it as custom value. Hence value only updated in the component. Because we will update the value property with the corresponding name to the component by comparing the given value with the current data. It is control’s intended behavior. But the given value is beyond the provided data.  So we suggest to  update the value when the corresponding data is present. 


Query 2: Also If is select a value that is over 100 , my value changed event gets fired which passes is the value the first time which is fine. but the second time it passes in the name argument and then fails my lookup.. Not sure why value changed gets fired twice. 


We would like to inform you that ValueChange event will be triggered whenever the value property has been changed. In the below code, you have updated the null value to the value property.Hence ValueChange event triggered again. Refer the code below, 







private void onCustValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, FDICustomer> args) 
 
    { 
        if (args.Value != "" && args.Value != null) 
        { 
            var findCustomer = Customers.Find(x => x.CustAccount == args.Value); 
            if (findCustomer != null) 
            { 
                ChemOrderTable.CustName = findCustomer.Name; 
            } 
            else 
            { 
                ChemOrderTable.CustName = null; 
                ChemOrderTable.CustAccount = null; 
                comboboxCustomer.Value = null; 
 
            } 
        } 
 
    }  


Please let us know if you need further assistance. 


Regards, 
Sevvandhi N

chris johansson · Answer

"But the given value is beyond the provided data. So we suggest to update the value when the corresponding data is present. "

So what method would you use to accomplish this exactly upon initial load to update the value when its not present.

Thanks

chris johansson · Answer

Also even if i comment out my code and do nothing it gets called twice. If its under 100 it doesn't get called twice.. its because of the virtualization nothing to do with any code inside there. see my video

Attachment: ValueChangedEvent_d87ca718.zip

chris johansson · Answer

Just wondering if you had an update on this? updating the value..?

Sevvandhi Nagulan · Answer

Hi Chris, Thanks for the patience. Query 1: Also even if i comment out my code and do nothing it gets called twice. If its under 100 it doesn't get called twice.. its because of the virtualization nothing to do with any code inside there. see my video We considered the reported issue as a bug at our end. We will fix the reported issue and include in the December 9th, 2020 patch release. We appreciate your patience until then. You can track the status of the reported issue from the below feedback link. Feedback: https://www.syncfusion.com/feedback/20082/ Query 2: So what method would you use to accomplish this exactly upon initial load to update the value when its not present. You can update the value in the ActionComplete event by comparing to the result. This way you can avoid the setting of id in the control and corresponding text will be loaded. Refer to the below code, public void OnActionComplete(ActionCompleteEventArgs args) { foreach(var a in args.Result) { if (a.ID == value && !isFirst) { comboValue = a.ID; isFirst = true; } } } Please find the sample below, Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/virtualization-687609796 Regards, Sevvandhi N

chris johansson · Answer

Ok just so I understand here. I looked at it and you have 13 items, take 9. You initially set the value to Game13 but nothing gets set when I load it. So you basically looping through args which is only the 9 items and it doesn't find it so nothing gets set. Are you saying if that happens then just set the comboValue to the text?

Also it would be alot easier if AllowCustom = false would work with virtualization when the value is not in the current Take and instead searches the whole list. Instead I have to check in my value changed event that gets called twice and have to do a work around so it only does the validation once till this bug gets fixed.

As well if a value is being set initially and is not in the current take, still set it because it exists in the actual datasource.

Sevvandhi Nagulan · Answer

Hi Chris, 


We are validating the reported requirement. We will update further details on 1st December,2020. We appreciate your patience until then. 


Regards, 
Sevvandhi N