1. Home
  2. Forum
  3. Blazor
  4. DropDownList failing to populate on partial page

DropDownList failing to populate on partial page

I have a model dialog in partial page which obtains dynamic data from Sql Server.

PopulateDropDownLists() is called by the parent syncronously before the form is opened. 

Once the model is open, the drop down list is empty.
Click on it, and shows  NO DATA AVAILABLE
Click a second time, it is populated.

I've verified the collection has data.
PopulateDropDownLists() is only called once.
There is no problem if local data is used.  
Chrome reports zero errors.

Only data coming from a database AFTER the page is loaded.  Placing PopulateDropDownLists() in the OnInitializedAsync() method and it works - but with stale data.

Is there a method to force a DropDownList to update?

Attached is an png of the DropDownList in action and a code snip.
Blazor v17.4.0.49

Thanks!



 

Attachment: DropDownList_9eab0e1d.zip

5 Replies
BC Berly Christopher Syncfusion Team February 13, 2020 03:21 PM UTC

Hi Dave,   
  
Greetings from Syncfusion support.    
  
Upon inspecting the provided code, you have bound the data source with an observable collection. Since it is an observable collection, we suspect that once the component is interacted, the bound data source is fetched and set to the component. Hence, it opens correctly the second time. We suggest you to load the data source in the DropDownList at the time of opening the popup to resolve this, or else you have to call the PopulateDropDownLists() in the OnInitializedAsync() method as mentioned in your update.    
  
Please find the sample with server data from the below link.   
  
Let us know whether the above solution resolves the issue in your end.  
  
Regards,   
Berly B.C  


DA Dave February 13, 2020 10:33 PM UTC

Thank you for the response.  Unfortunately, it does not help.  There is no problem displaying data loaded before the page is opened. Just data loaded after.

> you have bound the data source with an observable collection

It does not matter if it is a List<> or ObservableCollection<>.  The results are the same.


> We suggest you to load the data source in the DropDownList at the time of opening the popup to resolve this

The datasource is loaded before the EjsDialog containing the EjsDropDownList is shown.

User is provided an EjsGrid.
They click a button on a row.
  A sql query runs and the loads the EjsDropDownList datasource.
   The modal EjsDialog is shown.

The sql query only runs ONCE - before the DDL is shown.

Then it takes two clicks to display data.  Sounds like a bug.

I'll see if I can come up with a working example to send you.
 
Thanks!




BC Berly Christopher Syncfusion Team February 14, 2020 01:36 PM UTC

Hi Dave,   
  
Thanks for the update.   
  
We have tried to reproduce the reported issue based on the provided details with DropDownList in an isolated environment. But unfortunately, we could not reproduce the reported issue at our end. Please find our test sample below.  

  
Please modify the above sample to replicate the reported issue. Else, please share the issue reproducing sample(if possible), as you mentioned in the previous update  
  
Regards,   
Berly B.C   


DA Dave February 15, 2020 06:28 AM UTC

Attached is a small snip.  It requires the SQL Server AdventureWorks database.

Same issue with DDL and Grids.  

You're documentation clearly states the controls can handle dynamic data. Obviously, I'm missing something.  

Attachment: BadGrid_1cccbc1c.zip

BC Berly Christopher Syncfusion Team February 17, 2020 12:27 PM UTC

Hi Tamas,  
 
We suggest you to call the “Refresh()” method of Grid after updating new data to the list bound to Grid. Please add the below highlighted code in your application,  
 
       public void PopulateGrid()  
    {  
        db.Employees_Get(ref employees);  
        EmployeeGrid.Refresh();  
    }  
 
Or else we suggest you to bind data to Grid as ObservableCollection. Please refer the documentation and online sample demos showing CRUD operation with ObservableCollection as data in Grid.  

 
Please get back to us if you need further assistance.  
 
Regards,  
Berly B.C 


Loader.
Up arrow icon